Simplifying Analytics in React Apps

Como él dijo, el tema que estoy presentando hoy es la simplificación de análisis en aplicaciones React. Oh, dificultades técnicas, lo siento. Un segundo. Bien, estamos de vuelta.

Bien, quiero hablarles sobre un proceso reciente que hemos pasado aquí en Sisense. Así que soy un ingeniero de soluciones aquí en Sisense, y, para aquellos que no lo saben, quiero decir, algunos de ustedes lo han llamado cSense y cada variación del nombre, pero en Sisense somos una plataforma de BI de pila completa. Y una de las cosas que queríamos hacer era abrirla para que los desarrolladores pudieran involucrarse un poco más en el BI, lo cual ha sido un cambio bastante grande.

Así que lo que quiero hablarles un poco hoy es cómo podemos construir análisis integrados para desarrolladores. Y eso significa usar lenguajes comunes que todos ustedes están acostumbrados, como JavaScript, TypeScript, todos los SDK modernos que pueden habilitar análisis personalizables y poderosos, directamente en sus aplicaciones React. Y al reducir la complejidad del backend, podemos permitir que los desarrolladores prioricen la construcción de interfaces de usuario dinámicas y ricas en datos sin la molestia de gestionar toda la infraestructura que tradicionalmente viene con eso.

Así que exponiendo el problema a ustedes, como dije, las plataformas de BI no necesariamente ofrecieron el nivel de personalización requerido para algunas de las aplicaciones de análisis de hoy. No estoy seguro si ustedes han usado plataformas de BI, Tableau, Power BI, hay un millón de ellas hoy en día, pero la mayoría de ellas no son increíblemente personalizables. Debido a que Sisense se ha movido a este espacio más integrado, una de las cosas que queremos hacer es realmente permitir, como dije, que nuestros desarrolladores puedan usar los lenguajes a los que están acostumbrados y puedan personalizar cómo puede ser una experiencia de BI. Así que básicamente, el pensamiento que inició esto fue, ¿podemos usar React para crear un SDK poderoso capaz de reemplazar el frontend de una herramienta de BI?

Así que los requisitos que ideamos para crear este SDK vienen en tres pasos simples. Construir una capa semántica, algo que describa los datos y nos dé un contexto para trabajar. Construir algunos componentes reutilizables, en este caso en React, y luego hacer algunas cosas interesantes con él.

Así que entrando en la capa semántica. En Sisense, tenemos nuestro propio editor de cómo podemos unir tablas, unirlas, y describir las relaciones entre los datos. Pero esto podría ser fácilmente cualquier otra solución que ustedes estén usando actualmente, un DBT, cualquier otra herramienta semántica. Pero la idea es que al simplificar el modelo de datos y darle contexto, podemos alimentarlo a otras soluciones que permitirán a los desarrolladores trabajar fácilmente con él. Así que avanzando una diapositiva más. Lo que hicimos fue construir un generador realmente simple, básicamente, que tomaría las uniones que acabamos de ver en ese modelo de datos previamente y nos permitiría generar una representación en TypeScript de ese modelo de datos. Así que aquí a la derecha, en el muy tal vez pequeño, tal vez grande, no puedo decir, tipo de fragmento de código allí, básicamente solo tenemos una representación simple de cómo se ve ese modelo de datos. En este caso, solo estamos usando los nombres del modelo de datos, las tablas, las columnas, los tipos de datos. Podríamos incluir algunas fórmulas adicionales y cosas así. Pero esto podría ser fácilmente extensible para también agregar cosas como un diccionario de datos o contexto adicional que desearían que sus desarrolladores tuvieran dentro de la aplicación. Y luego, una vez que tenemos eso construido, ahora podemos comenzar a construir componentes React directamente a partir de eso. Así que básicamente, porque Sisense tiene ese motor de traducción, realmente podemos simplificar las líneas de código para que un desarrollador ahora haga referencia a ese modelo que tenemos. Así que Sisense básicamente trae la caja negra de cómo hacemos la autenticación de usuarios, cómo aplicamos la seguridad a nivel de fila, solo cientos de APIs que te permiten hacer alguna personalización y abstraer básicamente cómo puedes construir estos productos de datos. Así que mirando este pequeño fragmento de código que tenemos aquí, solo estamos especificando que queremos un gráfico de líneas.

Va a un modelo de datos llamado datasource, y puedes ver que ahora tenemos esas referencias que muestran nuestras tablas. Así que nuestra tabla de comercio, un par de cosas adicionales agradables para la calidad de vida serían tal vez la fecha que podemos segmentar fácilmente en diferentes áreas, cosas así.

También permite una interfaz de usuario realmente simple. Así que trabajando de la misma manera exacta, las consultas para recuperar cosas como filtros de miembros o filtros de fecha ahora se pueden hacer en unas pocas líneas de código en lugar de requerir que un desarrollador haga cualquier consulta por sí mismo. Así que la razón es que hace que las cosas sean increíblemente fáciles de implementar. Permite cosas como el filtrado cruzado, el desglose, medidas y dimensiones interactivas para incluso habilitar cosas como el autoservicio, y elimina completamente la necesidad de que los ingenieros de front-end necesariamente tengan que escribir llamadas a la API de SQL. Podemos dejar toda la lógica en una plataforma de BI muy fácil e intuitiva y luego permitir que nuestros usuarios construyan su propio front-end exactamente como lo imaginan.

Así que aquí hay algunas cosas interesantes que nuestro equipo ha hecho con esto últimamente. Así que en un caso, tuvimos un hackathon internamente, y mi equipo de liderazgo originalmente dijo, oh, te daremos un par de semanas para construir algo, pero luego, de manera clásica, tan pronto como apareció el hackathon, me pidieron que lo hiciera en tres días en su lugar. Y así tomé una plantilla de React. Trabajé con otro chico llamado Steve. Le pedí que hiciera la parte del modelo de datos, y básicamente mi trabajo era solo hacer el front-end. Y mi experiencia como ingeniero de software ayudó un poco en este caso, pero la idea era que pudimos construir una aplicación casi lista para producción, en este caso usando una plantilla, mientras que Sisense impulsaría toda la experiencia, toda la interactividad, todas las características que tenemos en esa plataforma de BI, pero ahora en un envoltorio de front-end completamente personalizado.

Y luego hacia dónde vamos con esto, ahora que hemos simplificado este sistema, tenemos una comprensión fácil de la capa semántica del modelo de datos que es referenciable directamente dentro del código, es que ahora podemos comenzar a usar las increíbles tecnologías de modelos de lenguaje grande que probablemente han visto todo el día de hoy. Porque tenemos esa interfaz de objeto fácil para manipular las consultas, las dimensiones, las medidas, etcétera, ahora podemos tener un chatbot que realmente cree estos componentes, lo cual no estoy seguro de cómo se ve este GIF aquí arriba. En realidad, mucho mejor de lo que pensaba. Pero la idea es que ahora puede hacer preguntas para generar visualizaciones, crear componentes, cambiar el tipo de visualización, o incluso diseñar diseños completos de paneles a través de un enfoque conversacional también.

Y así, solo algunas notas finales para ustedes. Como dije, la idea de esto era que queríamos simplemente hacer una forma sencilla de acceder a los datos en un marco que reduce la habilidad requerida para construir productos de datos complejos. Permite a los desarrolladores moverse mucho más rápido, y abre métodos alternativos tanto para generar objetos de React como para hacerlos interactivos. Pero muchas gracias por escucharme.