Las nuevas tendencias de arquitectura de software a observar incluyen micro frontends! Y el artículo de hoy es sobre ellos. Describiremos una tendencia reciente de romper los monolitos del frontend en muchas piezas más pequeñas y manejables, y cómo esta arquitectura puede aumentar la efectividad y la eficiencia de los equipos que trabajan en el código del frontend.

Las aplicaciones de frontend se están volviendo más desafiantes cada día. La escalabilidad todavía tiende a ser un problema con la comunidad de frontends. El buen desarrollo del frontend es difícil. Escalar el desarrollo del frontend para que muchos equipos puedan trabajar simultáneamente en un producto grande y complejo es aún más difícil. El principal problema cuando se trata de micro frontends es que esta tecnología está empezando a tener tracción y la gente no está realmente familiarizada con ella, lo que da lugar a muchas ideas equivocadas. Así que, ¡analicemos los micro frontends para entenderlo mejor!

La idea principal detrás de Micro Frontends 

La idea detrás de Micro Frontends es pensar en un sitio web o una aplicación web como una composición de características que son propiedad de equipos independientes. Cada equipo tiene un área de negocio o misión distinta que le importa y en la que se especializa. Un equipo es interfuncional y desarrolla sus características de principio a fin, desde la base de datos hasta la interfaz de usuario.

Luca Mezzalira define los microfrontends como “la representación técnica de un subdominio empresarial”. Proporcionan límites fuertes con contratos claros, y evitan compartir la lógica o el código con otros subdominios.

Micro Frontends es acerca de: 

• Ser agnóstico en cuanto a la tecnología. Cada equipo debería poder elegir y mejorar su pila sin tener que coordinarse con otros equipos.
• Aislar el código del equipo. Construir aplicaciones independientes que sean autocontenidas. 
• Establecer prefijos de Equipo. Acordar convenciones de nombres donde el aislamiento no sea posible todavía.
• Construir un sitio resistente. Usar Renderización Universal y Mejora Progresiva para mejorar el rendimiento percibido.

En Micro Frontends, una aplicación web se divide por sus páginas y características, y cada característica es propiedad de un solo equipo. El objetivo sigue siendo permitir que cada característica sea desarrollada, probada y desplegada independientemente de las demás.

En Micro Frontends, la aplicación web se divide en sus características, y cada característica es propiedad, de principio a fin, de un equipo diferente. Esto asegura que cada característica sea desarrollada, probada y desplegada independientemente de otras características. Micro Frontends permite a los equipos escalar la entrega de servicios desplegados y mantenidos independientemente.

Compañías como Spotify, Klarna, Zalando, Upwork, y Allegro, y HelloFresh están usando el enfoque de micro frontends para construir sus aplicaciones web.

¿Por qué? Aquí están los principales beneficios de Micro Frontends 

1. Bases de código más pequeñas, más cohesivas y mantenibles
2. Organizaciones escalables con equipos desacoplados y autónomos
3. Capacidad de actualizar, actualizar o incluso reescribir partes del frontend de una manera más incremental

El código fuente de cada microfrontend individual será por definición mucho más pequeño que el código fuente de un único frontend monolítico. Estas bases de código más pequeñas tienden a ser más simples y fáciles de trabajar para los desarrolladores. En particular, evitar la complejidad que surge del acoplamiento involuntario e inapropiado entre componentes que no se conocen entre sí. Y al igual que con los microservicios, la capacidad de despliegue independiente de los micro frontales es clave. Esto reduce el alcance de cualquier despliegue, lo que a su vez reduce el riesgo asociado. Independientemente de cómo o dónde se aloje el código de su frontend, cada micro frontend debería tener su propio canal de entrega continuo, que lo construye, prueba y despliega hasta la producción.

¿Cuándo usar micro Frontends?

1. Una enorme base de código donde diferentes equipos están contribuyendo
2. La propiedad de los códigos se complica
3. El despliegue se retrasa debido a otra parte de la aplicación

Ejemplo de Micro Frontends 

Imagina un sitio web de entrega. Debería haber una página donde los usuarios puedan navegar y buscar restaurantes, supermercados, tiendas, etc. Todos ellos deberían poder ser buscados y filtrados por cualquier número de atributos, incluyendo el precio, la ubicación, lo que un cliente ha pedido previamente, etc.

Cada restaurante, tienda o supermercado necesita su propia página que muestre sus artículos de menú, y permita a los usuarios elegir lo que quieran, con descuentos, ofertas especiales, etc. Los usuarios deben tener una página de perfil en la que puedan ver su historial de pedidos, hacer un seguimiento de la entrega y personalizar sus opciones de pago. Como podemos ver, hay suficiente complejidad en cada página para que se pueda asignar un equipo dedicado a cada una, y cada uno de esos equipos debería poder trabajar en su página de forma independiente. Deberían ser capaces de desarrollar, probar, desplegar y mantener su código sin preocuparse por los conflictos o la coordinación con otros equipos. Y los usuarios deberían ver una página web única y sin fisuras.

Los micro frontales sirven como la evolución natural de los microservicios y tienen como objetivo disminuir el tamaño y la prominencia de los monolitos para una mayor flexibilidad en las actualizaciones. Mediante el uso de los micro frontales, las empresas pueden desarrollar aplicaciones basadas en procesos con flujos de trabajo empresariales centrados en el usuario de forma más rápida y eficaz. Esto se debe a que los micro frontales pueden dividir los sistemas de flujo de trabajo a gran escala en componentes más pequeños que facilitan la creación, actualización e implementación de procesos empresariales cambiantes. Esto puede dar lugar a una mejor experiencia del consumidor, así como a una gestión más eficaz de los procesos empresariales. Esto significa que las organizaciones pueden actualizar y mejorar UX de forma más rápida y segura. Esto permite actualizaciones más iterativas, disminuyendo el costo y la complejidad de la experimentación.

En realidad, InfoQ añadió micro-frentes como paradigma de arquitectura adoptado por los innovadores para su Architecture and Design report 2020.

Luca Mezzalira – autor de Building Micro Frontends espera en el próximo año o dos lo siguientes: 

“Los micro frontends no son una nueva tendencia, pero ganaron tracción en 2019. Todavía hay muchas mejores prácticas por descubrir y la comunidad es muy vibrante. En los últimos 8-10 meses hemos producido nuevos marcos, técnicas y documentación para hacer los micro frontends más accesibles para todos los desarrolladores. No creo que los micro frontends sean la bala de plata para el desarrollo de los frontends, sin embargo creo que es una maravillosa adición a las aplicaciones de una sola página y a las arquitecturas de renderizado del lado del servidor. Los micro frontends brillan cuando tenemos proyectos con decenas de desarrolladores trabajando juntos en un gran dominio empresarial y queremos reducir la complejidad dividiéndonos en múltiples subdominios, desplegar independientemente diferentes partes de las aplicaciones sin crear una sobrecarga de comunicación y coordinación entre los equipos. Varias organizaciones comenzaron a adoptarlas y en 2020 espero ver muchos más casos de estudio que expliquen cómo estas compañías adoptan el paradigma y qué PRO y CON han encontrado. Creo que en 2020, los micro frontends se convertirán en una arquitectura establecida y entendida por la comunidad de frontales, no espero que los micro frontends se utilicen nunca para todos los proyectos de frontales pero hay muchas compañías que pueden beneficiarse realmente de este paradigma de arquitectura.”

Si estás interesado en saber más sobre Micro Frontends, te recomendamos que consultes estos libros, informes, podcasts, presentaciones y vídeos aquí:

Libro

• https://www.buildingmicrofrontends.com/

Informe

• https://tsh.io/state-of-microservices/#micro-frontends

Vídeos

• Micro-frontends: the good, the bad, the ugly — Webinar de Codemotion
• Scaling frontend applications with micro-frontends — Webinar de Software Architecture Conference (sólo disponible para suscriptores de Safari Books Online)
• Micro-frontend architecture — UXDX Dublin
• You don’t know micro-frontends — Frontend Developer Love
• Scaling frontend applications in DAZN — Meetup Let’s DAZN it!
• Demystifying Micro-Frontends — Meetup JavaScript Matters
• Building serverless micro frontends at the edge — AWS Re:Invent 2019
• Scaling your project with Micro-Frontends — Meetup London Microservices
• Micro-Frontends mini-series — Codemotion Dev Lunch Box
• The state of microservices 2020: fireside chat for CTOs — Webinar de The Software House

Podcasts

• If data is king, distribution is queen — The New Stack
• Micro-frontends with Luca Mezzalira — Views on Vue
• Micro-frontends with Luca Mezzalira — Enginears
• What Are Micro-Frontends? — Smashing Podcast
• Micro Frontends at DAZN — InfoQ podcast

Presentaciones

• Building serverless micro frontends at the edge
• I don’t understand micro-frontends
• Scaling frontend applications with micro-frontends
• Building Micro-frontends
• Scaling your project with Micro-Frontends