advertisement

Introduction to SproutCore at JSConf

43 %
57 %
advertisement
Information about Introduction to SproutCore at JSConf
Technology

Published on April 27, 2009

Author: subelsky

Source: slideshare.net

Description

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

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_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” 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

Different 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 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: quot;Lucyquot;

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;

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;

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;

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

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

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

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;

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Introduction to SproutCore - infoq.com

In this presentation from JSConf 2009, Mike Subelsky gives an introduction to SproutCore, a JavaScript application development framework. Topics discussed ...
Read more

Mike Subelsky: Introduction to SproutCore - YouTube

Apple made a huge splash with their rich Mike Subelsky, shows you the inner workings of SproutCore, the JavaScript library that is used to ...
Read more

SproutCore Introduction Part 2 - YouTube

SproutCore Introduction Part 2 ... Mike Subelsky: Introduction to SproutCore - Duration: ... JSConf 227 views.
Read more

SproutCore Slide decks | Lanyrd

SproutCore Slide decks. 4 conference presentation Slide decks. ... Clear. Slides Introduction to SproutCore at JSConf (slideshare.net)
Read more

Sproutcore | LinkedIn

View 583 Sproutcore posts, ... Introduction to SproutCore at JSConf. 5,981 Views. ... (Introduction to SproutCore) 1,832 Views.
Read more

Mike Subelsky: April 2009

Introduction to SproutCore at JSConf. View more presentations from subelsky. Email This BlogThis! Share to Twitter Share to Facebook Share to Pinterest.
Read more

JSConf - infoq.com

JSConf Content on InfoQ Presentations about JSConf ... Mike Subelsky gives an introduction to SproutCore, ...
Read more

Mike Subelsky

Introduction to SproutCore at JSConf. View more presentations from subelsky. ... Labels: Javascript, jsconf, sproutcore. No comments: Post a Comment.
Read more

Introduction to SproutCore - softdevtube.com

In this presentation from JSConf 2009, Mike Subelsky gives an introduction to SproutCore, a JavaScript application development framework. Topics discussed
Read more