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

{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;}]}}
}

sh
Fla
t
ip
S cr
va
Ja
CSS
L
HTM

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
metal’.”
- Charles Jolley

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_stylesheets] = :production
c[:include_fixtures] = :development

clients

Models

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'),

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'),

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

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 cached

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 tags

Demo

Other Topics
Learning curve
The Uberfunction
Should you use it?
Build system
Other frameworks

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!

Thank you!
mike@otherinbox.com
subelsky.com - ignitebaltimore.com
@subelsky @ignitebaltimore