Writing Fast Client-Side Code: Lessons Learned from SproutCore
•
0 likes•1,794 views
The SproutCore framework has evolved over the past five years to be an extremely high-performance framework that focuses on making it possible to build native-like applications in the browser. This means handling problems like working with extremely large data-sets, inconsistent connectivity, and complex DOMs. Lately, it has meant figuring out how to properly use new browser features that can make a big difference to perceived performance, like hardware acceleration. In this talk, Yehuda will cover some of the techniques that SproutCore has used historically to enable extremely complex applications to perform well in the browser, as well as what new technologies the team is looking at to leverage the latest browser technologies in building compelling content for the web.
More Related Content
Similar to Writing Fast Client-Side Code: Lessons Learned from SproutCore
Similar to Writing Fast Client-Side Code: Lessons Learned from SproutCore (7)
More from Yehuda Katz
Recently uploaded
Recently uploaded (20)
Writing Fast Client-Side Code: Lessons Learned from SproutCore
- 1. SproutCore and Performance Wednesday, June 29, 2011
- 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 Wednesday, June 29, 2011
- 3. "Fast By Default" Wednesday, June 29, 2011
- 4. Core Concepts Wednesday, June 29, 2011
- 5. 1. JS is cheaper than DOM Wednesday, June 29, 2011
- 6. 2. Keep Intermediate State in JS Wednesday, June 29, 2011
- 7. (and out of DOM) Wednesday, June 29, 2011
- 8. 3. Events Cannot Coalesce Wednesday, June 29, 2011
- 9. (prefer cache clearing) Wednesday, June 29, 2011
- 10. 4. Materialize Objects When Used Wednesday, June 29, 2011
- 11. (also, proxy, don't copy) Wednesday, June 29, 2011
- 12. 5. Follow Speed Guidelines Wednesday, June 29, 2011
- 13. JS is Cheaper than DOM Wednesday, June 29, 2011
- 14. change name change DOM change title change DOM change address change DOM Wednesday, June 29, 2011
- 15. change name change title change DOM change address Wednesday, June 29, 2011
- 16. change name change title change DOM change address Wednesday, June 29, 2011
- 17. SC run loop browser event loop Wednesday, June 29, 2011
- 18. handle event native sync handle event event bindings handle event Wednesday, June 29, 2011
- 19. handle event native sync handle event event bindings handle event Wednesday, June 29, 2011
- 20. handle event native sync handle event event bindings handle event Wednesday, June 29, 2011
- 21. Event Handling JS Code JS Code JS Code ... DOM Code Wednesday, June 29, 2011
- 22. Keep Intermediate State in JS Wednesday, June 29, 2011
- 23. Case Study Wednesday, June 29, 2011
- 24. “ Wednesday, June 29, 2011 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 Wednesday, June 29, 2011
- 26. What do you want to do? 4 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed Relax Wednesday, June 29, 2011
- 27. What do you want to do? 3 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed Relax Wednesday, June 29, 2011
- 28. What do you want to do? 3 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed Relax Wednesday, June 29, 2011
- 29. What do you want to do? 3 items remaining ✓ Mark All Done ✓ Wash dishes Take out garbage Make bed Relax Wednesday, June 29, 2011
- 30. What do you want to do? 0 items remaining ✓ Mark All Done ✓ Wash dishes ✓ Take out garbage ✓ Make bed ✓ Relax Wednesday, June 29, 2011
- 31. "KVO" Wednesday, June 29, 2011
- 32. item marked done re-render stats view Wednesday, June 29, 2011
- 33. Backbone window.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 })); } }); Wednesday, June 29, 2011
- 34. Backbone window.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; Wednesday, June 29, 2011
- 35. Toggling Todos.forEach(function(todo) { todo.toggle(); }); Wednesday, June 29, 2011
- 36. item marked done compute remaining xN compute done render stats view Wednesday, June 29, 2011
- 37. This is foundational Wednesday, June 29, 2011
- 38. No notion of intermediate state Wednesday, June 29, 2011
- 39. Prefer Coalescing Operations Wednesday, June 29, 2011
- 40. SproutCore ArrayController.create({ content: [], remaining: function() { return this.filterProperty('isDone', false); }.property('@each.isDone') }); Wednesday, June 29, 2011
- 41. Superficially Similar Wednesday, June 29, 2011
- 42. intermediate state item marked done xN clear remaining cache run loop compute remaining render stats view Wednesday, June 29, 2011
- 43. Easy to Overlook Wednesday, June 29, 2011
- 44. SproutCore ArrayController.create({ content: [], remaining: function() { return this.filterProperty('isDone', false); }.property('@each.isDone') }); Wednesday, June 29, 2011
- 45. Key: Declare Intent Wednesday, June 29, 2011
- 46. "Coalesce" Wednesday, June 29, 2011
- 47. Wrong Wednesday, June 29, 2011
- 48. A B "hello" "hello" Wednesday, June 29, 2011
- 49. A B "1" "1" Wednesday, June 29, 2011
- 50. A B "12" "12" Wednesday, June 29, 2011
- 51. A B "123" "123" Wednesday, June 29, 2011
- 52. Right Wednesday, June 29, 2011
- 53. A B "hello" "hello" Wednesday, June 29, 2011
- 54. A B "1" "hello" Wednesday, June 29, 2011
- 55. A B "12" "hello" Wednesday, June 29, 2011
- 56. A B "123" "hello" Wednesday, June 29, 2011
- 57. A B run loop "123" "hello" Wednesday, June 29, 2011
- 58. A B "123" "123" Wednesday, June 29, 2011
- 59. Not 3 Deferred Observers Wednesday, June 29, 2011
- 60. Materialize Objects When Used Wednesday, June 29, 2011
- 61. Large JSON Structure { contacts: [ { name: "Yehuda", ... }, ... x 10,000 ] } Wednesday, June 29, 2011
- 62. Acre, Julie Appleseed, Johnny Arrow, Bob Astels, David Atwood, Michael Axelrod, Peter Azeroth, Roy Wednesday, June 29, 2011
- 63. Contact Data Store on demand name title (JSON Hashes) address telephone Wednesday, June 29, 2011
- 64. Ajax Response RecordArray Data Store live Contacts where (JSON Hashes) company = "GOOGLE" Wednesday, June 29, 2011
- 65. { Contact name: "yehuda" title: "Chief Technologist" data address: "690 Spruce" status telephone: "718.877.1325" } Wednesday, June 29, 2011
- 66. No Need to Copy Properties Wednesday, June 29, 2011
- 67. Again, Foundational Wednesday, June 29, 2011
- 68. One More Thing Wednesday, June 29, 2011
- 69. Page Speed Wednesday, June 29, 2011
- 70. Build Tools Wednesday, June 29, 2011
- 71. Packed Files Wednesday, June 29, 2011
- 72. CDN: Versioned URLs Wednesday, June 29, 2011
- 73. Expires Header: Same Wednesday, June 29, 2011
- 74. Stylesheets at the Top Wednesday, June 29, 2011
- 75. Scripts at the Bottom Wednesday, June 29, 2011
- 76. Simple Layout Wednesday, June 29, 2011
- 77. External JS and CSS Wednesday, June 29, 2011
- 78. Minification Wednesday, June 29, 2011
- 79. Easier said than done Wednesday, June 29, 2011
- 80. SproutCore 2.0 Wednesday, June 29, 2011
- 81. Matters, but not as much as you think. Overall File Size Wednesday, June 29, 2011
- 82. Modules w/ Declared Deps Wednesday, June 29, 2011
- 83. Lazy Loading Modules Wednesday, June 29, 2011
- 84. Thank you. Wednesday, June 29, 2011
- 85. Questions Wednesday, June 29, 2011