Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad
From Author:
¿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?
This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.
FAQ
El equipo de Grafana decidió cambiar a React en 2018 porque el esfuerzo requerido para migrar a Angular 2 era comparable al necesario para cambiar a React, y React era preferido por el talento disponible.
React ha proporcionado a Grafana un vasto ecosistema de bibliotecas de terceros, optimizaciones de rendimiento y una mayor facilidad para recibir contribuciones de la comunidad al ser una biblioteca frontend muy popular.
Grafana utiliza una combinación de herramientas para la gestión del estado, incluyendo Redux, RxJS, Props y Context, entre otros, adaptándose a las necesidades específicas de su aplicación.
Uno de los principales desafíos ha sido la gestión del estado, dado que React no es un marco de trabajo completo como Angular. Además, los Hooks han presentado desafíos en cuanto a su complejidad y acoplamiento con el tiempo de ejecución de React.
Canvas es un nuevo tipo de panel en Grafana que permite crear diseños y interfaces de usuario personalizados. React, mediante el uso de una biblioteca de terceros llamada Movable, ayudó a acelerar el desarrollo de Canvas, alcanzando la fase beta meses antes de lo previsto.
Scenes es una biblioteca de tiempo de ejecución de paneles en Grafana que simplifica el proceso de desarrollo al eliminar la necesidad de conceptos como useEffects y useCallbacks, utilizando un modelo de estado que gestiona los efectos de montaje, lo que simplifica el desarrollo de componentes.
La filosofía BigTent de Grafana consiste en admitir lo más posible del ecosistema de observabilidad, proporcionando a los usuarios flexibilidad para visualizar sus datos desde diversas fuentes como Kubernetes, Raspberry Pi, servicios en la nube o incluso Google Sheets.
Video Transcription
1. Introducción al uso de React en Grafana
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
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
Workshops on related topic
Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Comments