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...
class RefreshController < ApplicationController

 before_filter :signin_required

 def index
  render :text => JSON.generat...
Introduction to SproutCore
        Mike Subelsky
         @subelsky
The Near Future
“[Screw] the server, move all the processing
           power to the client”

  quot;move presentation bac...
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         ...
What Would
You Need?
What Desktop
Developers Have
What Desktop
      Developers Have
   Local database
Keyboard management
  Focus management
    Drag-and-drop
    Drawing ...
What Desktop
      Developers Have
   Local database               MVC
                           Event handling
Keyboard ...
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
                             ...
Key-Value
                      Observation

        ContactsController
     content = contacts collection
        selecti...
Key-Value
                      Observation
                                        ContactController
                    ...
Key-Value
                      Observation
                                        ContactController
                    ...
Key-Value
                      Observation
                                        ContactController
                    ...
Key-Value
                       Observation
                                        ContactController
                   ...
Key-Value
                       Observation
                                        ContactController
                   ...
Bindings
                                        ContactController
                                             content =
...
KVC/KVO Demo
Properties
require('core');

Contacts.Contact = SC.Record.extend({

 fullName: function() {
   return [this.get('firstName'...
Code Base Tour




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




               All can be cac...
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 ...
Thanks to
 Erich Ocean
     and
Charles Jolley
Questions?
  mike@oib.com
   @subelsky
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Introduction to SproutCore at JSConf
Upcoming SlideShare
Loading in...5
×

Introduction to SproutCore at JSConf

5,817

Published on

Mike Subelsky from OtherInbox.com demonstrates the awesomeness of the SproutCore framework for building desktop apps in JavaScript

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,817
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
191
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
























































  • Introduction to SproutCore at JSConf

    1. 1. Fast & uid
    2. 2. Web-native (no plugins)
    3. 3. Local agency
    4. 4. Server not worried about UI
    5. 5. {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;}]}
    6. 6. class RefreshController < ApplicationController before_filter :signin_required def index render :text => JSON.generate(Refresher.new(params).to_hash) end end
    7. 7. Introduction to SproutCore Mike Subelsky @subelsky
    8. 8. The Near Future “[Screw] the server, move all the processing power to the client” quot;move presentation back to the clientquot; - Chris WIlliams
    9. 9. The Near Future TaffyDB Titanium Cappuccino O3D PhoneGap
    10. 10. The Present
    11. 11. The Present Desktop-Like
    12. 12. ~200 ms
    13. 13. Not much storage
    14. 14. For Cloud Apps
    15. 15. Borrows Patterns
    16. 16. Different API
    17. 17. quot;How would you build Cocoa for the web browser if you could rewrite it from scratch...
    18. 18. ...throwing away old out of date parts?quot; - Charles Jolley
    19. 19. Borrows Patterns
    20. 20. Cocoa Touch
    21. 21. Cocoa Touch Courtesy Neven Mrgan
    22. 22. What Could We Build?
    23. 23. MMORPG Audio editor IDE* CASE Workflow GIS Guitar-hero clone? What Could We Build? CRM Statistics Video editor* Image editor CAD
    24. 24. What Would You Need?
    25. 25. What Desktop Developers Have
    26. 26. What Desktop Developers Have Local database Keyboard management Focus management Drag-and-drop Drawing layer Bindings & Observers*
    27. 27. 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*
    28. 28. Key-Value Coding
    29. 29. Key-Value Coding Key-Value Observation
    30. 30. Key-Value Coding Key-Value Observation Bindings
    31. 31. Key-Value Coding object.get(‘name’); // ‘Bob’ object.set(‘name’,‘Sarah’); // object
    32. 32. Key-Value Coding object.name object.name = ‘Sarah’
    33. 33. Key-Value Coding object.name object.name = ‘Sarah’
    34. 34. Key-Value Observation ContactListItem View Contact Contact Contact <h2>Lucy Smith</h2> Contact guid: 5 firstName: quot;Lucyquot;
    35. 35. 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;
    36. 36. 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;
    37. 37. 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;
    38. 38. 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’);
    39. 39. 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’);
    40. 40. 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’);
    41. 41. 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;
    42. 42. KVC/KVO Demo
    43. 43. Properties require('core'); Contacts.Contact = SC.Record.extend({ fullName: function() { return [this.get('firstName'), this.get('lastName')].join(' '); }.property('firstName', 'lastName') });
    44. 44. Code Base Tour 0.9.x API
    45. 45. What gets downloaded? javascript.js* stylesheet.css index.html images (sprite for bonus) All can be cached
    46. 46. SC generates these files on the fly in development mode Served by Merb / Rack
    47. 47. SC builds these files as static assets in production mode Served by Apache,Varnish, CDN, etc. Rails-style asset tags
    48. 48. Thanks to Erich Ocean and Charles Jolley
    49. 49. Questions? mike@oib.com @subelsky
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×