Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.


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.


Divbox
classdivcontenedor
Divbox
stylewidth: 90%;
classdivcontenidotransparente

Divbox
classdivcontenedor
Divbox
stylewidth:25%; background-color:#FCFCFC !important; margin-bottom:40px;
classdivcontenido imgresponsive

Image Added

Normativa General para el uso de Microfrontend

Divbox
stylefont-size: 1.05em; margin: 5px 0px 0px 0px; padding: 0px;

El objetivo de este documento es determinar las pautas desde una visión general de todos los elementos que afectan al desarrollo y uso de los microfrontend


Divbox
classBOTON-ESTILOSO

Accede a la normativa

Divbox
stylewidth:25%; background-color:#FCFCFC !important; margin-bottom:40px;
classdivcontenido imgresponsive

Image Added

Desarrollo de un microfrontend

Divbox
stylefont-size: 1.05em; margin: 5px 0px 0px 0px; padding: 0px;

El objetivo de este documento es documentar pormenorizadamente las responsabilidades, mecanismos y detalles para desarrollar un microfrontend


Divbox
classBOTON-ESTILOSO

Accede a la normativa

Divbox
stylewidth:25%; background-color:#FCFCFC !important; margin-bottom:40px;
classdivcontenido imgresponsive

Image Added

Integrar un Microfrontend dentro de un Host

Divbox
stylefont-size: 1.05em; margin: 5px 0px 0px 0px; padding: 0px;

El objetivo de este documento es documentar pormenorizadamente las responsabilidades, mecanismos y detalles para integrar un Host con un MicroFrontend. 

Divbox
classBOTON-ESTILOSO

Accede a la normativa


Divbox
stylewidth:25%; background-color:#FCFCFC !important; margin-bottom:40px;
classdivcontenido imgresponsive

Image Added

Preguntas Frecuentes

Divbox
stylefont-size: 1.05em; margin: 5px 0px 0px 0px; padding: 0px;

Espacio de consulta rápida para las dudas más recurrentes que vamos identificando

Divbox
classBOTON-ESTILOSO

Accede a la Preguntas Frecuentes

...