SproutCore and the Future of Web Apps

100 %
0 %
Information about SproutCore and the Future of Web Apps
Technology

Published on December 24, 2008

Author: subelsky

Source: slideshare.net

Description

Mike Subelsky of OtherInbox.com discusses the SproutCore JavaScript framework for building desktop web applications that run inside the browser.

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

Add a comment

Related presentations

Related pages

SproutCore

... desktop caliber web applications. About; ... innovative user experiences on the web. Install Sproutcore; ... SproutCore apps give you a native ...
Read more

SproutCore and the Future of Web Apps - Technology

The Future of Selenium Testing for Mobile Web and Native Apps
Read more

Client-Server Computing: The Future Web? - infoq.com

The kinds of apps SproutCore makes possible are so dynamic ... develop the .Mac Web Gallery using SproutCore. What do you think the future web will ...
Read more

SproutCore and the Future of Web Apps - Technology

8. Building 3F Apps with SproutCoreMike Subelsky OtherInbox.com IgniteBaltimore.com 9. Use SproutCore to build web clientsthat feel like desktop apps 10 ...
Read more

Will SproutCore Define The Future Of Web Apps? - YouTube

Daniel Eran Dilger of Roughly Dafted.com explains how SproutCore could lead to a new breed of web apps that make money through subscription or ...
Read more

Building Next Generation Web Apps with Rails and SproutCore

Future web apps will be faster, more fluid, and more feature-rich. They’ll be more like desktop apps, and will need to be built in a way that gives them ...
Read more

Mike Subelsky: SproutCore and the Future of Web Apps

I'm a Baltimore-based web developer and entrepreneur. I'm the co-founder of STAQ, OtherInbox, Baltimore Improv Group, and Ignite Baltimore. I blog about ...
Read more

Apple’s ‘SproutCore’ Tools May Help Web Apps Grow Up

Apple’s ‘SproutCore’ Tools May Help Web Apps Grow Up. ... Apple seems to recognize that the future seems less about what operating system you use ...
Read more