Introduction to SproutCore at JSConf

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_ﬁlter :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

Diﬀerent 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 Workﬂow 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 Observation ContactListItem View Contact Contact Contact <h2>Lucy Smith</h2> Contact guid: 5 ﬁrstName: quot;Lucyquot;

Key-Value Observation ContactsController content = contacts collection selection = contact 5 ContactListItem View Contact Contact Contact <h2>Lucy Smith</h2> Contact guid: 5 ﬁrstName: 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 ﬁrstName: 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 ﬁrstName: 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 ﬁrstName: 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 ﬁrstName: 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 ﬁrstName: quot;Lucyquot;

KVC/KVO Demo

Properties require('core'); Contacts.Contact = SC.Record.extend({ fullName: function() { return [this.get('ﬁrstName'), this.get('lastName')].join(' '); }.property('ﬁrstName', '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 ﬁles on the ﬂy in development mode Served by Merb / Rack

SC builds these ﬁles 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

http://en.oreilly.com	2601
http://www.subelsky.com	118
http://www.slideshare.net	25
http://lanyrd.com	13
http://subelsky.com	7
http://files.subelsky.com	5
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
http://feeds.feedburner.com	2
http://www.subelsky.net	1
http://xss.yandex.net	1

Introduction to SproutCore at JSConf

by Mike Subelsky

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 2,778

Statistics

Introduction to SproutCore at JSConf Presentation Transcript