SproutCore and the Future of Web Apps

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 you!mike@otherinbox.com

subelsky.com - ignitebaltimore.com@subelsky @ignitebaltimore