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 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 Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
9 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days 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
18 days ago

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
23 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 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
30 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

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 • over 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.