Fast & uid

Web-native
(no plugins)

Local agency

Server not
worried about UI

{\"status\":\"1\", \"data\":
[{\"guid\":\"PAPER-110226\",\"type\":\"Paper\",\"title\":
\"Disaggregation of rainfall time series via
Gibbs sampling\",\"abstract\":\"We propose a MCMC
methodology to estimate all the components of
the RodriguezIturbe model.\",
\"year\":\"1998\",\"fixedyear\":\"2\",\"references\":
[\"PAPER-22950\",\"PAPER-434520\",\"PAPER-77136\"],\"c
itations\":[],\"authors\":
[{\"guid\":\"AUTHOR-128481\",\"name\":\"R. L. Smith\"},
{\"guid\":\"AUTHOR-243476\",\"name\":\"V.
Granville\"}]}

class RefreshController < ApplicationController
before_filter :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”
\"move presentation back to the client\"
- 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

Different API

\"How would you build Cocoa for
the web browser if you could
rewrite it from scratch...

...throwing away old out of date
parts?\"
- Charles Jolley

Borrows Patterns

Cocoa Touch

Cocoa Touch
Courtesy Neven Mrgan

What Could We Build?

MMORPG
Audio editor
IDE*
CASE Workflow
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 Coding
object.name
object.name = ‘Sarah’

Key-Value
Observation
ContactListItem
View
Contact
Contact
Contact
<h2>Lucy Smith</h2>
Contact
guid: 5
firstName: \"Lucy\"

Key-Value
Observation
ContactsController
content = contacts collection
selection = contact 5
ContactListItem
View
Contact
Contact
Contact
<h2>Lucy Smith</h2>
Contact
guid: 5
firstName: \"Lucy\"

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: \"Lucy\"

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: \"Lucy\"

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: \"Lucy\"
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
firstName: \"Lucy\"
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
firstName: \"Lucy\"
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
firstName: \"Lucy\"

KVC/KVO Demo

Properties
require('core');
Contacts.Contact = SC.Record.extend({
fullName: function() {
return [this.get('firstName'),
this.get('lastName')].join(' ');
}.property('firstName', '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 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 tags

Thanks to
Erich Ocean
and
Charles Jolley

Questions?
mike@oib.com
@subelsky