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 · WWC 2024

4:38 min

Introduction to react components, props, and state

Clemens Helm · WWC 2023

2:45 min

Analyzing excessive context provider nesting in complex React applications

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

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

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths

Related videos

The Journey of a Pixel in a React Application thumbnail
27:01
WWC 2025 • 12 months ago

The Journey of a Pixel in a React Application

Shem Magnezi

Challenges of building React and React Native apps thumbnail
24:10
WWC 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
WWC 2025 • 12 months 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
WWC 2024 • almost 2 years ago

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

Marc Brehmer

Bringing back reactivity in "reactive" frontend thumbnail
28:43
WWC 2024 • almost 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.