Writing Fast Client-Side Code: Lessons Learned from SproutCore
Upcoming SlideShare
Loading in...5
×
 

Writing Fast Client-Side Code: Lessons Learned from SproutCore

on

  • 2,258 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.

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.

Statistics

Views

Total Views
2,258
Views on SlideShare
2,224
Embed Views
34

Actions

Likes
0
Downloads
23
Comments
0

4 Embeds 34

http://lanyrd.com 24
http://francescoagati.posterous.com 8
http://posterous.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Writing Fast Client-Side Code: Lessons Learned from SproutCore Presentation Transcript

  • 1. SproutCore and PerformanceWednesday, 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 EinsteinWednesday, June 29, 2011
  • 3. "Fast By Default"Wednesday, June 29, 2011
  • 4. Core ConceptsWednesday, June 29, 2011
  • 5. 1. JS is cheaper than DOMWednesday, June 29, 2011
  • 6. 2. Keep Intermediate State in JSWednesday, June 29, 2011
  • 7. (and out of DOM)Wednesday, June 29, 2011
  • 8. 3. Events Cannot CoalesceWednesday, June 29, 2011
  • 9. (prefer cache clearing)Wednesday, June 29, 2011
  • 10. 4. Materialize Objects When UsedWednesday, June 29, 2011
  • 11. (also, proxy, dont copy)Wednesday, June 29, 2011
  • 12. 5. Follow Speed GuidelinesWednesday, June 29, 2011
  • 13. JS is Cheaper than DOMWednesday, June 29, 2011
  • 14. change name change DOM change title change DOM change address change DOMWednesday, June 29, 2011
  • 15. change name change title change DOM change addressWednesday, June 29, 2011
  • 16. change name change title change DOM change addressWednesday, June 29, 2011
  • 17. SC run loop browser event loopWednesday, June 29, 2011
  • 18. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  • 19. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  • 20. handle event native sync handle event event bindings handle eventWednesday, June 29, 2011
  • 21. Event Handling JS Code JS Code JS Code ... DOM CodeWednesday, June 29, 2011
  • 22. Keep Intermediate State in JSWednesday, June 29, 2011
  • 23. Case StudyWednesday, 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 RelaxWednesday, June 29, 2011
  • 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. What do you want to do? 3 items remaining Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  • 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. What do you want to do? 3 items remaining ✓ Mark All Done ✓ Wash dishes Take out garbage Make bed RelaxWednesday, June 29, 2011
  • 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. "KVO"Wednesday, June 29, 2011
  • 32. item marked done re-render stats viewWednesday, 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 viewWednesday, June 29, 2011
  • 37. This is foundationalWednesday, June 29, 2011
  • 38. No notion of intermediate stateWednesday, June 29, 2011
  • 39. Prefer Coalescing OperationsWednesday, June 29, 2011
  • 40. SproutCore ArrayController.create({   content: [],   remaining: function() {     return this.filterProperty(isDone, false);   }.property(@each.isDone) });Wednesday, June 29, 2011
  • 41. Superficially SimilarWednesday, June 29, 2011
  • 42. intermediate state item marked done xN clear remaining cache run loop compute remaining render stats viewWednesday, June 29, 2011
  • 43. Easy to OverlookWednesday, 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 IntentWednesday, June 29, 2011
  • 46. "Coalesce"Wednesday, June 29, 2011
  • 47. WrongWednesday, 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. RightWednesday, 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 ObserversWednesday, June 29, 2011
  • 60. Materialize Objects When UsedWednesday, 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, RoyWednesday, June 29, 2011
  • 63. Contact Data Store on demand name title (JSON Hashes) address telephoneWednesday, 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 PropertiesWednesday, June 29, 2011
  • 67. Again, FoundationalWednesday, June 29, 2011
  • 68. One More ThingWednesday, June 29, 2011
  • 69. Page SpeedWednesday, June 29, 2011
  • 70. Build ToolsWednesday, June 29, 2011
  • 71. Packed FilesWednesday, June 29, 2011
  • 72. CDN: Versioned URLsWednesday, June 29, 2011
  • 73. Expires Header: SameWednesday, June 29, 2011
  • 74. Stylesheets at the TopWednesday, June 29, 2011
  • 75. Scripts at the BottomWednesday, June 29, 2011
  • 76. Simple LayoutWednesday, June 29, 2011
  • 77. External JS and CSSWednesday, June 29, 2011
  • 78. MinificationWednesday, June 29, 2011
  • 79. Easier said than doneWednesday, June 29, 2011
  • 80. SproutCore 2.0Wednesday, June 29, 2011
  • 81. Matters, but not as much as you think. Overall File SizeWednesday, June 29, 2011
  • 82. Modules w/ Declared DepsWednesday, June 29, 2011
  • 83. Lazy Loading ModulesWednesday, June 29, 2011
  • 84. Thank you.Wednesday, June 29, 2011
  • 85. QuestionsWednesday, June 29, 2011