Writing Fast Client-Side Code: Lessons Learned from SproutCore

2,823 views

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total views
2,823
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Writing Fast Client-Side Code: Lessons Learned from SproutCore

  1. 1. SproutCore and PerformanceWednesday, June 29, 2011
  2. 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 EinsteinWednesday, June 29, 2011
  3. 3. "Fast By Default"Wednesday, June 29, 2011
  4. 4. Core ConceptsWednesday, June 29, 2011
  5. 5. 1. JS is cheaper than DOMWednesday, June 29, 2011
  6. 6. 2. Keep Intermediate State in JSWednesday, June 29, 2011
  7. 7. (and out of DOM)Wednesday, June 29, 2011
  8. 8. 3. Events Cannot CoalesceWednesday, June 29, 2011
  9. 9. (prefer cache clearing)Wednesday, June 29, 2011
  10. 10. 4. Materialize Objects When UsedWednesday, June 29, 2011
  11. 11. (also, proxy, dont copy)Wednesday, June 29, 2011
  12. 12. 5. Follow Speed GuidelinesWednesday, June 29, 2011
  13. 13. JS is Cheaper than DOMWednesday, June 29, 2011
  14. 14. change name change DOM change title change DOM change address change DOMWednesday, June 29, 2011
  15. 15. change name change title change DOM change addressWednesday, June 29, 2011
  16. 16. change name change title change DOM change addressWednesday, June 29, 2011
  17. 17. SC run loop browser event loopWednesday, June 29, 2011
  18. 18. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  19. 19. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  20. 20. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  21. 21. Event Handling JS Code JS Code JS Code ... DOM CodeWednesday, June 29, 2011
  22. 22. Keep Intermediate State in JSWednesday, June 29, 2011
  23. 23. Case StudyWednesday, June 29, 2011
  24. 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. 25. What do you want to do? 4 items remaining Mark All Done Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  26. 26. What do you want to do? 4 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  27. 27. What do you want to do? 3 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  28. 28. What do you want to do? 3 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  29. 29. What do you want to do? 3 items remaining ✓ Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  30. 30. What do you want to do? 0 items remaining ✓ Mark All Done ✓ Wash dishes ✓ Take out garbage ✓ Make bed ✓ RelaxWednesday, June 29, 2011
  31. 31. "KVO"Wednesday, June 29, 2011
  32. 32. item marked done re-render stats viewWednesday, June 29, 2011
  33. 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. 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. 35. Toggling Todos.forEach(function(todo) {   todo.toggle(); });Wednesday, June 29, 2011
  36. 36. item marked done compute remaining xN compute done render stats viewWednesday, June 29, 2011
  37. 37. This is foundationalWednesday, June 29, 2011
  38. 38. No notion of intermediate stateWednesday, June 29, 2011
  39. 39. Prefer Coalescing OperationsWednesday, June 29, 2011
  40. 40. SproutCore ArrayController.create({   content: [],   remaining: function() {     return this.filterProperty(isDone, false);   }.property(@each.isDone) });Wednesday, June 29, 2011
  41. 41. Superficially SimilarWednesday, June 29, 2011
  42. 42. intermediate state item marked done xN clear remaining cache run loop compute remaining render stats viewWednesday, June 29, 2011
  43. 43. Easy to OverlookWednesday, June 29, 2011
  44. 44. SproutCore ArrayController.create({   content: [],   remaining: function() {     return this.filterProperty(isDone, false);   }.property(@each.isDone) });Wednesday, June 29, 2011
  45. 45. Key: Declare IntentWednesday, June 29, 2011
  46. 46. "Coalesce"Wednesday, June 29, 2011
  47. 47. WrongWednesday, June 29, 2011
  48. 48. A B "hello" "hello"Wednesday, June 29, 2011
  49. 49. A B "1" "1"Wednesday, June 29, 2011
  50. 50. A B "12" "12"Wednesday, June 29, 2011
  51. 51. A B "123" "123"Wednesday, June 29, 2011
  52. 52. RightWednesday, June 29, 2011
  53. 53. A B "hello" "hello"Wednesday, June 29, 2011
  54. 54. A B "1" "hello"Wednesday, June 29, 2011
  55. 55. A B "12" "hello"Wednesday, June 29, 2011
  56. 56. A B "123" "hello"Wednesday, June 29, 2011
  57. 57. A B run loop "123" "hello"Wednesday, June 29, 2011
  58. 58. A B "123" "123"Wednesday, June 29, 2011
  59. 59. Not 3 Deferred ObserversWednesday, June 29, 2011
  60. 60. Materialize Objects When UsedWednesday, June 29, 2011
  61. 61. Large JSON Structure {   contacts: [     { name: "Yehuda", ... },     ... x 10,000   ] }Wednesday, June 29, 2011
  62. 62. Acre, Julie Appleseed, Johnny Arrow, Bob Astels, David Atwood, Michael Axelrod, Peter Azeroth, RoyWednesday, June 29, 2011
  63. 63. Contact Data Store on demand name title (JSON Hashes) address telephoneWednesday, June 29, 2011
  64. 64. Ajax Response RecordArray Data Store live Contacts where (JSON Hashes) company = "GOOGLE"Wednesday, June 29, 2011
  65. 65. { Contact name: "yehuda" title: "Chief Technologist" data address: "690 Spruce" status telephone: "718.877.1325" }Wednesday, June 29, 2011
  66. 66. No Need to Copy PropertiesWednesday, June 29, 2011
  67. 67. Again, FoundationalWednesday, June 29, 2011
  68. 68. One More ThingWednesday, June 29, 2011
  69. 69. Page SpeedWednesday, June 29, 2011
  70. 70. Build ToolsWednesday, June 29, 2011
  71. 71. Packed FilesWednesday, June 29, 2011
  72. 72. CDN: Versioned URLsWednesday, June 29, 2011
  73. 73. Expires Header: SameWednesday, June 29, 2011
  74. 74. Stylesheets at the TopWednesday, June 29, 2011
  75. 75. Scripts at the BottomWednesday, June 29, 2011
  76. 76. Simple LayoutWednesday, June 29, 2011
  77. 77. External JS and CSSWednesday, June 29, 2011
  78. 78. MinificationWednesday, June 29, 2011
  79. 79. Easier said than doneWednesday, June 29, 2011
  80. 80. SproutCore 2.0Wednesday, June 29, 2011
  81. 81. Matters, but not as much as you think. Overall File SizeWednesday, June 29, 2011
  82. 82. Modules w/ Declared DepsWednesday, June 29, 2011
  83. 83. Lazy Loading ModulesWednesday, June 29, 2011
  84. 84. Thank you.Wednesday, June 29, 2011
  85. 85. QuestionsWednesday, June 29, 2011

×