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

1. SproutCore
a next generation javascript framework

2. What
Desktop-like Apps
Client Side MVC
Inspired by Cocoa

3. Why
Common App Features for Free
Cross-browser Optimized
Glue-code Eliminated

4. JavaScript and Proud
Not trying to be Java, Ruby, Python, Obj-C

5. Features

6. At the code level...

7. Properties
Example: A contact’s first name
Most are simple values - numbers, strings, objects
Can be functions which dynamically “compute” value

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

9. Bindings
Two objects, “bound” together
When one changes, the other changes also

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. Glue Code Eliminated!
Controllers and views automatically stay in sync
with the model objects in your application!

12. But...
there’s a small price to pay

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. Example

15. Computed Properties
Accessed like stored properties ( with get() )
Calls a function to compute the value
Declared with .property()

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. Computed Property KVO
When declaring, list the attributes the computed
property relies on:

18. User Interface Features

19. Controls
SC.ListView SC.GridView

20. Controls
SC.SourceListView Form Controls

21. Controls
Split-Panes
Dialogs, Pop-up Menus, Pickers
Native-Controls

22. Developer Tools

23. Generators
Generate skeletons for your application, models, views,
controllers
Helps you get started quickly
Gives you a standard place to put things

24. Helpers
Generate your views with small, declarative helpers
Similar to Ruby on Rails view helpers
In fact, written in Ruby!

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. 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. Thanks
Scott Becker
http://synthesis.sbecker.net