Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SproutCore
a next generation javascript framework
What
Desktop-like Apps
Client Side MVC
Inspired by Cocoa
Why
Common App Features for Free
Cross-browser Optimized
Glue-code Eliminated
JavaScript and Proud
Not trying to be Java, Ruby, Python, Obj-C
Features
At the code level...
Properties


 Example: A contact’s first name
 Most are simple values - numbers, strings, objects
 Can be functions which d...
Observers


Watch for property changes
Takes some action
Examples: Update view, send data to server
Bindings


Two objects, “bound” together
When one changes, the other changes also
Example


The contact firstName property is bound to the
textFieldView value property.
When the contact’s firstName is updat...
Glue Code Eliminated!
Controllers and views automatically stay in sync
  with the model objects in your application!
But...
there’s a small price to pay
Key Value Coding

Access properties with object.get(key)
Set properties with object.set(key, value);
This allows SproutCor...
Example
Computed Properties
Accessed like stored properties ( with get() )
Calls a function to compute the value
Declared with .pr...
Key Value Observing

Allows Object A to observe changes to Object B
How binding is able to work
Abbreviated as KVO
Automat...
Computed Property KVO

When declaring, list the attributes the computed
property relies on:
User Interface Features
Controls
SC.ListView   SC.GridView
Controls
SC.SourceListView   Form Controls
Controls


Split-Panes
Dialogs, Pop-up Menus, Pickers
Native-Controls
Developer Tools
Generators


Generate skeletons for your application, models, views,
controllers
Helps you get started quickly
Gives you a...
Helpers


Generate your views with small, declarative helpers
Similar to Ruby on Rails view helpers
In fact, written in Ru...
Development Server

Handles including JS files and view partials into your
HTML file - less work for you.
Allows change-and-...
Build Tools


 Packages all assets into single files - 1 HTML, 1 CSS, 1
 JavaScript.
 Minifies your JavaScript
 Host your ap...
Thanks
Scott Becker
http://synthesis.sbecker.net
Upcoming SlideShare
Loading in …5
×

SproutCore - A Next Gen JavaScript Framework

23,518 views

Published on

Introduction to the core concepts of SproutCore, a framework for building desktop-like web applications.

Published in: Technology
  • I am wanting to create a gallery and maybe some of the other features like mobile me, is there a tutorial or something someone could show me to help with this. Mainly just the gallery, but if possible the calendar, contacts, and maybe the public.me.com feature as well. I understand I will have to have a server, but if there is something out there to help that would be great.

    Thanks,
    Anthony
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks Scott! Nice introduction to SproutCore.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

SproutCore - A Next Gen JavaScript Framework

  1. 1. SproutCore a next generation javascript framework
  2. 2. What Desktop-like Apps Client Side MVC Inspired by Cocoa
  3. 3. Why Common App Features for Free Cross-browser Optimized Glue-code Eliminated
  4. 4. JavaScript and Proud Not trying to be Java, Ruby, Python, Obj-C
  5. 5. Features
  6. 6. At the code level...
  7. 7. Properties Example: A contact’s first name Most are simple values - numbers, strings, objects Can be functions which dynamically “compute” value
  8. 8. Observers Watch for property changes Takes some action Examples: Update view, send data to server
  9. 9. Bindings Two objects, “bound” together When one changes, the other changes also
  10. 10. Example The contact firstName property is bound to the textFieldView value property. When the contact’s firstName is updated, textFieldView’s value is updated automatically. When textFieldView’s value changes, the valueDidChange observer kicks in & updates the UI.
  11. 11. Glue Code Eliminated! Controllers and views automatically stay in sync with the model objects in your application!
  12. 12. But... there’s a small price to pay
  13. 13. Key Value Coding Access properties with object.get(key) Set properties with object.set(key, value); This allows SproutCore to watch things change Abbreviated as “KVC”
  14. 14. Example
  15. 15. Computed Properties Accessed like stored properties ( with get() ) Calls a function to compute the value Declared with .property()
  16. 16. Key Value Observing Allows Object A to observe changes to Object B How binding is able to work Abbreviated as KVO Automatic for stored (non-computed) properties Requires a little setup for computed properties...
  17. 17. Computed Property KVO When declaring, list the attributes the computed property relies on:
  18. 18. User Interface Features
  19. 19. Controls SC.ListView SC.GridView
  20. 20. Controls SC.SourceListView Form Controls
  21. 21. Controls Split-Panes Dialogs, Pop-up Menus, Pickers Native-Controls
  22. 22. Developer Tools
  23. 23. Generators Generate skeletons for your application, models, views, controllers Helps you get started quickly Gives you a standard place to put things
  24. 24. Helpers Generate your views with small, declarative helpers Similar to Ruby on Rails view helpers In fact, written in Ruby!
  25. 25. Development Server Handles including JS files and view partials into your HTML file - less work for you. Allows change-and-refresh style development Can proxy to external website backends for server interaction.
  26. 26. Build Tools Packages all assets into single files - 1 HTML, 1 CSS, 1 JavaScript. Minifies your JavaScript Host your app on any server or CDN - just static files
  27. 27. Thanks Scott Becker http://synthesis.sbecker.net

×