Beneficios de Micro Frontends

microfrontends-1-1024x576
Sin categorizar

Beneficios de Micro Frontends

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

 

Informe

 

Vídeos

Podcasts

Presentaciones

 

Leave your thought here

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the comparison bar
Compare
Compare ×
Let's Compare! Continue shopping

Membresías

¿Interesado en más workshops?

Suscríbete y recibe nuestro boletín de noticias
Tu información nunca será compartida con terceros