Cómo Grafana Usa React para Impulsar 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 aprovecha React para potenciar su ampliamente utilizada plataforma de código abierto que permite a millones de usuarios visualizar y analizar sus datos.

Comencemos con una historia. Grafana no siempre usó React. De hecho, primero usó Angular. En 2018, el equipo llegó a una encrucijada. O migrar a Angular 2 desde Angular 1 o considerar otras opciones. Finalmente, el equipo decidió cambiar a React ya que el esfuerzo no era muy diferente al que requería migrar a Angular 2 y React era con lo que las personas talentosas querían trabajar. Con la decisión tomada de cambiar a React, comenzó la inmensa migración. Esta es otra historia completamente, y aún está en curso.

Hoy, usamos React para potenciar todo el front end de Grafana desde los paneles hasta el explorador pasando por las 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 de hay una app para eso, pero, en su lugar, es hay una biblioteca de terceros para eso. Poder aprovechar este ecosistema nos ha permitido lanzar funciones más rápido y reducir la deuda técnica que poseemos. Por ejemplo, queríamos construir un nuevo tipo de panel llamado Canvas que permite crear diseños y UIs personalizados. Una biblioteca de terceros llamada Movable nos ayudó enormemente, llevándonos al estado beta meses antes de lo que de otro modo hubiéramos logrado. El rendimiento de React es otro beneficio que nos ha permitido escalar. Las optimizaciones de renderizado integradas, así como los componentes basados en clases deberían actualizar el componente y las matrices de dependencias de hooks, nos han facilitado optimizar el rendimiento de nuestro código y, en última instancia, proporcionar una gran experiencia de usuario.

Otro beneficio de usar 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 cuando se trata de la gestión del estado. React nunca ha afirmado ser un framework, a diferencia de Angular, por lo que la cuestión de cómo gestionar un estado de aplicación complejo mientras se usa React ha sido durante mucho tiempo abierta. Antes de context, estaba Redux. Antes de Redux, estaba el buen y viejo paso unidireccional de props. ¿Cuál ha sido el enfoque de Grafana para esto? Bueno, usarlos todos en una mezcla. 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, sentimos que un equipo debería usar una herramienta de gestión del estado que mejor se adapte a su espacio de problemas. La ambigüedad de qué solución usar es un problema clásico para las bibliotecas y plataformas versátiles y de código abierto.

Grafana itself has a BigTent philosophy, supporting as much of the observability ecosystem as possible. Esto proporciona a nuestros usuarios una gran cantidad de flexibilidad en la visualización de sus datos, sin importar cuál sea la fuente, ya sea desde su clúster de Kubernetes, Raspberry Pi, diferentes servicios en la nube, o incluso Google Sheets.

Al mismo tiempo, sin embargo, esto puede llevar a confusión por parte de nuestros usuarios finales al tratar de averiguar cómo construir la mejor solución de observabilidad para ellos mismos.

Otro desafío que hemos enfrentado con React es con el paradigma de Hooks. Algunos en Grafana han expresado su frustración con Hooks ya que introducen cierres obsoletos y requieren aprender y dominar las reglas de Hook. 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 enganchándote a los internos de React. Así que necesitas entender esos internos. Los Hooks están lejos de ser una abstracción funcional, ya que necesitas conocer los detalles internos de su implementación. Esto se vuelve aún más evidente cuando intentas probar un hook en aislamiento.

React ha seguido un paradigma de programación funcional. Y algunos temen que con la introducción de Hooks pueda estar desviándose de ese paradigma y entrando en el territorio de los frameworks. Aunque algunos en Grafana han expresado preocupaciones con los Hooks, es importante notar que han sido una herramienta poderosa para nuestros desarrolladores. Como con cualquier herramienta, puede haber una curva de aprendizaje, pero una vez dominada, 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 traído a nuestro flujo de trabajo de desarrollo y continuamos explorando nuevas formas de mejorar nuestras herramientas y procesos.

Dicho esto, estamos emocionados de anunciar nuestro nuevo enfoque para construir nuestra biblioteca de tiempo de ejecución de paneles de próxima generación, Scenes. Hemos tomado 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 canaliza las devoluciones de llamada de nuevo 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, haciendo que el proceso de desarrollo sea más intuitivo y eficiente. Estamos seguros de que nuestra nueva biblioteca será un cambio de juego para nuestros desarrolladores y creemos que este enfoque simplificado llevará 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 una libertad para considerar una miríada de opciones de gestión de estado y elegir la que tenga más sentido. De cara al futuro, es importante reconocer que como comunidad de código abierto, tenemos opciones. Cuando una herramienta deja de resolver el problema para el que la contratamos, podemos desecharla y probar una nueva. React no se aleja de esto, y tampoco Grafana. Pero por ahora, estamos contentos con nuestra decisión de cambiar a React, y continuaremos usándola mientras tenga sentido hacerlo. Si estás interesado en aprender más sobre Grafana y nuestra nueva biblioteca de tiempo de ejecución de paneles themes, por favor revisa la próxima conferencia GrafanaCon.