Introduction to SproutCore at JSConf
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to SproutCore at JSConf

on

  • 9,627 views

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

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

Statistics

Views

Total Views
9,627
Views on SlideShare
6,790
Embed Views
2,837

Actions

Likes
9
Downloads
190
Comments
0

11 Embeds 2,837

http://en.oreilly.com 2652
http://www.subelsky.com 125
http://www.slideshare.net 25
http://lanyrd.com 14
http://subelsky.com 7
http://files.subelsky.com 5
http://translate.googleusercontent.com 3
http://webcache.googleusercontent.com 2
http://feeds.feedburner.com 2
http://www.subelsky.net 1
http://xss.yandex.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Introduction to SproutCore at JSConf Presentation Transcript

  • 1. Fast & uid
  • 2. Web-native (no plugins)
  • 3. Local agency
  • 4. Server not worried about UI
  • 5. {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;}]}
  • 6. class RefreshController < ApplicationController before_filter :signin_required def index render :text => JSON.generate(Refresher.new(params).to_hash) end end
  • 7. Introduction to SproutCore Mike Subelsky @subelsky
  • 8. The Near Future “[Screw] the server, move all the processing power to the client” quot;move presentation back to the clientquot; - Chris WIlliams
  • 9. The Near Future TaffyDB Titanium Cappuccino O3D PhoneGap
  • 10. The Present
  • 11. The Present Desktop-Like
  • 12. ~200 ms
  • 13. Not much storage
  • 14. For Cloud Apps
  • 15. Borrows Patterns
  • 16. Different API
  • 17. quot;How would you build Cocoa for the web browser if you could rewrite it from scratch...
  • 18. ...throwing away old out of date parts?quot; - Charles Jolley
  • 19. Borrows Patterns
  • 20. Cocoa Touch
  • 21. Cocoa Touch Courtesy Neven Mrgan
  • 22. What Could We Build?
  • 23. MMORPG Audio editor IDE* CASE Workflow GIS Guitar-hero clone? What Could We Build? CRM Statistics Video editor* Image editor CAD
  • 24. What Would You Need?
  • 25. What Desktop Developers Have
  • 26. What Desktop Developers Have Local database Keyboard management Focus management Drag-and-drop Drawing layer Bindings & Observers*
  • 27. 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*
  • 28. Key-Value Coding
  • 29. Key-Value Coding Key-Value Observation
  • 30. Key-Value Coding Key-Value Observation Bindings
  • 31. Key-Value Coding object.get(‘name’); // ‘Bob’ object.set(‘name’,‘Sarah’); // object
  • 32. Key-Value Coding object.name object.name = ‘Sarah’
  • 33. Key-Value Coding object.name object.name = ‘Sarah’
  • 34. Key-Value Observation ContactListItem View Contact Contact Contact <h2>Lucy Smith</h2> Contact guid: 5 firstName: quot;Lucyquot;
  • 35. 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;
  • 36. 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;
  • 37. 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;
  • 38. 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’);
  • 39. 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’);
  • 40. 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’);
  • 41. 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;
  • 42. KVC/KVO Demo
  • 43. Properties require('core'); Contacts.Contact = SC.Record.extend({ fullName: function() { return [this.get('firstName'), this.get('lastName')].join(' '); }.property('firstName', 'lastName') });
  • 44. Code Base Tour 0.9.x API
  • 45. What gets downloaded? javascript.js* stylesheet.css index.html images (sprite for bonus) All can be cached
  • 46. SC generates these files on the fly in development mode Served by Merb / Rack
  • 47. SC builds these files as static assets in production mode Served by Apache,Varnish, CDN, etc. Rails-style asset tags
  • 48. Thanks to Erich Ocean and Charles Jolley
  • 49. Questions? mike@oib.com @subelsky