Un microfrontend es una técnica de desarrollo de aplicaciones web que descompone una interfaz en módulos más pequeños y autónomos, cada uno responsable de una parte específica de la aplicación. Es una extensión del concepto de microservicios, que en backend se refiere a la creación de servicios independientes. De manera similar, los microfrontends permiten a los equipos desarrollar, implementar y mantener partes de la interfaz de manera independiente, favoreciendo la modularidad y escalabilidad.

Con los microfrontends, cada equipo puede trabajar en una parte específica del frontend (por ejemplo, el encabezado, la navegación o un widget) sin depender de los demás, y todas estas piezas se ensamblan en una única aplicación web cohesiva. Esto permite un desarrollo más ágil, donde los cambios en una parte de la interfaz no afectan al resto de la aplicación, facilitando la actualización continua.

Beneficios de los Microfrontends

• Escalabilidad: Permiten que varios equipos trabajen en paralelo, reduciendo los cuellos de botella en el desarrollo.
• Reutilización: Las partes de la interfaz pueden reutilizarse en distintas aplicaciones.
• Independencia tecnológica: Cada equipo puede utilizar diferentes tecnologías y frameworks según sus necesidades.
• Mantenimiento independiente: Los módulos se pueden actualizar o corregir sin afectar a todo el sistema.

Cómo se articula con Atomic Web Design

El concepto de Atomic Web Design (AWD) se complementa de manera ideal con los microfrontends. Ambos enfoques promueven la modularidad, pero lo hacen en diferentes niveles. Mientras que Atomic Web Design organiza la interfaz a nivel de componentes visuales, los microfrontends lo hacen a nivel de aplicaciones o módulos independientes.

Relación entre Microfrontends y Atomic Web Design:

1. Átomos y Microfrontends: Los átomos en Atomic Web Design son los componentes más básicos, como botones, inputs o etiquetas. En un contexto de microfrontends, estos átomos pueden estar empaquetados y gestionados como microservicios individuales que distintos equipos pueden reutilizar en distintos módulos.

2. Moleculas y Organismos en Microfrontends: Las moléculas y organismos son combinaciones de átomos que forman partes funcionales de una interfaz, como formularios, menús o barras de navegación. Estas estructuras más complejas pueden ser tratadas como microfrontends, donde un equipo puede desarrollar, por ejemplo, el formulario de inicio de sesión de manera aislada, pero siguiendo las normas de diseño visual y funcional establecidas por Atomic Web Design.

3. Plantillas y Páginas: Las plantillas y páginas, en Atomic Web Design, son representaciones completas de una vista o pantalla. Con microfrontends, estos niveles pueden ser ensamblados a partir de varios microfrontends individuales, dando como resultado una aplicación completa que sigue tanto la coherencia visual como la funcionalidad esperada.