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

2. Fast & uid

3. Web-native
(no plugins)

4. Local agency

5. Server not
worried about UI

6. {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;}]}

7. class RefreshController < ApplicationController
before_filter :signin_required
def index
render :text => JSON.generate(Refresher.new(params).to_hash)
end
end

8. Introduction to SproutCore
Mike Subelsky
@subelsky

9. The Near Future
“[Screw] the server, move all the processing
power to the client”
quot;move presentation back to the clientquot;
- Chris WIlliams

10. The Near Future
TaffyDB Titanium
Cappuccino O3D PhoneGap

11. The Present

12. The Present
Desktop-Like

14. ~200 ms

15. Not much
storage

17. For Cloud Apps

18. Borrows Patterns

19. Different API

20. quot;How would you build Cocoa for
the web browser if you could
rewrite it from scratch...

21. ...throwing away old out of date
parts?quot;
- Charles Jolley

22. Borrows Patterns

25. Cocoa Touch

26. Cocoa Touch
Courtesy Neven Mrgan

27. What Could We Build?

28. MMORPG
Audio editor
IDE*
CASE Workflow
GIS Guitar-hero clone?
What Could We Build?
CRM Statistics
Video editor*
Image editor
CAD

29. What Would
You Need?

30. What Desktop
Developers Have

31. What Desktop
Developers Have
Local database
Keyboard management
Focus management
Drag-and-drop
Drawing layer
Bindings & Observers*

32. 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*

34. Key-Value Coding

35. Key-Value Coding
Key-Value Observation

36. Key-Value Coding
Key-Value Observation
Bindings

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

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

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

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

42. 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;

43. 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;

44. 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;

45. 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’);

46. 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’);

47. 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’);

48. 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;

49. KVC/KVO Demo

50. Properties
require('core');
Contacts.Contact = SC.Record.extend({
fullName: function() {
return [this.get('firstName'),
this.get('lastName')].join(' ');
}.property('firstName', 'lastName')
});

51. Code Base Tour
0.9.x API

52. What gets downloaded?
javascript.js*
stylesheet.css
index.html
images (sprite for bonus)
All can be cached

53. SC generates these files on the fly
in development mode
Served by Merb / Rack

54. SC builds these files as static
assets in production mode
Served by Apache,Varnish, CDN, etc.
Rails-style asset tags

55. Thanks to
Erich Ocean
and
Charles Jolley

56. Questions?
mike@oib.com
@subelsky