EmberCamp Chicago 2018: It's Easy To Measure Performance In Ember

Tracking how fast your application loads can be a daunting prospect. Constructing that data with enough accuracy and granularity to be actionable sounds even worse. Thankfully, we have the tools in Ember to make instrumentation a breeze! We'll explore what the Ember ecosystem has to offer for performance measurement, as well as some real-world examples of how to put these techniques into practice. You'll walk away knowing how to get the data you need to optimize your Ember app!

Transcript

1. It’s Easy To Measure Performance In Ember Jordan Hawker 2018
2. Performance @ Twitch • Poor performance impacts business metrics • Backend instrumentation highlights multiple opportunities • How can we understand the real user experience?
3. Web Application Performance It’s Complicated… • What does that even mean? • Response Time • Throughput • Availability • Responsiveness • Rate of Requests • Resource Consumption • Efficiency • Latency Photo by Denys Nevozhai on Unsplash
4. Interactivity User-Perceived Performance Photo by Elena Taranenko on Unsplash
5. Measuring Performance
6. Measuring Performance
7. Measuring Performance Lighthouse
8. Instrumenting Ember • Framework internals allow for greater granularity • @ember/instrumentation • subscribe(‘render’) • Can we approximate this without introducing overhead? • Enter Ember’s runloop…
9. Taking A Closer Look
10. Route Lifecycle What’s This? SOURCE | GitHub: Ember-Interactivity
11. Custom Interactivity SOURCE | Twitch Internal Code
12. Component Lifecycle SOURCE | GitHub: Jordan-Hawker Look Familiar?
13. Component Lifecycle - Subscriber SOURCE | GitHub: Ember-Interactivity
14. Component Interactivity SOURCE | Twitch Internal Code & GitHub: Jordan-Hawker
15. Component Interactivity SOURCE | Twitch Internal Code & GitHub: Jordan-Hawker
16. Metrics Integration SOURCE | GitHub: Jordan-Hawker & ember-interactivity
17. Developer Tooling
18. Developer Tooling
19. Use in Third-Party Tools
20. Ember Interactivity ember-interactivity.jhawk.co
21. What We Learned • Define the critical path • Defer non-critical components • Identify bottleneck components • Holistic user-centric metrics will reflect improvements across the entire tech stack Photo by _HealthMond . on Unsplash
22. The Path Forward • Leverage multiple tools for instrumentation and measurement • Capture real user metrics • Use framework-aware tools for more granular data • Ember-Interactivity • Ember-Perf • Ember-Perf-Handlebars • Ember-Perf-Timeline What Can You Do? Photo by Geran de Klerk on Unsplash
23. You Don’t Know What To Optimize If You Can’t Measure It
24. Thank You! JordanHawker elwayman02 www.JordanHawker.com/resume jhawk.co/embercamp-interactivity