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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sprout core and performance

1,284
views

Published on

Published in: Technology, Business

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

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