The SproutCore framework has evolved over the past five years to be an extremely high-performance framework that focuses on making it possible to build native-like applications in the browser. This means handling problems like working with extremely large data-sets, inconsistent connectivity, and complex DOMs. Lately, it has meant figuring out how to properly use new browser features that can make a big difference to perceived performance, like hardware acceleration. In this talk, Yehuda will cover some of the techniques that SproutCore has used historically to enable extremely complex applications to perform well in the browser, as well as what new technologies the team is looking at to leverage the latest browser technologies in building compelling content for the web.

1. SproutCore and
Performance
Wednesday, June 29, 2011

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
Wednesday, June 29, 2011

3. "Fast By
Default"
Wednesday, June 29, 2011

4. Core
Concepts
Wednesday, June 29, 2011

5. 1. JS is
cheaper
than DOM
Wednesday, June 29, 2011

6. 2. Keep
Intermediate
State in JS
Wednesday, June 29, 2011

7. (and out of
DOM)
Wednesday, June 29, 2011

8. 3. Events
Cannot
Coalesce
Wednesday, June 29, 2011

9. (prefer
cache
clearing)
Wednesday, June 29, 2011

10. 4. Materialize
Objects
When Used
Wednesday, June 29, 2011

11. (also, proxy,
don't copy)
Wednesday, June 29, 2011

12. 5. Follow
Speed
Guidelines
Wednesday, June 29, 2011

13. JS is
Cheaper
than DOM
Wednesday, June 29, 2011

14. change name change DOM
change title change DOM
change address change DOM
Wednesday, June 29, 2011

15. change name
change title change DOM
change address
Wednesday, June 29, 2011

16. change name
change title change DOM
change address
Wednesday, June 29, 2011

17. SC
run
loop
browser
event
loop
Wednesday, June 29, 2011

18. handle event
native sync
handle event
event bindings
handle event
Wednesday, June 29, 2011

19. handle event
native sync
handle event
event bindings
handle event
Wednesday, June 29, 2011

20. handle event
native sync
handle event
event bindings
handle event
Wednesday, June 29, 2011

21. Event Handling
JS Code
JS Code
JS Code
...
DOM Code
Wednesday, June 29, 2011

22. Keep
Intermediate
State in JS
Wednesday, June 29, 2011

23. Case Study
Wednesday, June 29, 2011

24. “
Wednesday, June 29, 2011
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
Wednesday, June 29, 2011

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

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

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

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

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

31. "KVO"
Wednesday, June 29, 2011

32. item marked done
re-render stats view
Wednesday, June 29, 2011

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
}));
}
});
Wednesday, June 29, 2011

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;
Wednesday, June 29, 2011

35. Toggling
Todos.forEach(function(todo) {
todo.toggle();
});
Wednesday, June 29, 2011

36. item marked done
compute remaining
xN
compute done
render stats view
Wednesday, June 29, 2011

37. This is
foundational
Wednesday, June 29, 2011

38. No notion of
intermediate
state
Wednesday, June 29, 2011

39. Prefer
Coalescing
Operations
Wednesday, June 29, 2011

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

41. Superficially
Similar
Wednesday, June 29, 2011

42. intermediate state
item marked done
xN
clear remaining cache
run loop
compute remaining
render stats view
Wednesday, June 29, 2011

43. Easy to
Overlook
Wednesday, June 29, 2011

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

45. Key:
Declare
Intent
Wednesday, June 29, 2011

46. "Coalesce"
Wednesday, June 29, 2011

47. Wrong
Wednesday, June 29, 2011

48. A B
"hello" "hello"
Wednesday, June 29, 2011

49. A B
"1" "1"
Wednesday, June 29, 2011

50. A B
"12" "12"
Wednesday, June 29, 2011

51. A B
"123" "123"
Wednesday, June 29, 2011

52. Right
Wednesday, June 29, 2011

53. A B
"hello" "hello"
Wednesday, June 29, 2011

54. A B
"1" "hello"
Wednesday, June 29, 2011

55. A B
"12" "hello"
Wednesday, June 29, 2011

56. A B
"123" "hello"
Wednesday, June 29, 2011

57. A B
run loop
"123" "hello"
Wednesday, June 29, 2011

58. A B
"123" "123"
Wednesday, June 29, 2011

59. Not 3
Deferred
Observers
Wednesday, June 29, 2011

60. Materialize
Objects
When Used
Wednesday, June 29, 2011

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

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

63. Contact
Data Store on demand name
title
(JSON Hashes) address
telephone
Wednesday, June 29, 2011

64. Ajax Response
RecordArray
Data Store live
Contacts
where
(JSON Hashes) company =
"GOOGLE"
Wednesday, June 29, 2011

65. {
Contact name: "yehuda"
title: "Chief Technologist"
data address: "690 Spruce"
status telephone: "718.877.1325"
}
Wednesday, June 29, 2011

66. No Need to
Copy
Properties
Wednesday, June 29, 2011

67. Again,
Foundational
Wednesday, June 29, 2011

68. One More
Thing
Wednesday, June 29, 2011

69. Page Speed
Wednesday, June 29, 2011

70. Build Tools
Wednesday, June 29, 2011

71. Packed Files
Wednesday, June 29, 2011

72. CDN:
Versioned
URLs
Wednesday, June 29, 2011

73. Expires
Header:
Same
Wednesday, June 29, 2011

74. Stylesheets
at the Top
Wednesday, June 29, 2011

75. Scripts at
the Bottom
Wednesday, June 29, 2011

76. Simple
Layout
Wednesday, June 29, 2011

77. External JS
and CSS
Wednesday, June 29, 2011

78. Minification
Wednesday, June 29, 2011

79. Easier said
than done
Wednesday, June 29, 2011

80. SproutCore
2.0
Wednesday, June 29, 2011

81. Matters, but not as much
as you think.
Overall
File Size
Wednesday, June 29, 2011

82. Modules w/
Declared
Deps
Wednesday, June 29, 2011

83. Lazy
Loading
Modules
Wednesday, June 29, 2011

84. Thank you.
Wednesday, June 29, 2011

85. Questions
Wednesday, June 29, 2011