• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SproutCore and the Future of Web Apps
 

SproutCore and the Future of Web Apps

on

  • 4,841 views

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

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

Statistics

Views

Total Views
4,841
Views on SlideShare
4,825
Embed Views
16

Actions

Likes
2
Downloads
59
Comments
0

3 Embeds 16

http://www.slideshare.net 12
http://www.techgig.com 3
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SproutCore and the Future of Web Apps SproutCore and the Future of Web Apps Presentation Transcript

    • 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