SproutCore and the Future of Web Apps

3,328 views

Published on

Mike Subelsky of OtherInbox.com discusses the SproutCore JavaScript framework for building desktop web applications that run inside the browser.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,328
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
61
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

SproutCore and the Future of Web Apps

  1. 1. 2.0
  2. 2. 3F 2.0
  3. 3. Future of Web Apps Fast, fluid, and feature-rich
  4. 4. Future of Web Apps Less web, more app
  5. 5. Future of Web Apps Probably client-server
  6. 6. Future of Web Apps Web-native, no plugins
  7. 7. Future of Web Apps Open source
  8. 8. Building 3F Apps with SproutCore Mike Subelsky OtherInbox.com IgniteBaltimore.com
  9. 9. Use SproutCore to build web clients that feel like desktop apps
  10. 10. Use whatever you want to build the server
  11. 11. Not a competitor or replacement of jQuery, Prototype, etc.
  12. 12. Not a competitor or replacement of jQuery, Prototype, etc.
  13. 13. Why client-server?
  14. 14. Users Want More
  15. 15. Impossible with “traditional” web 2.0 techniques
  16. 16. remove_messages: function(message_ids,block) { OtherInbox.undo_stack.push(new UndoAction(message_ids,Mailbox.current_id,block)) $('undo').writeAttribute('disabled',null) var affected_mailboxes = $H() var highest_position = null var msg_count = 0 message_ids.each(function(id) { $('msg_row_' + id).remove() var msg = Message.instances.unset(id) var position = Message.ordered_instance_keys.indexOf(Number(id)) Message.ordered_instance_keys.splice(position,1) if ((highest_position == null) || (highest_position < position)) highest_position = position msg_count++ }) Mailbox.update_message_count(msg_count)
  17. 17. 3F Means You Need Client-Server
  18. 18. OI.executeAjax('/refresh', { method: 'get', parameters: parameters, onSuccess: function(transport) { OI._parseRefresh(transport); } }); removeMessages: function(msgs) { SC.Store.destroyRecords(msgs); };
  19. 19. class RefreshController < ApplicationController before_filter :signin_required def index render :text => JSON.generate(Refresher.new(params).to_hash) end end
  20. 20. {quot;recordTypesquot;:[quot;Mailboxquot;,quot;Userquot;,quot;Folderquot;], quot;deletedquot;:{}, quot;flashquot;:[], quot;changedquot;:{ quot;Userquot;: [{quot;namequot;:quot;forfunquot;,quot;preferencesquot;:null,quot;guidquot;: 3,quot;typequot;:quot;Userquot;,quot;adminquot;:true,quot;invitationsRemaining quot;:1,quot;loginquot;:quot;testuserquot;,quot;statequot;:quot;completedquot;}], quot;createdquot;: {quot;Mailboxquot; [{quot;namequot;:quot;Freeslidequot;,quot;unreadCountquot;:null ,quot;guidquot;:quot;12quot;,quot;folderquot;:quot;3quot;,quot;priorityquot;:quot;2quot;,quot;typequot;: quot;Mailboxquot;}]}} }
  21. 21. sh Fla t ip S cr va Ja CSS L HTM
  22. 22. 3F Means You Need To Think Like a Desktop Developer
  23. 23. Kill me now
  24. 24. “...writing an app in Javascript on the web is akin to writing C on the desktop: it is just one level above the 'bare metal’.” - Charles Jolley
  25. 25. SproutCore does 80% (just like Rails)
  26. 26. Feels a bit like Rails
  27. 27. Feels a bit like Rails Convention over configuration
  28. 28. Feels a bit like Rails Configuring components
  29. 29. Feels a bit like Rails Uses Ruby helpers and ERB or Haml
  30. 30. Except totally different
  31. 31. Except totally different Inspired by Cocoa
  32. 32. Except totally different More functionally-oriented (little or no state)
  33. 33. Except totally different Everything is a binding
  34. 34. Except totally different Trust but verify if (foo && foo.get(‘importantValue’))
  35. 35. Except totally different By all means, repeat yourself
  36. 36. Except totally different JavaScript is awesome (just avoid the bad parts)
  37. 37. Except totally different MVC !== MVC
  38. 38. What does it look like?
  39. 39. sc-config clients
  40. 40. sc-config c[:build_mode] = :production c[:minify_javascript] = :production c[:combine_javascript] = :production c[:combine_stylesheets] = :production c[:include_fixtures] = :development
  41. 41. clients
  42. 42. Models
  43. 43. Models require('core'); require('models/record'); OI.Mailbox = OI.Record.extend({ dataSource: SC.Store, _messages: null, isLoading: false, init: function() { this._messages = { value: [] }; }, lowerCaseName: function() { var name = this.get('name'); if (name) { return name.toLowerCase(); } }.property('name'),
  44. 44. Models Build commands require('core'); require('models/record'); OI.Mailbox = OI.Record.extend({ dataSource: SC.Store, _messages: null, isLoading: false, init: function() { this._messages = { value: [] }; }, lowerCaseName: function() { var name = this.get('name'); if (name) { return name.toLowerCase(); } }.property('name'),
  45. 45. Models Build commands require('core'); require('models/record'); OI.Mailbox = OI.Record.extend({ dataSource: SC.Store, _messages: null, isLoading: false, init: function() { this._messages = { value: [] }; }, lowerCaseName: function() { var name = this.get('name'); if (name) { return name.toLowerCase(); } }.property('name'), Computed property
  46. 46. Controllers
  47. 47. Controllers
  48. 48. Controllers Observer
  49. 49. Views
  50. 50. Views
  51. 51. Tests SproutCore has good built-in testing
  52. 52. Tests
  53. 53. Tests
  54. 54. english.lproj
  55. 55. english.lproj
  56. 56. english.lproj ERB Goodness
  57. 57. main.js
  58. 58. main.js
  59. 59. main.js Timer awesomeness
  60. 60. What gets downloaded? javascript.js* stylesheet.css index.html images (sprite for bonus) All can be cached
  61. 61. SC generates these files on the fly in development mode Served by Merb
  62. 62. SC builds these files as static assets in production mode Served by Apache,Varnish, CDN, etc. Rails-style asset tags
  63. 63. Demo
  64. 64. Other Topics Learning curve The Uberfunction Should you use it? Build system Other frameworks
  65. 65. Join our team Upgrade your job Open Positions • Smart, fun people • Ruby on Rails Developer • Startup environment • Ruby on Rails Intern • Cutting edge tech • Competitive pay • Stock options We pay $1,000 for successful referrals!
  66. 66. Thank you! mike@otherinbox.com subelsky.com - ignitebaltimore.com @subelsky @ignitebaltimore

×