Fast & fluid

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

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

Courtesy Neven Mrgan

 MMORPG
IDE* Audio editor
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
Local database MVC
Keyboard management Event handling
Focus management Timers
Drag-and-drop Build system
Drawing layer Testing framework
Bindings & Observers* Incremental Loading
 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
ContactController
Change content =
ContactsController.selection

ContactsController
Change
content = contacts collection
selection = contact 5
ContactListItem
View
Change
Contact
Contact
Contact
Contact
guid: 5
<h2>Lucy Smith</h2>
firstName: "Lucy"

object.set(‘name’,‘Sarah’);
 Key-Value
Observation
ContactController
Change content =
ContactsController.selection

ContactsController
Change
content = contacts collection
selection = contact 5
ContactListItem
View
Change
Contact
Contact
Contact
Contact
guid: 5
<h2>Sarah Smith</h2>
firstName: "Lucy"

object.set(‘name’,‘Sarah’);
 Bindings
ContactController
content =
ContactsController.selection

ContactsController
content = contacts collection
selection = contact 5
ContactListItem
View

Contact
Contact
Contact
Contact
guid: 5
<h2>Lucy Smith</h2>
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