The Need For Speed Measuring Latency In Single-Page Applications Jordan Hawker DeveloperWeek Austin November 2018

November 2018 Jordan Hawker 2 Performance: Why Do We Care? Poor performance impacts business metrics – Bounce Rates – Conversions – Feature Throughput – Revenue Impact – User Satisfaction

November 2018 Jordan Hawker 3 Instrumentation Before Optimization ● You don’t know what to optimize without data ● Backend Instrumentation – Mature instrumentation options – Detailed information about services – Doesn’t provide the full picture ● Can we track performance across the whole stack?

November 2018 Jordan Hawker 4 Web Application Performance ● Response Time ● Throughput ● Availability ● Responsiveness ● Rate of Requests ● Resource Consumption ● Efficiency ● Latency What does that even mean?

November 2018 Jordan Hawker 5 Priority: User Experience ● Each metric has its own use, but... ● Real-world performance impact is paramount – Know what your users are seeing – Gather data on different devices and browsers – Understand variance across global regions ● Improvements across the stack will be reflected

November 2018 Jordan Hawker 6 Third-Party Tools

November 2018 Jordan Hawker 7 PageSpeed Insights

November 2018 Jordan Hawker 8 WebPageTest

November 2018 Jordan Hawker 9 Lighthouse

November 2018 Jordan Hawker 10 Evaluating Third-Party Tools ● They give great overviews of app performance ● Detailed suggestions for optimization ● They don’t understand how SPAs render ● Data is a rough approximation at best ● How can we leverage framework internals?

November 2018 Jordan Hawker 11 Architecture

November 2018 Jordan Hawker 12 Subscriber-Reporter Relationship ● Subscriber – Relies on child components (reporters) to render – Complex conditions for interactivity ● Reporter – Reports its own render times – Child of a subscriber – May also be a subscriber itself

November 2018 Jordan Hawker 13 Approach ● Leverage hooks to approximate rendering ● Account for async behavior (e.g. requests, images) ● Capture per-component events & roll up to page ● Tie parents to their children to bubble data – Working up from the bottom of the tree is optimal – When child reports, check parent for interactivity ● Common method to check complex conditions

November 2018 Jordan Hawker 14 React ● componentDidMount – Invoked immediately after a component is mounted ● Create a higher-order component (HOC) – Provides components with this latency behavior ● Parent/Child relationship – this.props.children gives access to child components – Pass a parent reference down to children

November 2018 Jordan Hawker 15 Ember ● Routes: didTransition ● Components: didInsertElement ● Leverage Runloop – run.scheduleOnce('afterRender', this, this.reportInteractive) ● Parent/Child Relationship – this.parentView is a direct reference to the parent ● Ember-Interactivity: jhawk.co/interactivity-demo

November 2018 Jordan Hawker 16 Angular ● ngAfterContentInit – Called after Angular fully initializes all content of a directive ● Parent/Child Relationship – this.parentInjector.view.component

November 2018 Jordan Hawker 17 Vue ● mounted – Called after the instance has been mounted ● this.$nextTick – Called after all children have been rendered ● Parent/Child Relationship – this.$parent

November 2018 Jordan Hawker 18 Conclusions

November 2018 Jordan Hawker 19 What We Learned ● Define Critical Path ● Identify Bottleneck Components ● Defer Non-Critical Components ● Holistic user-centric metrics reflect improvements across the stack

November 2018 Jordan Hawker 20 The Path Forward ● Leverage multiple tools for instrumentation ● Measuring each layer of the stack is useful ● Capture real user metrics to understand impact ● Virtual machines are insufficient simulations ● Use framework-aware tools for granular data ● Be cognizant of the performance impact of leveraging framework internals

November 2018 Jordan Hawker 21 Thank You! JordanHawker elwayman02 www.JordanHawker.com Slides: jhawk.co/dw-austin-18-latency