�ݺ�ߣ

SproutCore and
Performance

Wednesday, June 29, 2011

�� 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


"Fast By
Default"

Core
Concepts

1. JS is
cheaper
than DOM

2. Keep
Intermediate
State in JS

(and out of
DOM)

3. Events
Cannot
Coalesce

(prefer
cache
clearing)

4. Materialize
Objects
When Used

(also, proxy,
don't copy)

5. Follow
Speed
Guidelines

JS is
Cheaper
than DOM

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

Case Study


��
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


"KVO"


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.filter(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


This is
foundational

No notion of
intermediate
state

Prefer
Coalescing
Operations

SproutCore

ArrayController.create({
??content: [],

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


Super?cially
Similar

intermediate state
item marked done
xN
clear remaining cache

run loop

compute remaining

render stats view


Easy to
Overlook

Key:
Declare
Intent

"Coalesce"


Wrong


A B

"hello" "hello"


A B

"1" "1"


A B

"12" "12"


A B

"123" "123"


Right


A B

"1" "hello"


A B

"12" "hello"


A B

"123" "hello"


A B
run loop
"123" "hello"


Not 3
Deferred
Observers

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"
}


No Need to
Copy
Properties

Again,
Foundational

One More
Thing

Page Speed


Build Tools


Packed Files


CDN:
Versioned
URLs

Expires
Header:
Same

Stylesheets
at the Top

Scripts at
the Bottom

Simple
Layout

External JS
and CSS

Mini?cation


Easier said
than done

SproutCore
2.0

Matters, but not as much
as you think.

Overall
File Size

Modules w/
Declared
Deps

Lazy
Loading
Modules

Thank you.


Questions


�ݺ�ߣ

Writing Fast Client-Side Code: Lessons Learned from SproutCore

More Related Content

Writing Fast Client-Side Code: Lessons Learned from SproutCore