Integrando Still.js en Next.js: Guía práctica de microfrontends remotos - Serie Arquitectura

En esta segunda parte de la serie sobre Microfrontends presentamos una guía práctica para integrar Still.js dentro de una aplicación Next.js, con foco en el uso de componentes remotos del tipo Vendor y en un caso real construido desde cero siguiendo un Design System.

Qué se aborda en el video y en este artículo 1 Creación del proyecto Next.js 2 Generación e incrustado de la aplicación Still.js dentro de la aplicación Next.js 3 Incrustado de un componente remoto directamente desde NPM 4 Intercambio de datos entre Still.js y Next.js usando React

Componentes remotos Este enfoque es clave en arquitecturas de Microfrontends porque permite incrustar componentes que se encuentran fuera de la estructura del repositorio principal. Beneficios principales reutilización de funcionalidad entre aplicaciones desacoplamiento de responsabilidades paquetes desplegables más ligeros y despliegue independiente de características

Arquitectura y adaptabilidad La idea es que los componentes remotos se sirvan desde un origen distinto a la aplicación que los embebe por ejemplo NPM o GitHub aunque Still.js puede adaptarse a cualquier otra fuente. Still.js puede actuar como proxy y además permite que los componentes se escriban en JavaScript vanilla sin depender de código específico de un framework, facilitando su uso en apps hechas con distintas tecnologías.

Componentes autocontenidos La situación ideal es que cada componente remoto sea autocontenido sin dependencias externas que provoquen importaciones en cascada. Esto evita degradación de rendimiento y problemas de crecimiento innecesario del bundle JavaScript.

Consideraciones sobre la integración Paso 1 Coloca la app de Still.js en un subdirectorio dentro de public por ejemplo public slash still-mf y utiliza el loader de apploader para inicializarla. En términos generales el flujo es crear una instancia de StillAppLoader configurar la CDN con variables de entorno como STILL_HOME apuntando a slash still-mf y PATH_PREFIX igual still-mf y finalmente llamar al método load para arrancar la aplicación

Paso 2 Escucha los eventos de Still.js desde Next.js usando la suscripción que provee el Apploader SDK. El SDK soporta ahora el evento init on load lo que mejora el uso de memoria y CPU y evita temporizadores. Tras el evento load se pueden referenciar componentes y subscribirse a cambios en variables para recibir newData directamente desde Still.js

Diferencias respecto a la primera parte La principal diferencia al integrar Still.js con Next.js es la necesidad de especificar PATH_PREFIX y, opcionalmente, la versión del framework para definir la versión de Still.js que se desea usar.

Incrustado de un componente remoto desde NPM En el tutorial en video se muestra el uso del componente vendor StillTreeView obtenido desde NPM y embebido como remoto en el proyecto Next.js mas Still.js. La idea general es referenciar el paquete NPM como origen remoto y declarar el componente para su renderizado dentro del contenedor proporcionado por Still.js o el wrapper de la aplicación Next.js

Conclusiones Las arquitecturas basadas en Microfrontends son muy efectivas en aplicaciones empresariales complejas. Los componentes remotos potencian ese modelo al mejorar el desacoplamiento compartir funcionalidades entre proyectos y escalar de forma independiente. Para obtener los mejores resultados los componentes remotos deben ser autocontenidos y optimizados. Consulta el video para ver la implementación paso a paso.

Qué sigue Recomendamos intentar un Microfrontend más avanzado con navegación y routing usando la documentación de routing de Still.js Comparar distintos enfoques de Microfrontends y ver cómo Still.js ofrece una alternativa disruptiva Comparte tus ideas y preguntas sobre este tema y mantente atento a las siguientes entregas de la serie

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida. Somos especialistas en inteligencia artificial y en soluciones de ia para empresas incluyendo agentes IA personalizados. Además ofrecemos servicios de ciberseguridad para proteger infraestructuras y datos, servicios cloud aws y azure para despliegues escalables y gestión de plataformas, y servicios inteligencia de negocio que incluyen implementaciones con power bi para obtener insights accionables. Si necesitas aplicaciones a medida o acompañamiento en proyectos de inteligencia artificial ciberseguridad cloud o business intelligence Q2BSTUDIO puede ayudarte con consultoría diseño desarrollo e integración

Palabras clave para posicionamiento aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi

Contacto y llamada a la acción Si quieres que te ayudemos a diseñar e implementar una arquitectura de Microfrontends con Still.js y Next.js o necesitas desarrollar soluciones de software a medida con componentes remotos ponte en contacto con Q2BSTUDIO para una consultoria inicial y una propuesta a medida

Nos vemos en la siguiente parte de la serie