Glosario de arquitectura frontend y migración
Definiciones simples de los términos que se usan en plataformas de microfrontends y migraciones de frontends legacy.
- Aplicación host (shell)El host, o shell, es la aplicación que el navegador carga primero en una arquitectura de microfrontends; aporta el layout, la navegación y la sesión, y carga los remotos.
- Aplicación híbrida (AngularJS + Angular)Una aplicación híbrida ejecuta AngularJS y Angular juntos en la misma página, normalmente con ngUpgrade, para migrar el código pieza por pieza.
- Canary release (despliegue canario)Un canary release envía una versión nueva primero a una parte pequeña de los usuarios, observa su comportamiento y amplía la audiencia solo si las métricas se mantienen sanas.
- Componentes standaloneLos componentes standalone son componentes, directivas y pipes de Angular que declaran sus propias dependencias y no necesitan pertenecer a un NgModule.
- Código legacy (código heredado)El código legacy es código que sigue aportando valor en producción pero es difícil o riesgoso de cambiar, por falta de pruebas, tecnología desactualizada o conocimiento perdido.
- Design tokensLos design tokens son decisiones de diseño con nombre, como colores, espaciados y tipografía, guardadas como datos para que todas las plataformas y aplicaciones usen los mismos valores.
- Despliegue blue-greenEl despliegue blue-green mantiene dos ambientes de producción, uno activo y otro en espera; la versión nueva va al que está en espera y luego se cambia todo el tráfico.
- Detección de cambiosLa detección de cambios es el proceso con el que un framework advierte que los datos de la aplicación cambiaron y actualiza el DOM para reflejarlo.
- Detección de cambios zonelessLa detección de cambios zoneless ejecuta Angular sin Zone.js; el framework actualiza la vista cuando los signals, los eventos del template o llamadas explícitas informan un cambio.
- Deuda técnicaLa deuda técnica es el costo futuro que generan los atajos técnicos o el mantenimiento postergado, y que vuelve los cambios más lentos y riesgosos hasta que se paga.
- Downgrade (downgradeComponent / downgradeInjectable)En ngUpgrade, hacer downgrade es envolver un componente o servicio de Angular para que el código AngularJS lo use como directiva o como inyectable.
- Feature flagUn feature flag es un interruptor en tiempo de ejecución que activa o desactiva una funcionalidad para algunos o todos los usuarios sin desplegar código nuevo.
- Fin de soporte (EOL, end of life)El fin de soporte es la fecha a partir de la cual quien mantiene un producto deja de publicar correcciones, incluidos los parches de seguridad, para una versión.
- Import mapsUn import map es un bloque JSON en la página HTML que le indica al navegador qué URL cargar para cada nombre de módulo usado en los import.
- Lazy loading (carga diferida)Lazy loading es retrasar la descarga de una parte de la aplicación, como una ruta o un componente pesado, hasta que el usuario realmente la necesita.
- Ley de ConwayLa ley de Conway observa que las organizaciones diseñan sistemas cuya estructura refleja la estructura de comunicación de la propia organización.
- MicrofrontendUn microfrontend es una parte de una aplicación web que se construye y despliega de forma independiente, pertenece a un equipo y se compone con otras en tiempo de ejecución.
- Migración incrementalUna migración incremental lleva una aplicación a una tecnología nueva en pasos pequeños que se publican, mientras el producto sigue en producción todo el tiempo.
- Module FederationModule Federation es una función de los bundlers, introducida en webpack 5, que permite que aplicaciones compiladas por separado carguen código entre sí y compartan librerías en tiempo de ejecución.
- MonorepoUn monorepo es un único repositorio que contiene varios proyectos, como aplicaciones y librerías compartidas, normalmente con herramientas que entienden cómo dependen entre sí.
- Native FederationNative Federation es una librería de la comunidad que implementa el modelo de Module Federation con estándares del navegador, ES modules e import maps, sin depender de webpack.
- ngUpgrade (UpgradeModule)ngUpgrade es el paquete oficial de Angular, @angular/upgrade, que permite que AngularJS y Angular corran en una misma aplicación y usen componentes y servicios del otro.
- NxNx es un sistema de build open source para monorepos que entiende las dependencias entre proyectos, corre las tareas solo donde hace falta y guarda sus resultados en caché.
- Patrón strangler fig (higuera estranguladora)El patrón strangler fig reemplaza un sistema legacy gradualmente: el código nuevo toma una parte a la vez detrás de una capa de enrutamiento hasta poder retirar el sistema viejo.
- Pipeline de CI/CDUn pipeline de CI/CD es la secuencia automatizada que compila, prueba y despliega cada cambio de código en su camino desde el commit hasta producción.
- Polyrepo (multirepo)En un esquema polyrepo cada aplicación o librería tiene su propio repositorio, con su propia historia, su pipeline y su ciclo de releases.
- Reescritura big bangUna reescritura big bang reemplaza una aplicación completa por una nueva hecha desde cero y pasa a todos los usuarios en un solo corte.
- Remote entry y manifiestoEl remote entry es el archivo que cada remoto publica para describir qué expone y comparte; el manifiesto es la lista del host con la ubicación de cada remote entry.
- Remoto (remote de microfrontend)Un remoto es una aplicación compilada y desplegada por separado que expone módulos, como rutas o componentes, para que un host los cargue en tiempo de ejecución.
- Rollback (reversión)Un rollback devuelve un sistema a la última versión que funcionaba bien después de que un release causa problemas.
- SignalsLos signals son la primitiva reactiva de Angular: un signal guarda un valor, registra dónde se lee y avisa a esos lectores cuando el valor cambia.
- single-spasingle-spa es un router open source en JavaScript para microfrontends que monta y desmonta aplicaciones independientes, incluso de frameworks distintos, según cambia la URL.
- Sistema de diseño (design system)Un sistema de diseño es el conjunto compartido de design tokens, componentes de UI, guías de uso y gobernanza que mantiene consistentes las interfaces de un producto entre equipos.
- Soporte a largo plazo (LTS)El soporte a largo plazo es el período en que una versión de software ya no recibe funcionalidades nuevas pero sigue recibiendo correcciones críticas y parches de seguridad.
- Tree shakingTree shaking es el paso del build en que el bundler elimina el código que se exporta pero nunca se importa, para que no llegue al bundle de producción.
- Web components (custom elements)Los web components son estándares del navegador, principalmente custom elements y Shadow DOM, para definir elementos HTML reutilizables que funcionan en cualquier framework o en HTML puro.
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn