SlideShare una empresa de Scribd logo
1 de 56
Fast & uid
Web-native
(no plugins)
Local agency
Server not
worried about UI
{quot;statusquot;:quot;1quot;, quot;dataquot;:
[{quot;guidquot;:quot;PAPER-110226quot;,quot;typequot;:quot;Paperquot;,quot;titlequot;:
quot;Disaggregation of rainfall time series via
Gibbs samplingquot;,quot;abstractquot;:quot;We propose a MCMC
methodology to estimate all the components of
the RodriguezIturbe model.quot;,
quot;yearquot;:quot;1998quot;,quot;fixedyearquot;:quot;2quot;,quot;referencesquot;:
[quot;PAPER-22950quot;,quot;PAPER-434520quot;,quot;PAPER-77136quot;],quot;c
itationsquot;:[],quot;authorsquot;:
[{quot;guidquot;:quot;AUTHOR-128481quot;,quot;namequot;:quot;R. L. Smithquot;},
{quot;guidquot;:quot;AUTHOR-243476quot;,quot;namequot;:quot;V.
Granvillequot;}]}
class RefreshController < ApplicationController

 before_filter :signin_required

 def index
  render :text => JSON.generate(Refresher.new(params).to_hash)
 end

end
Introduction to SproutCore
        Mike Subelsky
         @subelsky
The Near Future
“[Screw] the server, move all the processing
           power to the client”

  quot;move presentation back to the clientquot;

                          - Chris WIlliams
The Near Future
      TaffyDB     Titanium
Cappuccino      O3D   PhoneGap
The Present
The Present


Desktop-Like
~200 ms
Not much
 storage
For Cloud Apps
Borrows Patterns
Different API
quot;How would you build Cocoa for
  the web browser if you could
    rewrite it from scratch...
...throwing away old out of date
             parts?quot;
                    - Charles Jolley
Borrows Patterns
Cocoa Touch
Cocoa Touch




Courtesy Neven Mrgan
What Could We Build?
MMORPG
                             Audio editor
IDE*
                  CASE                 Workflow
         GIS             Guitar-hero clone?


   What Could We Build?
                      CRM               Statistics
Video editor*

                             Image editor

                CAD
What Would
You Need?
What Desktop
Developers Have
What Desktop
      Developers Have
   Local database
Keyboard management
  Focus management
    Drag-and-drop
    Drawing layer
Bindings & Observers*
What Desktop
      Developers Have
   Local database               MVC
                           Event handling
Keyboard management
                               Timers
  Focus management
                            Build system
    Drag-and-drop
                         Testing framework
    Drawing layer
                        Incremental Loading
Bindings & Observers*
Key-Value Coding
Key-Value Coding

Key-Value Observation
Key-Value Coding

Key-Value Observation

      Bindings
Key-Value Coding

object.get(‘name’); // ‘Bob’
object.set(‘name’,‘Sarah’); // object
Key-Value Coding

object.name
object.name = ‘Sarah’
Key-Value Coding

object.name
object.name = ‘Sarah’
Key-Value
                   Observation


                                  ContactListItem
                                       View

  Contact
   Contact
    Contact
                           <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;
Key-Value
                      Observation

        ContactsController
     content = contacts collection
        selection = contact 5
                                            ContactListItem
                                                 View

  Contact
   Contact
    Contact
                                     <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;
Key-Value
                      Observation
                                        ContactController
                                             content =
                                     ContactsController.selection

        ContactsController
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View

  Contact
   Contact
    Contact
                                                   <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;
Key-Value
                      Observation
                                        ContactController
                                             content =
                                     ContactsController.selection

        ContactsController
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View

  Contact
   Contact
    Contact
                                                   <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;
Key-Value
                      Observation
                                        ContactController
                                             content =
                                     ContactsController.selection

        ContactsController
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View

  Contact
   Contact
    Contact
                                                   <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;

object.set(‘name’,‘Sarah’);
Key-Value
                       Observation
                                        ContactController
                                             content =
                        Change
                                     ContactsController.selection

        ContactsController
                                                                     Change
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View
              Change
  Contact
   Contact
    Contact
                                                   <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;

object.set(‘name’,‘Sarah’);
Key-Value
                       Observation
                                        ContactController
                                             content =
                        Change
                                     ContactsController.selection

        ContactsController
                                                                     Change
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View
              Change
  Contact
   Contact
    Contact
                                                <h2>Sarah Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;

object.set(‘name’,‘Sarah’);
Bindings
                                        ContactController
                                             content =
                                     ContactsController.selection

        ContactsController
     content = contacts collection
        selection = contact 5
                                                                ContactListItem
                                                                     View

  Contact
   Contact
    Contact
                                                   <h2>Lucy Smith</h2>
     Contact
guid: 5
firstName: quot;Lucyquot;
KVC/KVO Demo
Properties
require('core');

Contacts.Contact = SC.Record.extend({

 fullName: function() {
   return [this.get('firstName'),
   this.get('lastName')].join(' ');
 }.property('firstName', 'lastName')

});
Code Base Tour




  0.9.x API
What gets downloaded?
javascript.js*
stylesheet.css
index.html
images (sprite for bonus)




               All can be cached
SC generates these files on the fly
in development mode

        Served by Merb / Rack
SC builds these files as static
   assets in production mode

Served by Apache,Varnish, CDN, etc.
       Rails-style asset tags
Thanks to
 Erich Ocean
     and
Charles Jolley
Questions?
  mike@oib.com
   @subelsky

Más contenido relacionado

Más de Mike Subelsky

SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
Mike Subelsky
 

Más de Mike Subelsky (12)

STAQ Development Manual (Redacted)
STAQ Development Manual (Redacted)STAQ Development Manual (Redacted)
STAQ Development Manual (Redacted)
 
Coding for uncertainty
Coding for uncertaintyCoding for uncertainty
Coding for uncertainty
 
Ruby Concurrency Realities
Ruby Concurrency RealitiesRuby Concurrency Realities
Ruby Concurrency Realities
 
Generating Good Ideas
Generating Good IdeasGenerating Good Ideas
Generating Good Ideas
 
Baltimore: A Great Place to Pick Up Ideas and Run WIth Them (Ignite)
Baltimore: A Great Place to Pick Up Ideas and Run WIth Them (Ignite)Baltimore: A Great Place to Pick Up Ideas and Run WIth Them (Ignite)
Baltimore: A Great Place to Pick Up Ideas and Run WIth Them (Ignite)
 
Let's Make Baltimore More Innovative (TEDxBaltimore)
Let's Make Baltimore More Innovative (TEDxBaltimore)Let's Make Baltimore More Innovative (TEDxBaltimore)
Let's Make Baltimore More Innovative (TEDxBaltimore)
 
Social Media for Everybody
Social Media for EverybodySocial Media for Everybody
Social Media for Everybody
 
Ruby For Startups
Ruby For StartupsRuby For Startups
Ruby For Startups
 
It's Not Always Sunny in the Clouds
It's Not Always Sunny in the CloudsIt's Not Always Sunny in the Clouds
It's Not Always Sunny in the Clouds
 
Scaling Rails Applications In The Cloud
Scaling Rails Applications In The CloudScaling Rails Applications In The Cloud
Scaling Rails Applications In The Cloud
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 

Último

Último (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Introduction to SproutCore at JSConf

Notas del editor