WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 17, 2020

React and the power of visualisation

Daisy Muyldermans

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

Pause
Mute Enter Fullscreen
#1 about 4 min

Fundamentals of building interfaces with React

React simplifies web development by splitting complex user interfaces into reusable components and utilizing a virtual DOM for efficient page updates.

#2 about 3 min

Solving rendering challenges at Facebook with React

Facebook engineers created React to overcome the performance bottlenecks of syncing complex business logic with dynamic user interfaces.

#3 about 2 min

Primary developer and business benefits of React

The automated DOM updates provided by React reduce manual coding tasks and improve overall application performance for end users.

#4 about 2 min

Monitoring complex systems with complete observability

An observability platform provides deep insights into full-stack software behavior by analyzing telemetry data like metrics, events, logs, and traces.

#5 about 3 min

Building customized observability applications with React

Programmability allows teams to extend standard monitoring capabilities by building tailored React applications directly within the observability platform.

#6 about 4 min

Initializing a local command line development environment

Authenticating an API key and installing the developer CLI generates the file structure required for a new platform application.

#7 about 4 min

Configuring application properties and serving code locally

Editing the manifest file manages application metadata before running local development commands to serve the user interface in a browser.

#8 about 3 min

Rendering geographical maps with React Map GL

Installing a map dependency and passing boundary coordinates instantiates an interactive map view inside the application layout.

#9 about 3 min

Structuring interface layouts with platform UI components

Importing pre-built grid and table elements from a component library standardizes the design and visual consistency of the application.

#10 about 4 min

Fetching platform telemetry data with query languages

Integrating a query language hook allows the interface to dynamically retrieve and display database metrics directly in the custom application.

#11 about 5 min

Updating visual states with dropdowns and map markers

Implementing native account picker controls dynamically alters the queried dataset and triggers updates to custom visual overlays.

#12 about 2 min

Reducing cloud infrastructure waste through custom tools

Advanced user-built applications like cost optimizers demonstrate how visualizing infrastructure data leads to concrete business savings.

#13 about 4 min

Accessing developer documentation and open source repositories

The developer ecosystem provides documentation, community forums, and open-source template repositories to accelerate custom application building.

Matching moments

2:25 min

Origins and architectural capabilities of the React Native framework

Edoardo Dusi · LIVE

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann +2 · LIVE

1:50 min

Understanding the capabilities and value of reactive technologies

Niklas Heidloff · LIVE

5:05 min

Demonstrating Data API Builder with a React front end

Sander ten Brinke Sander ten Brinke · World Congress 2024

4:38 min

Introduction to react components, props, and state

Clemens Helm · World Congress 2023

2:45 min

Analyzing excessive context provider nesting in complex React applications

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
about 22 hours ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
2 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
9 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
14 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
15 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
22 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 9

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect at Leidos

David Morris
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 11:40–12:10

Stage 4

Taming Rogue Agents: Observability-Driven Evaluation for Production Reliability

Anagha Rumade, Anjana Umapathy, Apoorva Jaiswal

Anagha Rumade
Anjana Umapathy
Apoorva Jaiswal
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia

Related videos

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Challenges of building React and React Native apps thumbnail
24:10
World Congress 2022 • about 4 years ago

Challenges of building React and React Native apps

Milica Aleksic, Stefan Nikolic

Building Better Apps with React Native thumbnail
23:09
World Congress 2025 • about 1 year ago

Building Better Apps with React Native

Marc Rousavy

Hands-on React Native: From Zero to Hero thumbnail
39:42
LIVE • almost 5 years ago

Hands-on React Native: From Zero to Hero

Dmitry Vinnik

Rethinking React State Management: The Power of Built-In Solutions thumbnail
23:39
World Congress 2024 • about 2 years ago

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

Bringing back reactivity in "reactive" frontend thumbnail
28:43
World Congress 2024 • about 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.