Presentation: Observable JS Apps
Share this on:
What You’ll Learn
- Listen to what are some of the instrumentation best practices today, what data to collect and why.
- Hear about back-end observability practices that can help understand what is going on in an application.
- Find out what are some of the tooling changes that take place on the back-end and how to apply the principles to the front-end.
Abstract
Observability isn't just for backends. Client-side javascript applications are the original distributed systems software: real-time, heavily cached, single-paged, asynchronous, multi-domain, with polyglot persistence layers and cascading dependencies and always running massive amounts of JS. So what can we borrow from backend observability practices, in order to better understand our users and how they really experience our applications? How can we get our finger on the pulse of modern JS apps running in production?
Observability means instrumenting your code so that you can ask any question, whether you anticipated it or not, and understand the internal state of your systems just by observing its outputs. Emily will talk about an event-driven approach to client-side observability for the most complicated parts of Honeycomb's customer-facing React app: the query builder. She will cover instrumentation best practices, what data to collect and why (spoiler alert: high cardinality is queen), and how they use that data to slice and dice and zoom in on some of the strangest unknown-unknowns for real customers. Code examples will be primarily in React or vanilla JS, but takeaways will apply to other popular frameworks. Examples will be in Honeycomb, but context is relevant to distributed tracing and other distsys debugging techniques.
Tell me a bit about managing the product team at Honeycomb.
We are a super small startup, we're scaling up quickly. The interesting thing that my team is tasked with is creating new ways to visualize and understand complex distributed systems. The tool is in a space between log aggregator, metrics, tracing — the intersection of all those kinds of tools. The most interesting thing that we do is to come up with new ways to take complex data and make it clear to engineers.
How do you instrument the front-end to be able to trace and log and do all the things that you just talked about?
I've always been a little bit of an ops groupie. Strangely enough I think a lot of front-end developers to advance in their careers move to back - end roles. But I always have found that I was more excited about the infrastructure side of things, understanding networks and systems architectures, and that has been super helpful in trying to understand front-end code in production. The tools that I have applied to that problem tend to come more from what I've learned from ops folks, and the ways that they are thinking about understanding their systems. And that's definitely what this talk is about, thinking about how to take these event driven tools and use them on the front end. The high cardinality problems that are occasionally blockers on the back-end are happening every day and all the time in browsers — it's always that long tail bug it only happens in this one browser or to this one customer.
How you you describe the persona and level of the target audience?
A senior full-stack or frontend engineer who is up to date on the latest javascript frameworks, APIs, and practices, but may not have advanced ops/infra/monitoring knowledge.
Can you give me an example of one of the techniques you talk about?
Probably the most interesting thing that I'll be sharing is about how to think about instrumenting single page apps. The community has understood instrumenting page loads really well for a long time. This talk is about starting to pull apart all the things your SPA can do and figuring out how to map your events to the common paradigms in SPA. It may be the most boring but most actionable thing I'll get into. There are analogs to thinking about how data flows through back-end systems.
Can you give me an example of a back-end concept that you can apply to the front-end?
Many lessons learned from distributed tracing tools are useful on the front-end. In some ways that paradigm is more natural to front-end developers because they've been used to be looking at the network panel to do debugging for a long time. The next step is thinking about how you can take that data and aggregate it and not just use it to debug a slow performance situation that you can reproduce reliably locally. Aggregating all that data together helps you both understand the normal state and also allows you to debug complex customer facing problems in production that you can’t reproduce locally. That's a neat place where back-end and front-end tools are converging together.
Are you talking about events that are emitted from the front or back-end code?
I'm primarily talking about instrumenting frontend browser code. There's some interesting work that we're looking at around instrumenting server-side rendering too, so that people can decide whether they should have a particular piece of logic running on the server or the client side. Being able to instrument those is important, but the focus of talk is primarily stuff that runs on the client.
Has what you're talking about more affinity to React Redux style?
The code examples that I will show will be from our React app but it's not a super code-heavy presentation. The takeaways will apply to any AJAXy application. People using Angular, Ember or any other SPA framework will be able to take a lot of actionable ideas away from the talk. It doesn't require any particular architecture and certainly doesn't require React & Redux.
Are you talking about emitting events, about instrumenting the requests or both?
It's definitely both. You want to be able to instrument request and loading, but we're also looking at rendering and even user interactions that only happen in the client and never trigger a request.
Similar Talks
![](../sites/default/files/styles/similar_talks/public/3758bcaa725.jpg?itok=moex_JJq)
Tracks
Monday, 5 March
-
Leading Edge Backend Languages
Code the future! How cutting-edge programming languages and their more-established forerunners can help solve today and tomorrow’s server-side technical problems.
-
Security: Red XOR Blue Team
Security from the defender's AND the attacker's point of view
-
Microservices/ Serverless: Patterns and Practices
Stories of success and failure building modern service and function-based applications, including event sourcing, reactive, decomposition, & more.
-
Stream Processing in the Modern Age
Compelling applications of stream processing & recent advances in the field
-
DevEx: The Next Evolution of DevOps
Removing friction from the developer experience.
-
Modern CS in the Real World
Applied trends in Computer Science that are likely to affect Software Engineers today.
-
Speaker AMAs (Ask Me Anything)
Tuesday, 6 March
-
Next Gen Banking: It’s not all Blockchains and ICOs
Great technologies like Blockchain, smartphones and biometrics must not be limited to just faster banking, but better banking.
-
Observability: Logging, Alerting and Tracing
Observability in modern large distributed computer systems
-
Building Great Engineering Cultures & Organizations
Stories of cultural change in organizations
-
Architectures You've Always Wondered About
Topics like next-gen architecture mixed with applied use cases found in today's large-scale systems, self-driving cars, network routing, scale, robotics, cloud deployments, and more.
-
The Practice & Frontiers of AI
Learn about machine learning in practice and on the horizon
-
JavaScript and Beyond: The Future of the Frontend
Exploring the great frontend frameworks that make JavaScript so popular and theg JavaScript-based languages revolutionising frontend development.
-
Speaker AMAs (Ask Me Anything)
Wednesday, 7 March
-
Distributed Stateful Systems
Architecting and leveraging NoSQL revisitied
-
Operating Systems: LinuxKit, Unikernels, & Beyond
Applied, practical, & real-world deep-dive into industry adoption of OS, containers and virtualisation, including Linux on Windows, LinuxKit, and Unikernels
-
Architecting for Failure
If you're not architecting for failure you're heading for failure
-
Evolving Java and the JVM: Mobile, Micro and Modular
Although the Java language is holding strong as a developer favourite, new languages and paradigms are being embraced on JVM.
-
Tech Ethics in Action
Learning from the experiences of real-world companies driving technology decisions from ethics as much as technology.
-
Bare Knuckle Performance
Killing latency and getting the most out of your hardware
-
Speaker AMAs (Ask Me Anything)