1. SproutCore and
Performance

2. “
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

3. "Fast By
Default"

4. Core
Concepts

5. 1. JS is
cheaper
than DOM

6. 2. Keep
Intermediate
State in JS

7. (and out of
DOM)

8. 3. Events
Cannot
Coalesce

9. (prefer
cache
clearing)

10. 4. Materialize
Objects
When Used

11. (also, proxy,
don't copy)

12. 5. Follow
Speed
Guidelines

13. JS is
Cheaper
than DOM

14. change name change DOM
change title change DOM
change address change DOM

15. change name
change title change DOM
change address

16. change name
change title change DOM
change address

17. SC
run
loop
browser
event
loop

18. handle event
native sync
handle event
event bindings
handle event

19. handle event
native sync
handle event
event bindings
handle event

20. handle event
native sync
handle event
event bindings
handle event

21. Event Handling
JS Code
JS Code
JS Code
...
DOM Code

22. Keep
Intermediate
State in JS

23. Case Study

24. “ 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.

25. What do you want to do?
4 items remaining
Mark All Done
Wash dishes
Take out garbage
Make bed
Relax

26. What do you want to do?
4 items remaining
Mark All Done
✓ Wash dishes
Take out garbage
Make bed
Relax

27. What do you want to do?
3 items remaining
Mark All Done
✓ Wash dishes
Take out garbage
Make bed
Relax

28. What do you want to do?
3 items remaining
Mark All Done
✓ Wash dishes
Take out garbage
Make bed
Relax

29. What do you want to do?
3 items remaining
✓ Mark All Done
✓ Wash dishes
Take out garbage
Make bed
Relax

30. What do you want to do?
0 items remaining
✓ Mark All Done
✓ Wash dishes
✓ Take out garbage
✓ Make bed
✓ Relax

31. "KVO"

32. item marked done
re-render stats view

33. 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
}));
}
});

34. 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;

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

36. item marked done
compute remaining
xN
compute done
render stats view

37. This is
foundational

38. No notion of
intermediate
state

39. Prefer
Coalescing
Operations

40. SproutCore
ArrayController.create({
content: [],
remaining: function() {
return this.filterProperty('isDone', false);
}.property('@each.isDone')
});

41. Superficially
Similar

42. intermediate state
item marked done
xN
clear remaining cache
run loop
compute remaining
render stats view

43. Easy to
Overlook

44. SproutCore
ArrayController.create({
content: [],
remaining: function() {
return this.filterProperty('isDone', false);
}.property('@each.isDone')
});

45. Key:
Declare
Intent

46. "Coalesce"

47. Wrong

48. A B
"hello" "hello"

49. A B
"1" "1"

50. A B
"12" "12"

51. A B
"123" "123"

52. Right

53. A B
"hello" "hello"

54. A B
"1" "hello"

55. A B
"12" "hello"

56. A B
"123" "hello"

57. A B
run loop
"123" "hello"

58. A B
"123" "123"

59. Not 3
Deferred
Observers

60. Materialize
Objects
When Used

61. Large JSON Structure
{
contacts: [
{ name: "Yehuda", ... },
... x 10,000
]
}

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

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

64. Ajax Response
RecordArray
Data Store live Contacts
where
(JSON Hashes) company =
"GOOGLE"

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

66. No Need to
Copy
Properties

67. Again,
Foundational

68. One More
Thing

69. Page Speed

70. Build Tools

71. Packed Files

72. CDN:
Versioned
URLs

73. Expires
Header:
Same

74. Stylesheets
at the Top

75. Scripts at
the Bottom

76. Simple
Layout

77. External JS
and CSS

78. Minification

79. Easier said
than done

80. SproutCore
2.0

81. Matters, but not as much
as you think.
Overall
File Size

82. Modules w/
Declared
Deps

83. Lazy
Loading
Modules

84. Thank you.

85. Questions