fast & fluid - o'reilly mediaassets.en.oreilly.com/1/event/24/building next generation web...
TRANSCRIPT
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"],"citations":[],"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 SproutCoreMike 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?
What Could We Build?
IDE*
Image editor
Video editor*
Audio editor
CAD
Statistics
MMORPG
MMORPG
GISWorkflowCASE
CRM
Guitar-hero clone?
What Would You Need?
What Desktop Developers Have
What Desktop Developers Have
Local database
Keyboard managementFocus management
Drag-and-dropDrawing layer
Bindings & Observers*
What Desktop Developers Have
Local database
Keyboard managementFocus management
Drag-and-dropDrawing layer
Bindings & Observers*
MVCEvent handling
TimersBuild system
Testing frameworkIncremental Loading
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.nameobject.name = ‘Sarah’
Key-Value Coding
object.nameobject.name = ‘Sarah’
ContactContactContact
Key-Value Observation
Contactguid: 5
firstName: "Lucy"
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
Contactguid: 5
firstName: "Lucy"
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Contactguid: 5
firstName: "Lucy"
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Contactguid: 5
firstName: "Lucy"
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Contactguid: 5
firstName: "Lucy"
object.set(‘name’,‘Sarah’);
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Change
Change
Change
Contactguid: 5
firstName: "Lucy"
object.set(‘name’,‘Sarah’);
ContactListItem
View
<h2>Lucy Smith</h2>
ContactContactContact
Key-Value Observation
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Change
Change
Change
Contactguid: 5
firstName: "Lucy"
object.set(‘name’,‘Sarah’);
ContactListItem
View
<h2>Sarah Smith</h2>
ContactContactContact
Bindings
ContactsController
content = contacts collection
selection = contact 5
ContactController
content =
ContactsController.selection
Contactguid: 5
firstName: "Lucy"
ContactListItem
View
<h2>Lucy Smith</h2>
KVC/KVO Demo
Propertiesrequire('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.cssindex.htmlimages (sprite for bonus)
All can be cached
SC generates these files on the flyin development mode
Served by Merb / Rack
SC builds these files as staticassets in production mode
Served by Apache, Varnish, CDN, etc.
Rails-style asset tags
Thanks to Erich Ocean
and Charles Jolley
