Sprout core and performance
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sprout core and performance

on

  • 1,542 views

 

Statistics

Views

Total Views
1,542
Views on SlideShare
1,541
Embed Views
1

Actions

Likes
4
Downloads
29
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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 Presentation 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