Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad

Rate this content
Bookmark
Slides

¿Por qué Grafana utiliza React para su frontend?
Cómo aprovechamos las características de React en Grafana
¿Cuáles son algunos puntos problemáticos que hemos encontrado al usar React en Grafana?
¿Cuáles son las lecciones aprendidas de adoptar React durante los últimos 5+ años?

7 min
06 Jun, 2023

Video Summary and Transcription

Grafana utiliza React para potenciar su plataforma de código abierto, aprovechando su vasto ecosistema, rendimiento mejorado y contribuciones de la comunidad. La elección de la herramienta de gestión de estado depende del espacio de problemas del equipo. Los React Hooks han presentado desafíos pero también han sido una herramienta poderosa para los desarrolladores. La nueva biblioteca Scenes simplifica el desarrollo y reduce la curva de aprendizaje. A pesar de los desafíos, React sigue siendo una herramienta poderosa para frontends complejos, y Grafana continuará utilizándola.

Available in English

1. Introducción al uso de React en Grafana

Short description:

Hola, soy Nathan Mars, el líder técnico en Grafana Labs. Grafana utiliza React para impulsar su plataforma de código abierto, brindando beneficios como un vasto ecosistema, mejor rendimiento y contribuciones de la comunidad. Sin embargo, la gestión del estado en React ha planteado desafíos, lo que llevó a Grafana a utilizar una combinación de Redux, RxJS, Props y Context. La elección de la herramienta de gestión del estado depende del espacio de problemas del equipo.

Hola, mi nombre es Nathan Mars y soy el líder técnico del equipo de visualización de datos en Grafana Labs. Hoy, estoy emocionado de compartir con ustedes cómo Grafana utiliza React para impulsar su plataforma de código abierto ampliamente utilizada que permite a millones de usuarios visualizar y analizar sus datos.

Comencemos con una historia. Grafana no siempre utilizó React. De hecho, primero utilizó Angular. En 2018, el equipo se encontró en una encrucijada. Debían migrar a Angular 2 desde Angular 1 o considerar otras opciones. En última instancia, el equipo decidió cambiar a React, ya que el esfuerzo no era demasiado diferente al requerido para migrar a Angular 2 y React era lo que las personas talentosas querían utilizar. Con la decisión tomada de cambiar a React, comenzó la inmensa migración. Esta es otra historia por completo y aún está en curso.

Hoy en día, utilizamos React para impulsar todo el frontend de Grafana, desde paneles hasta exploradores, alertas y mucho más. React nos ha proporcionado algunos beneficios significativos. En primer lugar, el ecosistema de React es inmenso. Es casi al mismo nivel que hay una aplicación para eso, pero en su lugar, hay una biblioteca de terceros para eso. Poder aprovechar este ecosistema nos ha permitido enviar características más rápido y reducir la deuda técnica que tenemos. Por ejemplo, queríamos construir un nuevo tipo de panel llamado Canvas que permitiera crear diseños y interfaces de usuario personalizados. Una biblioteca de terceros llamada Movable nos ayudó enormemente, permitiéndonos llegar a la fase beta meses antes de lo que lo hubiéramos hecho de otra manera. El rendimiento de React es otro beneficio que nos ha permitido escalar. Las optimizaciones de renderizado incorporadas, así como los componentes basados en clases y los arreglos de dependencias de los hooks, nos han facilitado la optimización del rendimiento de nuestro código y, en última instancia, brindar una gran experiencia de usuario.

Otro beneficio de utilizar React es su ubicuidad. Como Grafana es de código abierto, estar basado en la biblioteca frontend más popular ha ayudado a facilitar las contribuciones de la comunidad a Grafana. Sin embargo, Grafana también ha experimentado algunos desafíos con React, especialmente en lo que respecta a la gestión del estado. React nunca ha afirmado ser un marco de trabajo, a diferencia de Angular, por lo que la pregunta de cómo gestionar un estado de aplicación complejo mientras se utiliza React ha estado abierta durante mucho tiempo. Antes de Context, estaba Redux. Antes de Redux, estaba la buena y vieja transmisión unidireccional de props. ¿Cuál ha sido el enfoque de Grafana en esto? Bueno, utilizarlos todos en una combinación. Desde Redux, RxJS, Props y Context, y más. A medida que Grafana madura, aún está por verse si este enfoque es sostenible. En general, creemos que un equipo debe utilizar una herramienta de gestión del estado que se ajuste mejor a su espacio de problemas. La ambigüedad sobre qué solución utilizar es un problema clásico para bibliotecas y plataformas versátiles y de código abierto.

2. Uso de React en Grafana y desafíos con Hooks

Short description:

Grafana admite una amplia gama de fuentes de datos y tiene como objetivo proporcionar flexibilidad en la visualización de datos. Sin embargo, esto puede generar confusión para los usuarios al encontrar la mejor solución. Los React Hooks han planteado desafíos, pero también han sido una herramienta poderosa para los desarrolladores. Grafana se complace en anunciar la nueva biblioteca Scenes, que simplifica el desarrollo y reduce la curva de aprendizaje. A pesar de los desafíos, React sigue siendo una herramienta poderosa para frontends complejos y Grafana continuará utilizándola.

Grafana en sí tiene una filosofía BigTent, admitiendo tanto como sea posible del ecosistema de observabilidad. Esto proporciona a nuestros usuarios una gran flexibilidad en la visualización de sus datos, sin importar la fuente, ya sea su clúster de Kubernetes, Raspberry Pi, diferentes servicios en la nube o incluso Google Sheets.

Al mismo tiempo, esto puede generar confusión para nuestros usuarios finales al tratar de construir la mejor solución de observabilidad para ellos mismos.

Otro desafío al que nos hemos enfrentado con React es el paradigma de los Hooks. Algunos en Grafana han expresado su frustración con los Hooks, ya que introducen cierres obsoletos y requieren aprender y dominar las reglas de los Hooks. Los componentes funcionales, como se les llama, rara vez son funciones puras. Los Hooks también introducen un acoplamiento mucho más fuerte con el tiempo de ejecución de React que antes. El nombre Hook indica esto. Estás enganchado a las partes internas de React. Por lo tanto, debes entender esas partes internas. Los Hooks están lejos de ser una abstracción funcional, ya que debes conocer los detalles internos de su implementación. Esto se vuelve aún más evidente cuando intentas probar un Hook de forma aislada.

React ha seguido un paradigma de programación funcional. Y algunos temen que con la introducción de los Hooks, se esté alejando de ese paradigma y entrando en el terreno de los marcos de trabajo. Aunque algunos en Grafana han expresado preocupaciones con los Hooks, es importante tener en cuenta que han sido una herramienta poderosa para nuestros desarrolladores. Como con cualquier herramienta, puede haber una curva de aprendizaje, pero una vez dominados, pueden mejorar enormemente el proceso de desarrollo. En Grafana, reconocemos la importancia de explorar y experimentar con nuevas herramientas y metodologías para mejorar continuamente nuestros procesos de desarrollo. Apreciamos los beneficios que los Hooks han aportado a nuestro flujo de trabajo de desarrollo y continuamos explorando nuevas formas de mejorar nuestras herramientas y procesos.

Dicho esto, nos complace anunciar nuestro nuevo enfoque para construir nuestra biblioteca de tiempo de ejecución de paneles de próxima generación, Scenes. Hemos adoptado un enfoque diferente que simplifica el proceso de desarrollo y reduce la curva de aprendizaje para nuestros desarrolladores. Con Scenes, cada componente se suscribe al estado construido con ArcGIS, renderiza el marcado y envía devoluciones de llamada al modelo de estado. Hemos eliminado la necesidad de conceptos complicados como useEffects y useCallbacks. El modelo de estado se encarga de cualquier efecto de montaje necesario, lo que hace que el proceso de desarrollo sea más intuitivo y eficiente. Confiamos en que nuestra nueva biblioteca será un cambio de juego para nuestros desarrolladores y creemos que este enfoque simplificado conducirá a una experiencia de desarrollo más positiva. Aunque la biblioteca aún está en sus primeras etapas de desarrollo, estamos emocionados de ver cómo continuará evolucionando y mejorando la forma en que construimos nuestros paneles.

A pesar de nuestros desafíos, creemos que React es una herramienta poderosa para resolver el problema de implementar y mantener frontends complejos. La sutileza estructural es clave, y con ella hay libertad para considerar una variedad de opciones de gestión de estado y elegir la que tenga más sentido. Mirando hacia el futuro, es importante reconocer que como comunidad de código abierto, tenemos opciones. Cuando una herramienta deja de resolver el problema por el que la contratamos, podemos descartarla y probar una nueva. React no se queda atrás en esto, y tampoco lo hace Grafana. Pero por ahora, estamos contentos con nuestra decisión de cambiar a React y continuaremos usándolo mientras tenga sentido. Si estás interesado en obtener más información sobre Grafana y nuestras nuevas bibliotecas de tiempo de ejecución de paneles, consulta la próxima conferencia GrafanaCon. ¡Gracias por escuchar, espero que hayas encontrado valor en esta charla!

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- 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
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
WorkshopFree
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.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
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.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
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!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
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.