Sprout core and performance

“
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

2. Keep
Intermediate
State in JS

4. Materialize
Objects
When Used

change name change DOM

change title change DOM

change address change DOM

change name

change title change DOM

change address

SC
run
loop

browser
event
loop

handle event
native sync
handle event
event bindings
handle event

Event Handling

JS Code

JS Code

JS Code

...

DOM Code

Keep
Intermediate
State in JS

“ I want to have a view that
displays the total number of
items that are marked done.

I want to have a feature that
can mark all remaining items
done.

What do you want to do?
4 items remaining

Mark All Done

Wash dishes
Take out garbage
Make bed
Relax

4 items remaining

Mark All Done

✓ Wash dishes
Take out garbage
Make bed
Relax

3 items remaining

Mark All Done

✓ Wash dishes
Take out garbage
Make bed
Relax

3 items remaining

✓ Mark All Done

✓ Wash dishes
Take out garbage
Make bed
Relax

0 items remaining

✓ Mark All Done

✓ Wash dishes
✓ Take out garbage
✓ Make bed
✓ Relax

item marked done

re-render stats view

Backbone
window.AppView = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'addOne', 'addAll', 'render');
    this.input    = this.$("#new-todo");
    Todos.bind('add',     this.addOne);
    Todos.bind('refresh', this.addAll);
    Todos.bind('all',     this.render);
    Todos.fetch();
  },

  render: function() {
    var done = Todos.done().length;
    this.$('#todo-stats').html(this.statsTemplate({
      total:      Todos.length,
      done:       Todos.done().length,
      remaining: Todos.remaining().length
    }));
  }
});

Backbone

window.TodoList = Backbone.Collection.extend({
  done: function() {
    return this.ﬁlter(function(todo){
      return todo.get('done');
    });
  },

  remaining: function() {
    return this.without.apply(this, this.done());
  }
});

window.Todos = new TodoList;

Toggling

Todos.forEach(function(todo) {
todo.toggle();
});

item marked done

compute remaining
xN
compute done

render stats view

No notion of
intermediate
state

SproutCore

ArrayController.create({
  content: [],

  remaining: function() {
    return this.ﬁlterProperty('isDone', false);
  }.property('@each.isDone')
});

intermediate state
item marked done
xN
clear remaining cache

run loop

compute remaining

render stats view

A B

"hello" "hello"

A B
run loop
"123" "hello"

Materialize
Objects
When Used

Large JSON Structure

{
  contacts: [
    { name: "Yehuda", ... },
    ... x 10,000
  ]
}

Acre, Julie
Appleseed, Johnny
Arrow, Bob
Astels, David
Atwood, Michael
Axelrod, Peter
Azeroth, Roy

Contact
Data Store on demand name
title
(JSON Hashes) address
telephone

Ajax Response

RecordArray

Data Store live Contacts
where
(JSON Hashes) company =
"GOOGLE"

{
Contact name: "yehuda"
title: "Chief Technologist"
data address: "690 Spruce"
status telephone: "718.877.1325"
}

Matters, but not as much
as you think.

Overall
File Size

Sprout core and performance

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Sprout core and performance (20)

More from Yehuda Katz (10)

Recently uploaded (20)

Sprout core and performance

Editor's Notes