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

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.ﬁlterProperty(isDone, false).get(length); }.property(@each.isDone),});

Starter Kit

Roadmap

SproutCore Meetup July 26th, 6-8pm Appnovation

Questions? Tom Dale @tomdaletom@strobecorp.com

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

SproutCore is Awesome - HTML5 Summer DevFest

by tomdale

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 64

Statistics

SproutCore is Awesome - HTML5 Summer DevFest Presentation Transcript