Snappy Means Happy: Performance in Ember Apps
•
15 likes•13,804 views
Ember is fast. Ember Core is working hard to make Ember even faster. So why does your app drag? The performance of a single-page app is impacted by the performance characteristics of its foundational parts: Network, Rendering, and JavaScript. Ember provides tools to manage these cornerstones, but with the tradeoff of introducing its own characteristics. In this talk, we will use the source of real, shipped Ember apps (and of Ember itself) to diagnose, understand, and improve slow interactions. The Chrome developer tools will help us understand slow code paths and identify opportunities for improvement. Along the way, we will learn how parts of Ember work at the macro and micro level and learn how the framework helps us manage performance challenges in a browser environment.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Snappy Means Happy: Performance in Ember Apps
Similar to Snappy Means Happy: Performance in Ember Apps (20)
More from Matthew Beale
More from Matthew Beale (15)
Recently uploaded
Recently uploaded (20)
Snappy Means Happy: Performance in Ember Apps
- 1. Snappy Means Happy Performance in Ember Apps
- 3. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
- 12. What to think about
- 13. How Fast is Fast?
- 14. Jakob Nielsen sez 100 ms 1 second 10 seconds instant uninterrupted work the limit of attention www.nngroup.com/articles/response-times-3-important-limits/
- 15. Ilya Grigorik sez 0 - 100ms 100 - 300ms 300 - 1000ms 1 second + 10 seconds + Instant slight perceptible delay perceptible delay mental context switch “I’ll come back later” youtu.be/7ubJzEi3HuA?t=4m25s
- 16. @mixonic sez 16ms 300ms 1 second + 10 seconds + 60 fps - Animation snappy waiting Lost a user
- 19. Animation, < 16ms Javascript renDer Snappy, less than 300 ms Javascript renDerNetwork One second and beyond JavascriptNetwork
- 20. Methodology
- 21. 1. Gather facts 2. Analyze & theorize 3. Change a single thing
- 22. 1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory
- 23. Real World
- 24. Speeding up emberjs.com on a phone ember.js website, why so slow? Analyze using a latency emulator & Chrome devtools “Network” tab
- 27. emberjs.com
- 29. Charles - http://www.charlesproxy.com/ Slowy - http://slowyapp.com/ Network Link Conditioner - https://developer.apple.com/... #1 reproduce mobile latency reliably
- 30. #2 create a clean browser environment No extensions, privatewindow support.google.com/chrome/answer/2364824?hl=en
- 31. #3 measurement & analysis developers.google.com/chrome-developer-tools/docs/network
- 32. #3 measurement & analysis
- 33. Blocking JavaScriptAssets in HTML Assets in CSS
- 34. Javascript CSS HTML ASSETS ASSETS assets HTML Head JS Network+Parse
- 35. ✦ Script at the bottom ✦ script async/defer ✦ explicitly load webfont in HTML (via script or link tag) #4 Solutions
- 36. Javascript CSS HTML ASSETS ASSETS assets HTML Head JS Network+Parse
- 37. #5 confirm the theory https://github.com/emberjs/website/pull/1337
- 40. Making an animation smooth Janky animation Using continuous paint, composited borders, Chrome devtools “Timeline”
- 41. DOM TREe RENDER TREe LAYOUT PAINT composite #1 understanding browsers
- 46. Upload to GPU, Compositing #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
- 47. Open a render console Special render options #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
- 48. Live coding OMG. debugging a janky animation uni.madhatted.com/emberconf/animation-initial/index.html uni.madhatted.com/emberconf/animation/index.html uni.madhatted.com/emberconf/animation-second/index.html screencast.com/t/TqtMmnvhiQg screencast.com/t/Hl6krsx3lN
- 49. Ember.js Property change notifications Chrome devtools “Timeline”, profiles
- 50. 1 var person = Ember.Object.extend({ 2 name: 'rick' 3 logNameChange: function(){ 4 console.log('observing name!'); 5 }.observes('name') 6 }); 7 8 person.set('name', 'bob'); 9 console.log('after name!'); #1 understanding observers
- 51. 1 var person = Ember.Object.extend({ 2 name: 'rick' 3 logNameChange: function(){ 4 console.log('observing name!'); 5 }.observes('name') 6 }); 7 8 person.set('name', 'bob'); 9 console.log('after name!'); Logs first observers are synchronous
- 52. 1 var person = Ember.Object.extend({ 2 name: 'rick' 3 somethingExpensive: function(){ 4 // Something really heavy 5 }.observes('name', 'age', 'shoeSize') 6 }); 7 8 person.set('name', 'bob'); 9 person.set('age', 25); 10 person.set('shoeSize', 11); somethingExpensive, x3 observers are synchronous
- 53. 1 var person = Ember.Object.extend({ 2 name: 'rick' 3 somethingExpensive: function(){ 4 // Something really heavy 5 }.observes('name', 'age', 'shoeSize') 6 }); 7 8 person.setProperties({ 9 name: 'bob', 10 age: 25, 11 shoeSize: 11 12 }); somethingExpensive, once observers are synchronous
- 54. 1 var person = Ember.Object.extend({ 2 name: 'rick' 3 scheduleSomethingExpensive: function(){ 4 Ember.run.once(this, this.somethingExpensive); 5 }.observes('name', 'age', 'shoeSize'), 6 somethingExpensive: function(){ 7 // Something really heavy 8 } 9 }); 10 11 person.set('name', 'bob'); 12 person.set('age', 25); 13 person.set('shoeSize', 11); somethingExpensive, once observers are synchronous
- 61. Live coding OMG. debugging a slow list render uni.madhatted.com/emberconf/push-into-array/index.html uni.madhatted.com/emberconf/push-into-array-optimized/index.html screencast.com/t/GMIHB4q4xyr screencast.com/t/xEagiQzyz
- 65. 1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory