2.0
3F
2.0
Future of Web Apps
  Fast, fluid, and feature-rich
Future of Web Apps
    Less web, more app
Future of Web Apps
   Probably client-server
Future of Web Apps
   Web-native, no plugins
Future of Web Apps
     Open source
Building 3F Apps
with SproutCore
       Mike Subelsky
      OtherInbox.com
    IgniteBaltimore.com
Use SproutCore to build web clients
     that feel like desktop apps
Use whatever you want
  to build the server
Not a competitor or replacement
   of jQuery, Prototype, etc.
Not a competitor or
      replacement
of jQuery, Prototype, etc.
Why client-server?
Users Want More
Impossible with
“traditional” web 2.0
     techniques
remove_messages: function(message_ids,block) {

  OtherInbox.undo_stack.push(new UndoAction(message_ids,Mailbox.current_id...
3F Means You Need
   Client-Server
OI.executeAjax('/refresh', {
  method: 'get',
  parameters: parameters,
  onSuccess: function(transport) {
    OI._parseRe...
class RefreshController < ApplicationController

  before_filter :signin_required

  def index
    render :text => JSON.ge...
{quot;recordTypesquot;:[quot;Mailboxquot;,quot;Userquot;,quot;Folderquot;],
quot;deletedquot;:{},
quot;flashquot;:[],
quot...
sh
Fla




               t
             ip
       S   cr
    va
  Ja
           CSS
                     L
              ...
3F Means You Need
  To Think Like a
Desktop Developer
Kill me now
“...writing an app in
Javascript on the web is
akin to writing C on the
desktop: it is just one
level above the 'bare
meta...
SproutCore does 80%
      (just like Rails)
Feels a bit like Rails
Feels a bit like Rails
   Convention over configuration
Feels a bit like Rails
     Configuring components
Feels a bit like Rails
  Uses Ruby helpers and ERB or Haml
Except totally
  different
Except totally
  different
   Inspired by Cocoa
Except totally
        different
More functionally-oriented (little or no state)
Except totally
  different
  Everything is a binding
Except totally
  different
            Trust but verify
if (foo && foo.get(‘importantValue’))
Except totally
  different
 By all means, repeat yourself
Except totally
  different
   JavaScript is awesome
 (just avoid the bad parts)
Except totally
  different
    MVC !== MVC
What does it look like?
sc-config
clients
sc-config
c[:build_mode] = :production
c[:minify_javascript] = :production
c[:combine_javascript] = :production
c[:combine_...
clients
Models
Models
require('core');
require('models/record');

OI.Mailbox = OI.Record.extend({
  dataSource: SC.Store,
  _messages: nu...
Models                        Build commands

require('core');
require('models/record');

OI.Mailbox = OI.Record.extend({
...
Models                        Build commands

require('core');
require('models/record');

OI.Mailbox = OI.Record.extend({
...
Controllers
Controllers
Controllers




Observer
Views
Views
Tests


SproutCore has good built-in testing
Tests
Tests
english.lproj
english.lproj
english.lproj




ERB Goodness
main.js
main.js
main.js




    Timer awesomeness
What gets downloaded?
javascript.js*
stylesheet.css
index.html
images (sprite for bonus)




               All can be cac...
SC generates these files on the fly
in development mode

        Served by Merb
SC builds these files as static
   assets in production mode

Served by Apache,Varnish, CDN, etc.
       Rails-style asset ...
Demo
Other Topics

 Learning curve
                     The Uberfunction
Should you use it?
                       Build system...
Join our team
Upgrade your job            Open Positions
•   Smart, fun people       •   Ruby on Rails Developer
•   Start...
Thank you!
      mike@otherinbox.com

subelsky.com - ignitebaltimore.com
   @subelsky @ignitebaltimore
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
Upcoming SlideShare
Loading in …5
×

SproutCore and the Future of Web Apps

3,349 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,349
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

×