Bibliotecas de múltiples frameworks con experiencias nativas utilizando React

Gracias por acompañarme hoy. Voy a hablar sobre cómo estamos construyendo bibliotecas multiplataforma utilizando exclusivamente React y brindando una experiencia superior para los desarrolladores en diferentes frameworks. En Sisense, estamos construyendo aplicaciones de inteligencia empresarial y nos enfocamos en incrustar análisis en todas partes, incluso para los desarrolladores.

Nuestro Composer's Decay, que construimos, tiene como objetivo abordar el mercado de desarrolladores donde cada uno tiene sus propias preferencias para construir sus aplicaciones con sus frameworks favoritos. El desafío es cómo llegar a más desarrolladores. Es bastante simple. Los desarrolladores tienen altos estándares para las bibliotecas de terceros. Quieren que sean simples. No quieren tener que consultar la documentación todo el tiempo. Quieren que sean comprensibles y sigan las mejores prácticas de su propio framework. Y, para llegar a esos desarrolladores, debemos cumplir con esas expectativas.

En resumen, el requisito es llegar a esos desarrolladores en diferentes frameworks y aprovechar nuestra fuerza laboral actual y futura, que es React, que sigue siendo fuerte en el mercado laboral. ¿Qué es una experiencia nativa? En React, conocemos claramente JSX, pero en Vue.js tenemos esta sintaxis de plantillas, y en Angular algo similar, ¿verdad? Eso básicamente se refiere a la parte de HTML. En la experiencia empresarial, React utiliza hooks, Vue utiliza algo similar pero lo llaman composables, y en Angular tienes algo llamado servicios. Claramente, tienen diferencias en la implementación de su lógica empresarial, pero debemos proporcionar la misma experiencia en todos esos frameworks mientras desarrollamos solo en React.

Nuestras estrategias de implementación, primero comenzamos cuando me uní a este esfuerzo, tuvimos una prueba de concepto (POC) con componentes web primero, construimos los componentes web utilizando un elemento principal, y luego probamos Stencil, y luego nos dimos cuenta de que necesitamos el puente para crear la experiencia nativa y asegurarnos de que sea robusta y escalable. Para llegar a esos frameworks, los componentes web no son tan fuertes en el entorno laboral, y nuestra organización no es tan competente en el desarrollo de componentes web, y descubrimos que los componentes web tenían algunas limitaciones en el momento de la investigación. Claramente, era una opción, pero no era tan robusta como esperábamos que fuera. Pero dado que de todos modos requerimos un puente, ¿por qué no usar React? ¿Por qué no construir todo en React y luego hacer algún puente mágico, con suerte con una línea de código si es posible? Entonces, la estrategia que se me ocurrió es que vamos a construir todo con React, tendremos pautas claras de cómo hacerlo, y luego conectaremos esto con el menor esfuerzo para que funcione con la mejor experiencia en diferentes frameworks.

Por supuesto, la elección de React se debe a su amplia comunidad, creo que conoces todos los puntos de venta, y también queremos reutilizar lo que ya tenemos en nuestra organización que ha estado utilizando React, y tenemos la fuerza laboral, y el mercado es fuerte como dije. ¿Qué tiene de especial el enfoque de React? Escribimos todos nuestros componentes, toda nuestra interfaz de usuario en React. Y la visión que he visto es que si puedo llamar a una función para renderizar los componentes de React internamente ocultos para los desarrolladores, al tiempo que les proporciono la experiencia superior a la que están acostumbrados en su propio framework, esto podría funcionar. Y lo que sé sobre React es que tenemos un punto de entrada donde todo lo que necesitamos es un elemento para montar React, el componente, las props y opcionalmente el contexto, y eso es todo lo que se requiere para renderizar una aplicación de React. Utilizo eso como base para implementar una solución. En la capa de puente, lo que estamos haciendo en la capa de puente, aquí hay un ejemplo de Angular. Básicamente, hemos creado una versión muy simple de ese punto de montaje llamado adaptador de componentes donde pasamos el componente de React, pasamos el contexto desde el sitio de Angular a través de su solución nativa que son los servicios, y tenemos una función que sabe cómo pasar los argumentos a una función createElement con el componente de React que deseamos renderizar, y luego solo aplicaremos esto cada vez que haya un gancho de ciclo de vida para cambios, simplemente llamamos a esa función. Básicamente, estamos volviendo a renderizar el componente de React dentro de Angular, y esto está completamente oculto para los desarrolladores. Esta es una implementación interna. El resultado final que obtienen se muestra a la derecha, como pueden ver, es un componente básico de Angular, sintaxis regular, y, por supuesto, en el lado empresarial, simplemente hacen las cosas regulares de Angular. Para que la lógica empresarial funcione, debemos asegurarnos de tener una abstracción completa. Por ejemplo, implementamos hooks en React, pero la lógica empresarial subyacente que está dentro del hook no es agnóstica del framework. Básicamente, podemos llamar esas funciones dentro de Angular y simplemente envolverlas y obtener los servicios o en los composables de Vue. Básicamente, servimos a todos de la manera que deseen. Un ejemplo de implementación del servicio de ejecución de consultas es básicamente llamar a la función executeQuery, que no es agnóstica del framework, y simplemente obtener la misma experiencia. Lo importante aquí es TypeScript. TypeScript es básicamente el ingrediente secreto para que esto funcione porque nuestro compromiso con las APIs, con el lado del desarrollador, es el mismo compromiso en todos los frameworks. Solo porque se sirva de manera diferente no significa que tengamos que cambiar las APIs.

En las notas finales, lo realmente importante es reutilizar por completo lo que estás construyendo dentro de tu organización. Una vez que lo reutilices en otros proyectos, básicamente eres tu propio desarrollador que te está dando a ti mismo comentarios, y siempre mantén esa biblioteca y debes tener el mismo compromiso interna y externamente, y así esta biblioteca funcionará muy bien. Eso es todo de mi parte. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias.