Infoxicator.com

Que es Holocron?

Published
cover image

English version here

¿Qué pasaría si le dijera que puedes publicar partes de tu aplicaciones hechas en React con Server Side Rendering (SSR) sin reiniciar el servidor?

Te presento Holocron!: La columna vertebral de One App, una nueva versión modular del desarrollo de aplicaciones web.

Módulos independientes, implementaciones independientes

Probablemente haya escuchado sobre Micro Frontends, la nueva palabra de moda en la Comunidad Frontend. Su premisa es permitirle dividir sus aplicaciones frontales monolíticas en módulos pequeños, probados e implementados individualmente.

Los módulos de holocrón le permiten dividir en código su aplicación de manera predeterminada; configurando el alcance de su micro interfaz, así como permitiendo la reutilización lograda por la composición del módulo.

Vamos a crear tu primer Holocrón

Dirígete a tu terminal con NodeJS instalado y pega lo siguiente:

export NODE_ENV=development
npx -p yo -p @americanexpress/generator-one-app-module -- yo @americanexpress/one-app-module

Cuando se le solicite, elija el módulo raíz. Este será el punto de entrada de su aplicación donde ocurrirá el enrutamiento y la composición de otros módulos Holocron.

Una vez que el generador esté listo, vaya a su nuevo módulo brillante y ejecute el comando predeterminado npm start. Esto descargará la última versión de One App desde Docker Hub (se requiere el escritorio Docker).

Vaya a localhost: 3000 y debería ver el mensaje de bienvenida predeterminado.

¡Felicitaciones, ha creado con éxito su primer módulo Holocron!

¿Como funciona?

Holocron mantiene un registro en memoria de los módulos que se pueden actualizar dinámicamente sin necesidad de reiniciar el servidor. La idea es que una aplicación pueda actualizar el registro del módulo de Holocron cada vez que se agregue un nuevo Módulo de Holocron al tiempo de ejecución de la aplicación. El resultado final es una aplicación que puede tener componentes React actualizados / agregados en tiempo de ejecución.

Una aplicación es el servidor NodeJS que actúa como el orquestador y une todos sus módulos, así como también Renderiza su aplicación en el lado del servidor.

En producción

Los módulos de holocrón se agrupan y sus activos estáticos se implementan en una CDN. La instancia de One App Server sondea el mapa del módulo periódicamente para obtener actualizaciones de las versiones del módulo, así como los nuevos módulos implementados recientemente.

El mapa del módulo es un archivo JSON simple que contiene la lista de módulos Holocron, sus versiones y un enlace a su ubicación CDN. Piense en este archivo como su package.json, pero en lugar de una lista de dependencias, tenemos una lista de módulos.

Los módulos se pueden implementar en cualquier ubicación y ni siquiera tienen que estar en la misma CDN.

En desarrollo

Los módulos se sirven localmente agregándolos a la matriz de módulos en nuestro package.json.

El comando npm start usa Docker para descargar e iniciar One App Server localmente; También iniciará un servidor CDN que alojará y servirá nuestro mapa de módulos de desarrollo y módulos locales.

Al pasar la opción moduleMapUrl en la sección del corredor, One App Server puede descargar módulos remotos y servirlos junto con los que está desarrollando actualmente en su máquina.

Conclusión

One App y Holocron pueden ayudarlo a crear experiencias de usuario de calidad dinámica, permitiendo la reutilización y reduciendo errores al ayudarlo a actualizar solo lo que necesita.

Ahora, veamos cómo se ensamblan varios módulos en una página utilizando la poderosa composición del módulo de holocrón


Recent Posts

Is React going anywhere?

Earlier this year I had an interesting conversation with a CTO of a price comparison website (e-commerce) and he mentioned that they are moving away from React. “Wait, what?”… was my Reaction (pun 👊 intended)… please tell me more! “Yeah, it is not working for us, we are moving away for performance reasons, e-commerce is[…]

React Router 6 Deferred Fetch

React Router 6 introduced the “deferred” API that allows you to “await” for critical data and “defer” optional data when calling your loaders.

React Router 6.4 Code-Splitting

Single Page Applications that are unable to migrate can benefit from all of the goodies 🎁 that Remix provides.