Your SlideShare is downloading. ×
  • Like
Sprout core and performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sprout core and performance

  • 1,275 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,275
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 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 ByDefault"
  • 4. CoreConcepts
  • 5. 1. JS is cheaperthan DOM
  • 6. 2. KeepIntermediate State in JS
  • 7. (and out of DOM)
  • 8. 3. Events CannotCoalesce
  • 9. (prefer cacheclearing)
  • 10. 4. Materialize Objects When Used
  • 11. (also, proxy, dont copy)
  • 12. 5. Follow SpeedGuidelines
  • 13. JS is Cheaperthan DOM
  • 14. change name change DOM change title change DOMchange address change DOM
  • 15. change name change title change DOMchange address
  • 16. change name change title change DOMchange address
  • 17. SC run loopbrowser event loop
  • 18. handle eventnative sync handle eventevent bindings handle event
  • 19. handle eventnative sync handle eventevent bindings handle event
  • 20. handle eventnative sync handle eventevent bindings handle event
  • 21. Event Handling JS Code JS Code JS Code ... DOM Code
  • 22. KeepIntermediate 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 donere-render stats view
  • 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. 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. TogglingTodos.forEach(function(todo) {  todo.toggle();});
  • 36. item marked donecompute remaining xN compute donerender stats view
  • 37. This isfoundational
  • 38. No notion ofintermediate state
  • 39. PreferCoalescingOperations
  • 40. SproutCoreArrayController.create({  content: [],  remaining: function() {    return this.filterProperty(isDone, false);  }.property(@each.isDone)});
  • 41. Superficially Similar
  • 42. intermediate state item marked done xNclear remaining cache run loop compute remaining render stats view
  • 43. Easy toOverlook
  • 44. SproutCoreArrayController.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 3DeferredObservers
  • 60. Materialize ObjectsWhen Used
  • 61. Large JSON Structure{  contacts: [    { name: "Yehuda", ... },    ... x 10,000  ]}
  • 62. Acre, JulieAppleseed, JohnnyArrow, BobAstels, DavidAtwood, MichaelAxelrod, PeterAzeroth, 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 CopyProperties
  • 67. Again,Foundational
  • 68. One More Thing
  • 69. Page Speed
  • 70. Build Tools
  • 71. Packed Files
  • 72. CDN:Versioned URLs
  • 73. ExpiresHeader: Same
  • 74. Stylesheets at the Top
  • 75. Scripts atthe Bottom
  • 76. SimpleLayout
  • 77. External JS and CSS
  • 78. Minification
  • 79. Easier saidthan done
  • 80. SproutCore 2.0
  • 81. Matters, but not as muchas you think. Overall File Size
  • 82. Modules w/ Declared Deps
  • 83. LazyLoadingModules
  • 84. Thank you.
  • 85. Questions