Talks about performance

• "How my app isn't janky anymore"
• "10 awesome performance hacks"

Talks about performance

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

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
• Real world performance data
  • 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

• Zipkin Server
• Zipkin.js Example
• Zipkin.js Child Example
• Zipkin.js Instrumentation with Fetch

OpenTracing

The Standard

zipkin-javascript-opentracing

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

Zipkin-Javascript-Opentracing

• Zipkin Server
• Opentracing
• Opentracing extended spans

jaeger by uber

TL;DR

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

Why I think this is useful

• 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
• Better collaboration with backend-oriented team members

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

• Tracing Network Requests: ✅
• User Interaction: ❌
• Navigation: ❌