Sprout core and performance

2,047 views

Published on

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

No Downloads
Views
Total views
2,047
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
31
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
  • 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

    ×