SproutCore is Awesome - HTML5 Summer DevFest

“ 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

Flow 800k
156k
637k
498k

App code can only
be bug-fixed by
your team

Framework code is
bug-fixed by everyone

App

Framework

App

App

1. Make SproutCore
easier to pick up for
new developers

2. Improve load time on
mobile devices

3. Enable web-style
applications

1. Bindings
2. Computed properties
3. 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 View
firstName <h1>
{{name}}
lastName </h1>

binding
fullName name
computed
property

Model Controller View
title remaining remaining
“Remember
the milk” 1 “1 item left”

isDone
false

title
“Go to
Vancouver”

isDone
true

1. Modular
2. Easy to unit test
3. Think about state,
not events

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'),
});

SproutCore Meetup

July 26th, 6-8pm
Appnovation

Questions?
Tom Dale
@tomdale
tom@strobecorp.com

SproutCore is Awesome - HTML5 Summer DevFest

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to SproutCore is Awesome - HTML5 Summer DevFest

Similar to SproutCore is Awesome - HTML5 Summer DevFest (20)

Recently uploaded

Recently uploaded (20)

SproutCore is Awesome - HTML5 Summer DevFest

Editor's Notes