Talks about #perf

• "How my app isn't yanky anymore"
• "10 awesome #perf hacks"

Talks about #perf

• "Use GraphQL and Relay / Apollo to load only what you need"
• "Prefetch your components and their data before they load to get better #perf"

Too little talks about

• "Our #perf optimization had an impact on our customers and this is the way we measured"
• "This premature optimization had a bad impact on our customers with older phones and this is how we noticed"

Why do we measure?

• Ship the fastest product possible
• Get information about bottlenecks
  • User type
  • Devices
  • Usage Path
• Gain confidence that optimizations
  actually improve the performance

What we want to see?

What we want to see?

Text

Text

root span

span

service

OpenZipkin

• Server
• Client
• Integrations

docker run -p 9411:9411 openzipkin/zipkin

zipkin.js

Extending span in Zipkin

Connecting the dots

• X-B3-TraceId
• X-B3-SpanId
• X-B3-ParentSpanId
• X-B3-Sampled

Title Text

OpenTracing

The Standard

zipkin-javascript-opentracing

• standard and implementation combined
• switch out your implementation, but keep the same source code

zipkin-javascript-opentracing

Extending Spans

Connecting two systems

TL;DR

• Zipkin: awesome tool to get performance insights
• Opentracing: standards are nice
• Integrating Tracing in your App is not that hard

My Opinion

• Better collaboration with backend-oriented team members
• Backing (or disagreeing) with performance tips based on data is nice
• Adding Tracing on a few key parts helps to understand a lot of behaviour

React-Tracing

or

My try to get everyone into this without needing to learn that much about all these systems

Goals

• Enable to give this whole world a try
• Abstract common use-cases in the frontend
  • Network requests
  • User Interactions
  • Navigation
• Allow for different backend systems

react-tracing

react-tracing

• WIP
• Current Focus: Tracing Network Requests
  • Works partly, async callbacks are hard
  •  
• Next: Spans through user interaction

Title Text

Title Text