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

Slide 1

Slide 1 text

It’s Easy To Measure Performance In Ember Jordan Hawker 2018

Slide 2

Slide 2 text

Performance @ Twitch • Poor performance impacts business metrics • Backend instrumentation highlights multiple opportunities • How can we understand the real user experience?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Interactivity User-Perceived Performance Photo by Elena Taranenko on Unsplash

Slide 5

Slide 5 text

Measuring Performance

Slide 6

Slide 6 text

Measuring Performance

Slide 7

Slide 7 text

Measuring Performance Lighthouse

Slide 8

Slide 8 text

Instrumenting Ember • Framework internals allow for greater granularity • @ember/instrumentation • subscribe(‘render’) • Can we approximate this without introducing overhead? • Enter Ember’s runloop…

Slide 9

Slide 9 text

Taking A Closer Look

Slide 10

Slide 10 text

Route Lifecycle What’s This? SOURCE | GitHub: Ember-Interactivity

Slide 11

Slide 11 text

Custom Interactivity SOURCE | Twitch Internal Code

Slide 12

Slide 12 text

Component Lifecycle SOURCE | GitHub: Jordan-Hawker Look Familiar?

Slide 13

Slide 13 text

Component Lifecycle - Subscriber SOURCE | GitHub: Ember-Interactivity

Slide 14

Slide 14 text

Component Interactivity SOURCE | Twitch Internal Code & GitHub: Jordan-Hawker

Slide 15

Slide 15 text

Component Interactivity SOURCE | Twitch Internal Code & GitHub: Jordan-Hawker

Slide 16

Slide 16 text

Metrics Integration SOURCE | GitHub: Jordan-Hawker & ember-interactivity

Slide 17

Slide 17 text

Developer Tooling

Slide 18

Slide 18 text

Developer Tooling

Slide 19

Slide 19 text

Use in Third-Party Tools

Slide 20

Slide 20 text

Ember Interactivity ember-interactivity.jhawk.co

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

You Don’t Know What To Optimize If You Can’t Measure It

Slide 24

Slide 24 text

Thank You! JordanHawker elwayman02 www.JordanHawker.com/resume jhawk.co/embercamp-interactivity