3F
2.0

Future of Web Apps
Fast,

Future of Web Apps
Fluid,

Future of Web Apps
and Feature-rich.

Future of Web Apps
Less web, more app

Future of Web Apps
More demanding users

Future of Web Apps
Web-native, no plugins

Future of Web Apps
Probably client-server

Building 3F Apps
with SproutCore
Mike Subelsky
OtherInbox.com
IgniteBaltimore.com

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)

You Need
Client-Server

OI.executeAjax('/refresh', {
method: 'get',
parameters: parameters,
onSuccess: function(transport) {
OI._parseServerUpdate( transport );
}
});

class RefreshController < ApplicationController
before_filter :signin_required
def index
render :text => JSON.generate(Refresher.new(params).to_hash)
end
end

{\"deleted\":{},\"flash\":[],\"recordTypes\":[\"Mailbox\",\"User\",\"Folder\"],
\"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\"}]}}}

sh
Fla
t
ip
S cr
va
Ja
CSS
L
HTM

removeMessages: function(msgs) {
SC.Store.destroyRecords();
}

“...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%

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 ERB or Haml

Except totally
different

Except totally
different
Inspired by Cocoa

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

Demo