> Markdown version of [/videos/100-react-and-the-power-of-visualisation](https://www.wearedevelopers.com/videos/100-react-and-the-power-of-visualisation). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# React and the power of visualisation

Tired of rigid observability dashboards? Combine React and NRQL to build custom, data-intensive telemetry visualizations tailored exactly to your engineering needs.

- **Speakers:** Daisy Muyldermans
- **Event:** WeAreDevelopers LIVE
- **Published:** December 17, 2020
- **Duration:** 40:19
- **URL:** https://www.wearedevelopers.com/videos/100-react-and-the-power-of-visualisation

## Summary

This session introduces the core concepts of React and demonstrates its powerful application within New Relic's observability platform. The presentation begins with the origins of React at Facebook, explaining how features like JSX, state, props, and the virtual DOM resolve the performance bottlenecks of traditional HTML updates. By efficiently determining exactly when and what to re-render, React enables developers to build fast, data-intensive user interfaces. The focus then shifts to New Relic One, a modern telemetry data platform where observability transcends traditional monitoring—shifting from just knowing when something goes wrong to understanding why by analyzing unified metrics, events, logs, and traces.

Building on these concepts, the session provides a functional walkthrough of creating a "nerdlet" (a custom React application) integrated directly into New Relic. Using the New Relic CLI to generate a "nerdpack," the workflow demonstrates how to embed sophisticated UI components, such as a React Map GL visualization, into the ecosystem. Crucially, live organizational data is wired into these custom interfaces using New Relic Query Language (NRQL) queries executed via inline React functions. Because New Relic's own interface is built on React, this seamless programmability allows teams to organically extend the platform and bridge the gap between backend telemetry and bespoke frontend visualizations.

Ultimately, the power of this integration lies in enabling precise business visibility and technical optimization. By highlighting advanced use cases like a Cloud Optimizer—which analyzes cloud instance sizes across AWS, GCP, and Azure to uncover cost savings—the presentation illustrates that engineering teams do not have to rely on rigid, pre-built dashboards. Delivering the message that you can "build anything you can imagine," the talk equips developers to leverage open-source components, NRQL, and React to tailor operational analytics exactly to their specific organizational needs.

**Keywords:** react framework, virtual dom, new relic one, software observability, telemetry data platform, custom visualizations, frontend components, new relic query language, nrql integration, react map gl, nerdlet development, cloud cost optimization, application performance monitoring, real-time data visualization

## Chapters

1. **Fundamentals of building interfaces with React** (02:31) — React simplifies web development by splitting complex user interfaces into reusable components and utilizing a virtual DOM for efficient page updates.
1. **Solving rendering challenges at Facebook with React** (05:40) — Facebook engineers created React to overcome the performance bottlenecks of syncing complex business logic with dynamic user interfaces.
1. **Primary developer and business benefits of React** (08:01) — The automated DOM updates provided by React reduce manual coding tasks and improve overall application performance for end users.
1. **Monitoring complex systems with complete observability** (09:19) — An observability platform provides deep insights into full-stack software behavior by analyzing telemetry data like metrics, events, logs, and traces.
1. **Building customized observability applications with React** (11:08) — Programmability allows teams to extend standard monitoring capabilities by building tailored React applications directly within the observability platform.
1. **Initializing a local command line development environment** (14:00) — Authenticating an API key and installing the developer CLI generates the file structure required for a new platform application.
1. **Configuring application properties and serving code locally** (17:47) — Editing the manifest file manages application metadata before running local development commands to serve the user interface in a browser.
1. **Rendering geographical maps with React Map GL** (21:33) — Installing a map dependency and passing boundary coordinates instantiates an interactive map view inside the application layout.
1. **Structuring interface layouts with platform UI components** (24:32) — Importing pre-built grid and table elements from a component library standardizes the design and visual consistency of the application.
1. **Fetching platform telemetry data with query languages** (26:58) — Integrating a query language hook allows the interface to dynamically retrieve and display database metrics directly in the custom application.
1. **Updating visual states with dropdowns and map markers** (30:04) — Implementing native account picker controls dynamically alters the queried dataset and triggers updates to custom visual overlays.
1. **Reducing cloud infrastructure waste through custom tools** (34:45) — Advanced user-built applications like cost optimizers demonstrate how visualizing infrastructure data leads to concrete business savings.
1. **Accessing developer documentation and open source repositories** (36:27) — The developer ecosystem provides documentation, community forums, and open-source template repositories to accelerate custom application building.

## Related Moments

- [Origins and architectural capabilities of the React Native framework](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Recreating React components using AI and dev tools](https://www.wearedevelopers.com/videos/1786-wearedevelopers-live-ai-freelancing-keeping-up-with-tech-and-more) (from "WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More")
- [Understanding the capabilities and value of reactive technologies](https://www.wearedevelopers.com/videos/89-development-of-reactive-applications-with-quarkus) (from "Development of reactive applications with Quarkus")
- [Demonstrating Data API Builder with a React front end](https://www.wearedevelopers.com/videos/1194-say-goodbye-to-building-boring-apis-with-azure-data-api-builder) (from "Say goodbye to building boring APIs with Azure Data API Builder")
- [Introduction to react components, props, and state](https://www.wearedevelopers.com/videos/653-how-to-become-an-ai-toolsmith) (from "How to become an AI toolsmith")
- [Analyzing excessive context provider nesting in complex React applications](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More")

## Related Articles

- [Dev Digest 103 - Superb Owl Trafficking](https://www.wearedevelopers.com/magazine/388-dev-digest-103-superb-owl-trafficking)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**