SproutCore and Performance
“    One should not pursue goals    that are easily achieved. One    must develop an instinct for    what one can just bar...
"Fast ByDefault"
CoreConcepts
1. JS is cheaperthan DOM
2. KeepIntermediate State in JS
(and out of   DOM)
3. Events CannotCoalesce
(prefer cacheclearing)
4. Materialize   Objects When Used
(also, proxy, dont copy)
5. Follow SpeedGuidelines
JS is Cheaperthan DOM
change name     change DOM change title    change DOMchange address   change DOM
change name change title    change DOMchange address
change name change title    change DOMchange address
SC           run          loopbrowser event  loop
handle eventnative                    sync         handle eventevent                   bindings         handle event
handle eventnative                    sync         handle eventevent                   bindings         handle event
handle eventnative                    sync         handle eventevent                   bindings         handle event
Event Handling    JS Code    JS Code    JS Code       ...    DOM Code
KeepIntermediate 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 ...
What do you want to do?4 items remaining      Mark All Done      Wash dishes      Take out garbage      Make bed      Relax
What do you want to do?4 items remaining      Mark All Done✓ Wash dishes      Take out garbage      Make bed      Relax
What do you want to do?3 items remaining      Mark All Done✓ Wash dishes      Take out garbage      Make bed      Relax
What do you want to do?3 items remaining      Mark All Done✓ Wash dishes      Take out garbage      Make bed      Relax
What do you want to do?3 items remaining✓     Mark All Done✓ Wash dishes      Take out garbage      Make bed      Relax
What do you want to do?0 items remaining✓     Mark All Done✓ Wash dishes✓ Take out garbage✓ Make bed✓ Relax
"KVO"
item marked donere-render stats view
Backbonewindow.AppView = Backbone.View.extend({  initialize: function() {    _.bindAll(this, addOne, addAll, render);    t...
Backbonewindow.TodoList = Backbone.Collection.extend({  done: function() {    return this.filter(function(todo){      retur...
TogglingTodos.forEach(function(todo) {  todo.toggle();});
item marked donecompute remaining                    xN  compute donerender stats view
This isfoundational
No notion ofintermediate    state
PreferCoalescingOperations
SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }....
Superficially  Similar
intermediate state item marked done                        xNclear remaining cache           run loop compute remaining  r...
Easy toOverlook
SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }....
Key:Declare Intent
"Coalesce"
Wrong
A         B"hello"   "hello"
A     B"1"   "1"
A      B"12"   "12"
A       B"123"   "123"
Right
A         B"hello"   "hello"
A       B"1"   "hello"
A       B"12"   "hello"
A        B"123"   "hello"
A                   B        run loop"123"              "hello"
A       B"123"   "123"
Not 3DeferredObservers
Materialize ObjectsWhen Used
Large JSON Structure{  contacts: [    { name: "Yehuda", ... },    ... x 10,000  ]}
Acre, JulieAppleseed, JohnnyArrow, BobAstels, DavidAtwood, MichaelAxelrod, PeterAzeroth, Roy
Contact Data Store     on demand   name                            title(JSON Hashes)               address               ...
Ajax Response                       RecordArray Data Store     live    Contacts                       where(JSON Hashes)  ...
{  Contact       name: "yehuda"                title: "Chief Technologist"data            address: "690 Spruce"status     ...
No Need to  CopyProperties
Again,Foundational
One More Thing
Page Speed
Build Tools
Packed Files
CDN:Versioned  URLs
ExpiresHeader: Same
Stylesheets at the Top
Scripts atthe Bottom
SimpleLayout
External JS and CSS
Minification
Easier saidthan done
SproutCore    2.0
Matters, but not as muchas you think.               Overall              File Size
Modules w/ Declared  Deps
LazyLoadingModules
Thank you.
Questions
Upcoming SlideShare
Loading in...5
×

Sprout core and performance

1,364

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,364
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Sprout core and performance"

    1. 1. SproutCore and Performance
    2. 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. 3. "Fast ByDefault"
    4. 4. CoreConcepts
    5. 5. 1. JS is cheaperthan DOM
    6. 6. 2. KeepIntermediate State in JS
    7. 7. (and out of DOM)
    8. 8. 3. Events CannotCoalesce
    9. 9. (prefer cacheclearing)
    10. 10. 4. Materialize Objects When Used
    11. 11. (also, proxy, dont copy)
    12. 12. 5. Follow SpeedGuidelines
    13. 13. JS is Cheaperthan DOM
    14. 14. change name change DOM change title change DOMchange address change DOM
    15. 15. change name change title change DOMchange address
    16. 16. change name change title change DOMchange address
    17. 17. SC run loopbrowser event loop
    18. 18. handle eventnative sync handle eventevent bindings handle event
    19. 19. handle eventnative sync handle eventevent bindings handle event
    20. 20. handle eventnative sync handle eventevent bindings handle event
    21. 21. Event Handling JS Code JS Code JS Code ... DOM Code
    22. 22. KeepIntermediate State in JS
    23. 23. Case Study
    24. 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. 25. What do you want to do?4 items remaining Mark All Done Wash dishes Take out garbage Make bed Relax
    26. 26. What do you want to do?4 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
    27. 27. What do you want to do?3 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
    28. 28. What do you want to do?3 items remaining Mark All Done✓ Wash dishes Take out garbage Make bed Relax
    29. 29. What do you want to do?3 items remaining✓ Mark All Done✓ Wash dishes Take out garbage Make bed Relax
    30. 30. What do you want to do?0 items remaining✓ Mark All Done✓ Wash dishes✓ Take out garbage✓ Make bed✓ Relax
    31. 31. "KVO"
    32. 32. item marked donere-render stats view
    33. 33. Backbonewindow.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. 34. Backbonewindow.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. 35. TogglingTodos.forEach(function(todo) {  todo.toggle();});
    36. 36. item marked donecompute remaining xN compute donerender stats view
    37. 37. This isfoundational
    38. 38. No notion ofintermediate state
    39. 39. PreferCoalescingOperations
    40. 40. SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }.property(@each.isDone)});
    41. 41. Superficially Similar
    42. 42. intermediate state item marked done xNclear remaining cache run loop compute remaining render stats view
    43. 43. Easy toOverlook
    44. 44. SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }.property(@each.isDone)});
    45. 45. Key:Declare Intent
    46. 46. "Coalesce"
    47. 47. Wrong
    48. 48. A B"hello" "hello"
    49. 49. A B"1" "1"
    50. 50. A B"12" "12"
    51. 51. A B"123" "123"
    52. 52. Right
    53. 53. A B"hello" "hello"
    54. 54. A B"1" "hello"
    55. 55. A B"12" "hello"
    56. 56. A B"123" "hello"
    57. 57. A B run loop"123" "hello"
    58. 58. A B"123" "123"
    59. 59. Not 3DeferredObservers
    60. 60. Materialize ObjectsWhen Used
    61. 61. Large JSON Structure{  contacts: [    { name: "Yehuda", ... },    ... x 10,000  ]}
    62. 62. Acre, JulieAppleseed, JohnnyArrow, BobAstels, DavidAtwood, MichaelAxelrod, PeterAzeroth, Roy
    63. 63. Contact Data Store on demand name title(JSON Hashes) address telephone
    64. 64. Ajax Response RecordArray Data Store live Contacts where(JSON Hashes) company = "GOOGLE"
    65. 65. { Contact name: "yehuda" title: "Chief Technologist"data address: "690 Spruce"status telephone: "718.877.1325" }
    66. 66. No Need to CopyProperties
    67. 67. Again,Foundational
    68. 68. One More Thing
    69. 69. Page Speed
    70. 70. Build Tools
    71. 71. Packed Files
    72. 72. CDN:Versioned URLs
    73. 73. ExpiresHeader: Same
    74. 74. Stylesheets at the Top
    75. 75. Scripts atthe Bottom
    76. 76. SimpleLayout
    77. 77. External JS and CSS
    78. 78. Minification
    79. 79. Easier saidthan done
    80. 80. SproutCore 2.0
    81. 81. Matters, but not as muchas you think. Overall File Size
    82. 82. Modules w/ Declared Deps
    83. 83. LazyLoadingModules
    84. 84. Thank you.
    85. 85. Questions
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×