sproutcore and the future of web apps
DESCRIPTION
Mike Subelsky of OtherInbox.com discusses the SproutCore JavaScript framework for building desktop web applications that run inside the browser.TRANSCRIPT
2.0
2.03F
Future of Web AppsFast, fluid, and feature-rich
Future of Web AppsLess web, more app
Future of Web AppsProbably client-server
Future of Web AppsWeb-native, no plugins
Future of Web AppsOpen source
Building 3F Apps with SproutCore
Mike SubelskyOtherInbox.com
IgniteBaltimore.com
Use SproutCore to build web clientsthat feel like desktop apps
Use whatever you want to build the server
Not a competitor or replacementof 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,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)
3F Means You Need Client-Server
OI.executeAjax('/refresh', { method: 'get', parameters: parameters, onSuccess: function(transport) { OI._parseRefresh(transport);
}});
removeMessages: function(msgs) { SC.Store.destroyRecords(msgs);};
class RefreshController < ApplicationController before_filter :signin_required
def index render :text => JSON.generate(Refresher.new(params).to_hash) end
end
{"recordTypes":["Mailbox","User","Folder"],"deleted":{},"flash":[],"changed":{"User":[{"name":"forfun","preferences":null,"guid":3,"type":"User","admin":true,"invitationsRemaining":1,"login":"testuser","state":"completed"}],
"created":{"Mailbox" [{"name":"Freeslide","unreadCount":null,"guid":"12","folder":"3","priority":"2","type": "Mailbox"}]}}}
HTM
L
CSSJavaScript
Flash
3F Means You Need To Think Like a
Desktop Developer
Kill me now
- Charles Jolley
“...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’.”
SproutCore does 80%(just like Rails)
Feels a bit like Rails
Feels a bit like RailsConvention over configuration
Feels a bit like RailsConfiguring components
Feels a bit like RailsUses 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 verifyif (foo && foo.get(‘importantValue’))
Except totally different
By all means, repeat yourself
Except totally differentJavaScript is awesome
(just avoid the bad parts)
Except totally different
MVC !== MVC
What does it look like?
sc-configclients
sc-config c[:build_mode] = :production c[:minify_javascript] = :production c[:combine_javascript] = :production c[:combine_stylesheets] = :production c[:include_fixtures] = :development
clients
Models
Modelsrequire('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'),
Modelsrequire('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'),
Build commands
Modelsrequire('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'),
Build commands
Computed property
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.cssindex.htmlimages (sprite for bonus)
All can be cached
SC generates these files on the flyin development mode
Served by Merb
SC builds these files as staticassets in production mode
Served by Apache, Varnish, CDN, etc.
Rails-style asset tags
Demo
Other Topics
Learning curve
Should you use it?
Other frameworks
The Uberfunction
Build system
Join our team
• Ruby on Rails Developer• Ruby on Rails Intern
Open Positions• Smart, fun people• Startup environment• Cutting edge tech• Competitive pay• Stock options
Upgrade your job
We pay $1,000 for successful referrals!
Thank [email protected]
subelsky.com - ignitebaltimore.com@subelsky @ignitebaltimore