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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sprout core and performance

1,319

Published on

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

No Downloads
Views
Total Views
1,319
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
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

    ×