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

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.

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!