Uso de Micro-Frontends Basados en Módulos ES para Habilitar el Desarrollo Distribuido

Buenos días a todos. Con esa cantidad de videos sobre JPMorgan, no hay presión para hacer esto hoy. Así que, como dije, mi nombre es Steve, y estoy aquí para hablar un poco sobre cómo estamos utilizando tecnologías web modernas, JP, cosas como ES modules donde podemos usarlos para resolver problemas antiguos problemas, problemas como cómo ejecutamos múltiples aplicaciones que han sido construidas y desplegadas independientemente unas de otras en aplicaciones tipo portal de contenedor único.

Así que un poco sobre mí. He estado trabajando en y alrededor del espacio fintech durante unos 20 años, y he tenido el privilegio de ver crecer las tecnologías de UI durante ese tiempo. Y ahora que estoy con JP Morgan, en realidad ya no soy un desarrollador principal. Pero ahora puedo trabajar con desarrolladores para armar nuestra oferta de código abierto. Tenemos dos cosas de las que voy a hablar hoy. Una es el UITK, que es una biblioteca de componentes de React que usamos para estandarizar la forma en que sus aplicaciones se ven y se sienten. Y Modular, que es una herramienta de gestión de monorepositorios con opiniones. Y en realidad ambos están en nuestro Github público, si quieren verlos. Y apreciamos las pull requests.

Así que los tipos de lugares en los que he trabajado antes, dije que siempre es en Fintech. Algunas de esas organizaciones son realmente pequeñas. Cuando llegué a JP Morgan el año pasado, no tenía una idea real de la escala que iba a enfrentar. Tenemos en todo el banco en su conjunto 50,000 desarrolladores, creo. 18,000 de los cuales están en nuestra división. Y estamos desplegando alrededor de 5,800 aplicaciones en uno de nuestros tipos de contenedores, que es un contenedor de escritorio. 2,000 de esos están en producción. Atienden a unos 200,000 usuarios diarios. Hay cientos de despliegues ocurriendo todos los días. Tenemos este problema de desarrollo realmente distribuido. O alegría, dependiendo de cómo lo mires. El desarrollo distribuido significa que tenemos muchos equipos de desarrollo. Todos trabajan de manera independiente. Están facultados para tomar sus propias decisiones sobre cómo van a construir sus aplicaciones, cómo van a desplegarlas, y más recientemente, con qué frecuencia las despliegan. ¿Por qué están realmente enviando código? Pero mirándolo desde un punto de vista organizacional, ¿cuál es la experiencia del desarrollador de ese modelo de desarrollo distribuido? Bueno, cada equipo de desarrollo tiene que resolver los mismos problemas. Todos van a necesitar tener alguna forma de integración continua. Todos van a necesitar despliegue continuo, y todos van a tener la misma necesidad de aplicar aseguramiento de la calidad. Así que van a necesitar herramientas de prueba. Van a necesitar elegir los mismos productos para hacer sus pruebas.

Y luego, porque todos estamos bajo el mismo paraguas de marca, vamos a necesitar tener el mismo lenguaje de diseño. Entonces, ¿cómo añadimos esa consistencia a las aplicaciones que estamos desplegando? Teniendo en cuenta que hay miles de ellas siendo lanzadas. Así que cuando las aplicaciones también salen, van a necesitar resolver el mismo tipo de problemas. Necesitamos saber cómo van a autenticar a sus usuarios, cómo los autorizan para usar las aplicaciones. Y porque queremos tener las mismas experiencias de usuario enriquecidas, estamos pensando en cómo vas a poder compartir los diseños que has creado, cómo vas a compartir el acceso a tus aplicaciones. Lo cual implica que tienes el mismo tipo de comprensión de tener un sistema de preferencias. Cómo vas a almacenar y persistir los datos del usuario.

Entonces, ¿cuál fue nuestra solución para eso? Nuestra solución está en la ingeniería de UI. Tenemos lo que llamamos la Digital Platform, que es un poco como un proveedor de Jamstack dentro del banco. Así que ya he mencionado que tenemos un contenedor de escritorio, pero también tenemos formas de distribuir nuestras aplicaciones móviles y web. Lo llamamos Omnichannel, pero también ofrecemos más un servicio de DevOps. Así que tenemos cosas como integración continua, en realidad está basado en Jenkins. Tenemos despliegue continuo que está basado en Amazon S3. Y también proporcionamos como un registro centralizado de aplicaciones y ahí es donde nuestros desarrolladores envían las versiones de su código para que podamos determinar cuáles estarán disponibles en producción. Y más importante, cuando necesitamos revertir cosas, simplifica nuestros procesos. Y luego, probablemente más relevante para hoy y de lo que voy a hablar más tarde es que tenemos un sistema de diseño. Así que en realidad, es un sistema de diseño con accesibilidad primero que tiene una biblioteca de componentes basada en React. Hemos estado adoptando componentes web y permitiendo el uso de Angular. Se tomó una decisión hace un par de años de que íbamos a centrarnos en React. Así que en realidad tenemos una nueva versión de la biblioteca de React en desarrollo en este momento. Se lanzará bastante pronto. Siéntanse libres de ir a echarle un vistazo en nuestro GitHub. Y luego, más finalmente, el modular, que es una herramienta de gestión de monorepositorios con opiniones. Tiene algunas características que mostraré hoy, pero es similar a create-react-app y luego una opinión sobre las herramientas de desarrollo que se utilizan para construir las aplicaciones en sí.

Así que tenemos un contenedor de escritorio. Los desarrolladores, cuando crean aplicaciones, las envían a través de nuestra infraestructura de despliegue continuo y le dicen al contenedor de escritorio, que es una aplicación basada en Electron, dónde obtener las URLs. Cuando entregamos un portal web, ¿cuál es la expectativa de experiencia del usuario? En realidad, es casi la misma que en el escritorio. Los usuarios aún quieren tener una forma única de lanzar aplicaciones. Quieren tener una apariencia y sensación consistentes en las aplicaciones que están cargando, y quieren poder usar sus aplicaciones en todos los navegadores modernos. Históricamente, eso podría haber significado usar iframes para cargar aplicaciones juntas, lo cual vendría con los inconvenientes habituales de tener muchas, potencialmente muchas, instancias de frameworks siendo cargadas en una aplicación, en una ventana de navegador web.

El uso de la memoria, las cosas se vuelven complicadas. No puedes compartir o compartir fácilmente CSS y temas entre las diversas aplicaciones que has cargado. Entonces, ¿cuál fue nuestra solución? Bueno, mencioné que estamos usando tecnologías modernas, así que ahora nos estamos enfocando en tener micro front-ends. Los micro front-ends que estamos considerando dependen de ES modules para dividir las aplicaciones y cargarlas dinámicamente. Y la biblioteca React que hemos creado utiliza CSS variables para compartir temas entre las diversas aplicaciones que podrías estar cargando.

Viene con muchos beneficios. Cosas como, si estás usando ES modules, la forma en que transpilaremos nuestras aplicaciones es tomando el código fuente, usualmente en TypeScript, reescribiendo importaciones que están en tu propia aplicación para empaquetar el código de tu aplicación por separado, y luego reescribir todas tus dependencias externas en un CDN. Usamos un CDN de código abierto para ES modules, ESM.SH, échale un vistazo, es genial, pero también podrías estar usando Skypack. De hecho, tenemos versiones internas de estos que son capaces de acceder y transpilar nuestros módulos node Commons.js existentes en nuestro registro interno a ES modules. En caso de que no estés familiarizado, ES modules, un estándar actual y moderno de crear JavaScript en su forma más simple, probablemente ya estés usándolos en TypeScript, y es una forma conveniente de simplemente tener tus importaciones y exportaciones en tu código después de que ha sido transpilado a JavaScript.

La otra cosa es que tenemos un contenedor de aplicaciones web. Dejamos de soportar Internet Explorer en el último año más o menos. Realmente no lamentamos su pérdida, porque significa que ahora podemos usar navegadores evergreen, todos los cuales son capaces de soportar la carga dinámica de importaciones en JavaScript sin necesidad de ningún plugin.

Bien, entonces, construyendo un micro frontend. Eso fueron muchas palabras de mi parte. Es hora de la demostración en vivo, que obviamente nunca sale mal, así que por favor tengan paciencia conmigo.

Entonces, he mencionado, oh, bien. He mencionado modular. Tiene una forma de crear aplicaciones. Está basado de manera muy similar a tu create React app, sin embargo, lo que estamos viendo aquí, voy a usar un, este es un monorepo mínimo. Tiene un par de paquetes hasta ahora. Un paquete es simplemente un servidor express que, simulando el registro de aplicaciones del que hablé antes, va a servir nuestro contenido construido, para que puedas ver la demostración. Y también tenemos un ejemplo de cómo crearías una aplicación host.

Ahora, create React app podría servir estos componentes, así que se ve muy similar a lo normal, usando Webpack y Webpack dev server. Recientemente, cambiamos a Webpack 5 y añadimos soporte para ES build. Con ES build, en lugar de generar un bundle commons.js, ahora estamos creando un bundle ES module. Entonces, lo que voy a hacer aquí es ejecutar un comando rápido para, ahí vamos, para iniciar como un servidor express. También va a iniciar un Webpack dev server que construye esta aplicación host. Debería, ahí vamos, bien. Va a cargar muy lentamente en localhost. Mi aplicación, asumiremos que ese es el caso. Volveré a ello.

Entonces, después de eso, otras cosas que tiene modular. Ahora, mencioné esta entrega de desarrollo a escala. A escala, a menudo tenemos la necesidad de crear nuevas aplicaciones y esas nuevas aplicaciones se crean a partir de plantillas. Así que, modular tiene una característica que puede usar plantillas basadas en, que vienen directamente de NPM o desde dentro de tus repositorios. Así que, voy a usarlas, vienen de mi repositorio. Así que, voy a añadir un nuevo módulo a mi monorepo. Voy a mirar la tarjeta. Ah, estoy, ahí vamos, no puedo escribir con gente mirándome. Así que, trayendo comandos de modular para añadir un nuevo paquete a mi plantilla, he creado algunas plantillas ya, pero solo para que puedas ver cómo se añaden. ¿Por qué estoy pasando por esto? Las plantillas que añadimos son en realidad, todas pueden ejecutarse como aplicaciones independientes. Así que en la vista de código, ahora tengo una nueva aplicación.

No hace mucho. Afortunadamente, no usa useReact, sino useEffect. Oh, lo hace, ¿es eso efectivo? Tal vez, está bien, así que finge que no has visto mis useEffects, dije que ya no hago código para ganarme la vida, y ahora que eso ha creado un nuevo paquete, puedo realmente empezar esto por mí mismo. Voy a empezar a usar un nuevo puerto.

Así que digamos que voy a ejecutar esta aplicación. Entonces, lo que esto está proxying es si un desarrollador está creando la aplicación para sí mismo, entonces, ¿se cargó la antigua? ¿Hola? ¿Hola? Ahí vamos. Estos sí se cargan. Oh, bueno. Si no se carga, solo voy a hablar un poco más y luego te mostraré el video porque las demostraciones en vivo hacen eso. Bien. Bien. De todos modos, asume que puedes renderizar esos. No importa. 3000, 2001. Sabes, nunca he visto create React app simplemente detenerse. Bien, sabía que no debería haber intentado hacer una demostración en vivo.

Está bien, así que continuaré por ahora, y luego te mostraré el video y será increíble. Voy a añadir otro. Está bien, así que intentándolo de nuevo. Entonces, lo siguiente, voy a tener que simplemente hablar. ¿Empieza? Bien. Bien, bien. ¿Quién querría que funcionara directamente desde la caja, eh? Así que, no importa. Está bien, ¿de qué voy a hablar? Así que la idea es que tenemos esta vista de tarjeta. En realidad, se renderizan como aplicaciones independientes que puedes yarn. Lo siento, puedes empezar con Webpack DevServer. El siguiente paso es, habiendo creado un par de paquetes, que puedo mostrarlos funcionando juntos. Entonces, lo siguiente, necesitaría construirlos. Ahora, la diferencia en el proceso de construcción es que al ejecutar a través de esbuild, estamos, ah. Al ejecutar a través de esbuild, en realidad creamos un módulo ES, que es un solo archivo que luego se puede enviar a un CDN.

En el ejemplo que tengo aquí, en realidad se ejecuta como un servidor local, y veamos si ha hecho magia a través de ha hecho magia a través de internet. Bueno, resulta que no estoy en línea. Es una pena. Porque lo he estilizado desde que creé este video. Decepcionante. Bueno, puedes ver lo que estaba haciendo ayer. Así que asume que esto se está ejecutando en vivo.

Voy a ver por qué mis módulos no se están obteniendo de internet y tal vez si vienes a buscarme, puedo mostrarte una versión real en funcionamiento de esto como puedes obtener de todos los videos. Tenemos un stand al frente. Estaré allí más tarde con una versión en funcionamiento. Pero voy a mostrarte la versión simulada en su lugar.

Así que aquí tenemos la misma ventana de código donde hice un yarn serve. Esto va a iniciar mi servidor node que es como el proxy para nuestro registro de aplicaciones y configura una create React app. No hay nada en la pantalla hasta ahora porque lo que necesito hacer es añadir uno de esos componentes. Así que esto te muestra cómo construí uno de esos, ejecuta a través de ES build, y al ejecutar a través de ES build, genera mi módulo ES, que luego se coloca en el CDM. Puedes ver aquí, si lo hemos obtenido usando nuestro portal, en realidad eso es algo que puedo mostrarte, este es un archivo JavaScript que se carga dinámicamente.

¿Cómo hicimos eso? En el paquete host, creé una vista remota. La vista remota es en realidad, es un componente muy simple que solo obtiene un módulo de una URL. Ese módulo, obviamente comparte su estado a través de un contexto para asegurar que no intentemos cargar estos módulos múltiples veces. Aquí puedes ver cómo estamos cargando realmente la vista remota. Esa carga está usando, es todo JavaScript que se ejecuta de forma nativa en el navegador. No necesitamos ningún plugin para hacer esto. Simplemente tenemos una obtención de nuestro manifiesto. En realidad usamos package JSON para definir el contenido que describe el módulo. Usamos eso, en realidad puedo mostrarte uno de esos, usamos eso para describir cómo se ha construido el módulo. Así que puedes ver incluyendo algunos paquetes, ese es nuestro sistema de diseño. Pero también, ¿dónde está la salida del JavaScript y el CSS? Esos luego serán usados por esta vista remota para decir, cuando obtenemos ese package JSON, entonces sabemos si tenemos una hoja de estilo, podemos insertarla en el HTML. Eso puede no ser la mejor manera de hacerlo, pero funcionó. Y si tenemos un manifiesto, ahora este es donde hemos puesto el JavaScript. Así que ve ese import dinámico? Eso es compatible de forma nativa en todos los navegadores.

Si estás ejecutando esto a través de Webpack, necesitarás una pequeña salida de emergencia, porque Webpack intentará evaluar la declaración de importación por ti. Pero sabiendo que hemos hecho una importación dinámica en el navegador, eso en realidad nos da el contenido predeterminado evaluado del paquete en sí. Así que sabemos que esos van a ser vistas para nosotros. Así que simplemente usamos esa vista como un constructor de componentes y podemos incluirlo en el TypeScript TSX.

Estoy presumiendo que todavía no me he conectado en línea. OK. Así que el siguiente paso es que puedo agregar más. Puedo agregar más componentes a esto, construyéndolos independientemente unos de otros. Y luego podemos usar el portal, simplemente porque hace carga dinámica. El portal se despliega independientemente de las aplicaciones que contiene. Y luego pueden, en realidad, en mi demostración real en funcionamiento, estaba tan orgulloso, tengo la cuadrícula y la tarjeta hablando entre sí. Pero ahí vamos. Hay un ejemplo que puedo compartir que muestra esto en funcionamiento. Es algo muy simple de poner en marcha. Creo que eso fue yo acercándome al tiempo. Así que me quedaba por decir que tenemos, al cargar los módulos en el mismo árbol de React, podemos beneficiarnos de cosas como el intercambio de módulos, el intercambio de dependencias, especialmente si tienes dependencias con estado. En realidad comparten la misma instancia. Así que tenemos un sistema de recomendación para que nuestros desarrolladores de aplicaciones fijen al menos React a la misma versión, que simplemente usa el objeto de resoluciones en un package.json que luego usamos la misma versión de React en todas nuestras aplicaciones. Y sí, así que nuestras construcciones son más rápidas porque solo tenemos que construir y transpilar nuestro propio código de aplicación. Reducen el tamaño del archivo que estamos almacenando en nuestro CDN. Se cargan más rápido en el navegador porque comparten dependencias entre ellos. Y sí, estoy realmente emocionado de que podamos usar tecnología moderna para resolver problemas que han existido durante mucho tiempo. Así que disculpas si la demostración no funcionó muy bien. Pero honestamente, ven a verme más tarde y en realidad funciona. Genial. Gracias. Gracias. Gracias. Oh, qué placer. Por favor, mi querido, toma asiento.

Gracias. Vamos a hablar un poco sobre modular, lo cual es una gran alegría para mí. Primero que nada, buen trabajo al tener un video de respaldo que es un consejo de orador profesional porque el Wi-Fi de las conferencias generalmente no es bueno porque hay cientos de ustedes. Así que buen trabajo. Uf. Lo sé.

Ya tenemos un par de preguntas en el Slido. Recuerden, slide.do y el código es 2124. Vamos a lo en vivo. ¿Cómo gestionan los despliegues de estas aplicaciones distribuidas? ¿Simplemente despliegan paquetes ESM? ¿Qué pasa cuando necesitan sincronizar los despliegues de múltiples aplicaciones? Ah, divertido. Depende del equipo. Tenemos, como una mención de escala, no todos esos equipos de desarrollo se conocen entre sí. A veces, cuando tenemos cosas que están interconectadas, en realidad usamos una variación sobre un tema de Scrum of Scrums, para que podamos planificar juntos. Hay grandes programas de trabajo. Esos programas de trabajo generalmente involucran a los líderes técnicos de las aplicaciones que van a ser desplegadas, sus gerentes de producto, para que podamos definir realmente cómo van a ser desplegadas. Los despliegues en sí, usamos una variedad de tecnologías. Estaba hablando de lo más brillante y lo más nuevo. Algunas de ellas son aplicaciones containerizadas. Algunas de ellas, son totalmente independientes de otras aplicaciones. El CDN que mencioné es bastante nuevo. Ese, en realidad, lo usamos, tratamos cada versión como inmutable, así que incluso en nuestra infraestructura de despliegue continuo cada construcción que sale de CI se envía al CDN y, por lo tanto, está disponible para su uso como una aplicación de producción. Así que sí, tenemos muchas aplicaciones que dependen unas de otras. Se reduce al contacto humano. Tenemos que hablar entre nosotros para decir cuándo podemos desplegarlas, realmente. Qué concepto.

Lo sé, ¿verdad? Tengo una pregunta sobre las opiniones de Modular. Así que estuve allí cuando Modular fue creado hace algún tiempo. Y así que no sé cómo se ve ahora. Pero recuerdo que el concepto era que iba a ser muy opinado. Mencionaste eso.

¿Qué parte de tener un creador de aplicaciones muy opinado ha funcionado para ti, ha funcionado para ti a escala, y puede o no funcionar para alguien con no tantas aplicaciones? Así que ha funcionado de algunas maneras. Cuando se usó al principio, realmente se trataba de iniciar nuevas aplicaciones. Así que en el rostro siempre cambiante del desarrollo de UI, era conveniente tener una forma consistente de ya sea elegir herramientas o configurar la configuración para tus herramientas. El espacio de desarrollo de UI se mueve muy rápido. Así que lo que era confuso y difícil entonces no es necesariamente confuso y difícil ahora. Así que mientras modular existe como una forma de estandarizar cómo interactuamos con las aplicaciones, se está volviendo cada vez menos opinado. Así que hay más y más parches de escape que vienen con él. Y en realidad, nos está dando una forma realmente única de ayudar a escalar el desarrollo. Así que ahora no solo tenemos como si no estuviéramos allí en el origen de las aplicaciones. Ahora estamos siendo incluidos en aplicaciones a gran escala que quieren agregar nuevas características. Así que cosas como los nuevos lanzamientos de, creo que lo llamamos ghost testing, similar a ejecutar pruebas solo en las cosas que han cambiado en tu pull request o cosas que dependen de ti. Y pronto vamos a tener la construcción incremental de solo construir selectivamente. Así que se agrega.

Eso en realidad se relaciona con otra pregunta que tenemos, que es, ¿cómo logras mantener ágil entre los micro front-ends, evitando recargas innecesarias tal vez, descargas adicionales, gestión de estado, etcétera. Así que allí, en realidad, una de las cosas en las que confiamos es usando ES modules y un CDN consistente. Así que quiero decir, no es tan elegante y sin fisuras como lo hice parecer. Recomendamos un CDN específico. Así que siempre, todos usamos el mismo CDN. Fijamos versiones para cosas que sabemos que tienen estado. Pero el CDN que usamos, en realidad tenemos una implementación de él internamente para que podamos compartir nuestro código propietario con usuarios internos. Pero el CDN en sí está fuertemente en caché. Así que los módulos en sí se cargan realmente rápido. También confiamos en HTTP2 y estándares más nuevos. Así que no importa tener muchas conexiones necesarias, necesitando buscar muchas dependencias. Nos gustaría, eso era de la vieja escuela. Pensaríamos que era un problema, pero la tecnología moderna, realmente no lo es. Así que sí, tratamos de confiar en la tecnología moderna. Hay un par de preguntas aquí que voy a agrupar, que es gente preguntando, ¿por qué no esta otra cosa, verdad? Lo cual siempre surge. ¿Cómo es esto diferente de Webpack's Module Federation o el enfoque de Nexus? Mm-hmm. Así que Module Federation, la versión de usar micro frontends de esta manera significa que no construyes todo junto.

Así que no necesitas saber qué módulos has cargado para construir tu aplicación host. Sé que hay algunos de, por qué has elegido que se avecinan. Porque creo que para ser opinado, tienes que tomar una decisión. Esas decisiones han surgido con el tiempo, y a menudo la gente se resiste a, ¿por qué hiciste algo? Y ahora lo tomamos caso por caso, y tenemos que evolucionar.

Y luego, en la misma línea, es ¿Cómo haces cosas específicas, como la autenticación de usuarios a través de múltiples módulos, o la comunicación entre un micro front-end en la aplicación desplegada, y el otro si existe? Así que en la versión que funciona, por favor ven a verme más tarde. En la sala de preguntas y respuestas del orador abajo en el vestíbulo. De hecho, mostré la cuadrícula hablando con esa vista de tarjeta, y se comunican entre sí. La respuesta que tenemos internamente es parte de esa plataforma digital es que proporcionamos servicios de plataforma. Así que cosas como la autorización y autenticación se realizan al lanzar la aplicación host. Hay un sistema arcano para la autorización, pero es manejado por la aplicación host. Así que a medida que se carga una aplicación, puede definir qué credenciales debe tener el usuario. Y luego el host es responsable de asegurar que esas han sido obtenidas.

Eso es genial. Tenemos muchas más preguntas, pero desafortunadamente no mucho más tiempo. Así que agradezcamos a Steve. Y puedes encontrarlo más tarde en la sala de preguntas y respuestas del orador. Gracias por acompañarnos. Muchas gracias. Libre para ir.