Introduction to SproutCore at JSConf

43 %
57 %
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

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...