• Save
SproutCore is Awesome - HTML5 Summer DevFest
Upcoming SlideShare
Loading in...5
×
 

SproutCore is Awesome - HTML5 Summer DevFest

on

  • 2,425 views

In this talk, I described the current JavaScript framework landscape, and why you should consider trying SproutCore for your next web project.

In this talk, I described the current JavaScript framework landscape, and why you should consider trying SproutCore for your next web project.

Statistics

Views

Total Views
2,425
Views on SlideShare
2,347
Embed Views
78

Actions

Likes
4
Downloads
0
Comments
0

4 Embeds 78

http://lanyrd.com 70
http://francescoagati.posterous.com 6
http://posterous.com 1
http://www.techgig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

SproutCore is Awesome - HTML5 Summer DevFest SproutCore is Awesome - HTML5 Summer DevFest Presentation Transcript

  • SproutCore is Awesome
  • “ One should not pursue goals that are easily achieved. One must develop an instinct for what one can just barely achieve through one’s greatest efforts. Albert Einstein
  • SproutCore 1.0
  • Monolithic
  • ~177kmin+gzip
  • Backbone.js
  • 11k+dependencies
  • Flow 800k 156k 637k 498k
  • Do the Math
  • App code can only be bug-fixed by your team
  • Framework code isbug-fixed by everyone
  • App Framework AppApp
  • Goals
  • 1. Make SproutCore easier to pick up for new developers
  • 2. Improve load time on mobile devices
  • 3. Enable web-style applications
  • SproutCore 2.0
  • SproutCore Rebuilt
  • LeanerMore Modular
  • Single JS File29K gzip+min
  • WhySproutCore?
  • 1. Bindings2. Computed properties3. Magic templates
  • “ Wrote a Sproutcore 2 app without property/observes (it looked like a backbone app), then refactored with them: 392 LOC to 78 LOC. Trek Glowacki
  • Model ViewfirstName <h1> {{name}}lastName </h1> bindingfullName namecomputedproperty
  • Model Controller Viewtitle remaining remaining“Rememberthe milk” 1 “1 item left”isDone falsetitle“Go toVancouver”isDone true
  • 1. Modular2. Easy to unit test3. Think about state, not events
  • annotated-todos.strobeapp.com
  • Todos = SC.Application.create();
  • Todos = SC.Application.create({  rootElement: body > #sidebar});
  • <body id="todos">  <h1>Todos</h1>  <script type="text/html">    {{#view Todos.StatsView id="stats"}}      {{#view SC.Button              target="Todos.controller"              action="clearTodos"      }}          Clear Completed Todos      {{/view}}      {{remainingString}} remaining.    {{/view}}  </script></body>
  • Todos.StatsView = SC.View.extend({  remainingBinding: Todos.todosController.remaining,  remainingString: function() {    var remaining = this.get(remaining);    return remaining + (remaining === 1 ? " item" : " items");  }.property(remaining).cacheable()});
  • Todos.CreateTodoView = SC.TextField.extend({  insertNewline: function() {    var value = this.get(value);     if (value) {      Todos.todosController.createTodo(value);      this.set(value, );    }  }});
  • Todos.todoListController = SC.ArrayProxy.create({  createTodo: function(title) {    var todo = Todos.Todo.create({      title: title    });    this.pushObject(todo);  },   remaining: function() {    return this.filterProperty(isDone, false).get(length);  }.property(@each.isDone),});
  • Starter Kit
  • Roadmap
  • SproutCore Meetup July 26th, 6-8pm Appnovation
  • Questions? Tom Dale @tomdaletom@strobecorp.com