React Conferences

React Summit 2023

React Summit 2023

English versionEN

Video: How Grafana Uses React to Power the World of Observability

Nathan Marrs

Read FAQ and transcription

grafana reactjs opentelemetry react observability case study error monitoring

Video Summary and Transcription

Grafana leverages React to enhance its open-source platform, offering a vast ecosystem and improved performance. The platform uses a combination of state management tools such as Redux, RxJS, Props, and Context to address the challenges posed by React's state management. Grafana supports a variety of data sources, providing flexibility in data visualization, which aligns with its BigTent philosophy. This philosophy allows for integration with sources like Kubernetes clusters, Raspberry Pis, cloud services, and even Google Sheets. React Hooks, despite their complexity, have been instrumental for developers. Grafana's new Scenes library aims to simplify development, eliminating the need for concepts like useEffects and useCallbacks. This development is part of Grafana's ongoing efforts to reduce the learning curve and improve the user experience. For those interested in Grafana JS and Grafana GraphQL, the platform continues to evolve, providing tools that cater to a wide range of user needs.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Available in Español: Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad

FAQ

Grafana's BigTent philosophy supports a broad observability ecosystem, providing users with flexibility in visualizing data from various sources like Kubernetes clusters, Raspberry Pis, cloud services, and Google Sheets.

Users interested in learning more about Grafana and its new Dashboard Runtime Library, Scenes, should check out the upcoming GrafanaCon conference.

Grafana has faced challenges with state management and the Hooks paradigm, including issues like stale closures and the need to understand React internals.

Grafana uses a mixture of state management tools including Redux, RxJS, Props, and Context, adapting them to fit specific problem spaces.

React's ecosystem, performance optimizations, and ubiquity have allowed Grafana to ship features faster, reduce technical debt, and facilitate community contributions.

No, initially Grafana used Angular. The team switched to React in 2018.

Grafana is an open-source platform that enables millions of users to visualize and analyze their data.

Nathan Mars is the tech lead of the data visualization squad at Grafana Labs.

Grafana switched to React because migrating to Angular 2 was as much effort as switching to React, and React was more appealing to talented developers.

Grafana is developing a new approach called Scenes, which simplifies the development process and reduces the learning curve for developers. Scenes eliminate the need for complicated concepts such as useEffects and useCallbacks.

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2023

24 min

Debugging JS

Top Content

Watch video: Debugging JS

Mark Erikson

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

web development javascript case study best practices debug

A Framework for Managing Technical Debt

TechLead Conference 2023

35 min

A Framework for Managing Technical Debt

Top Content

Alex Moldovan

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

developer challenges team productivity case study

Building a Voice-Enabled AI Assistant With Javascript

JSNation 2023

21 min

Building a Voice-Enabled AI Assistant With Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

artificial intelligence case study

A Practical Guide for Migrating to Server Components

React Advanced 2023

28 min

A Practical Guide for Migrating to Server Components

Top Content

Watch video: A Practical Guide for Migrating to Server Components

Fredrik Höglund

Fredrik Höglund

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react query react 18 react server components next.js react case study

Power Fixing React Performance Woes

React Advanced 2023

22 min

Power Fixing React Performance Woes

Top Content

Watch video: Power Fixing React Performance Woes

Josh Goldberg

Open Source enthusiast, TypeScript contributor, writing a book on Typescript

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

react performance case study

Monolith to Micro-Frontends

React Advanced 2022

22 min

Monolith to Micro-Frontends

Top Content

Ruben Casas

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

micro-frontends developer challenges micro frontends react case study

Workshops on related topic

Monitoring 101 for React Developers

React Advanced 2023

112 min

Monitoring 101 for React Developers

Top Content

WorkshopFree

Lazar Nikolov

Sarah Guthals

2 authors

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.

error monitoring

Building a Shopify App with React & Node

React Summit Remote Edition 2021

87 min

Building a Shopify App with React & Node

Top Content

WorkshopFree

Jennifer Gray

Hanna Chen

2 authors

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.

shopify with react e-commerce shopify case study

Build a chat room with Appwrite and React

JSNation 2022

41 min

Build a chat room with Appwrite and React

WorkshopFree

Wess Cope

API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!

web development react chat app case study realtime

Hard GraphQL Problems at Shopify

GraphQL Galaxy 2021

164 min

Hard GraphQL Problems at Shopify

WorkshopFree

Rebecca Friedman

Jonathan Baker

Alex Ackerman

Théo Ben Hassen

Greg MacWilliam

5 authors

At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.

graphql scalability case study

Build Modern Applications Using GraphQL and Javascript

Node Congress 2024

152 min

Build Modern Applications Using GraphQL and Javascript

Workshop

Emanuel Scirlet

Miguel Henriques

2 authors

Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.

graphql web development case study

How to Solve Real-World Problems with Remix

Remix Conf Europe 2022

195 min

How to Solve Real-World Problems with Remix

Workshop

Michael Carter

- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others

remix database validation error monitoring