La Revolución de los Micro Frontends en Amex

Rate this content
Bookmark

¿Cómo escalas una aplicación web para ser desarrollada por miles de ingenieros y actualizarla para utilizar las últimas tecnologías de JavaScript (Node.js + React)? ¡La respuesta es utilizando Micro Frontends!

American Express es pionero en el uso de esta arquitectura, utilizándola en producción desde 2016 y transformando la cara de un sitio web utilizado por millones de usuarios en todo el mundo.

This talk has been presented at Node Congress 2021, check out the latest edition of this JavaScript Conference.

FAQ

Un micro frontend es una forma de aplicar el patrón de arquitectura de microservicios al desarrollo frontend. Consiste en dividir la interfaz de usuario en características, componentes o secciones más pequeñas que pueden desarrollarse, probarse y desplegarse de manera independiente.

American Express ha sido pionera en la implementación de micro frontends desde 2016, utilizando un marco que permite la creación de micro frontends renderizados en el lado del servidor y su composición en la página, facilitando la gestión de la escalabilidad y la colaboración entre equipos.

Los micro frontends permiten entregas más rápidas y autónomas, reducen la complejidad en el código base, mejoran la escalabilidad, facilitan la actualización de tecnologías y mejoran la colaboración entre equipos al permitir que cada uno maneje diferentes partes de la interfaz de forma independiente.

Los micro frontends ayudan a resolver problemas de escalabilidad de grandes aplicaciones, dificultades en la gestión de múltiples equipos trabajando en un mismo código base, y desafíos relacionados con la implementación continua y la integración de nuevas características sin afectar el funcionamiento de otros componentes.

Los desafíos incluyen la gestión de la consistencia de la experiencia de usuario a través de diferentes micro frontends, la comunicación entre los componentes, la duplicación de funcionalidades entre equipos y la gestión de la seguridad y el rendimiento al tener múltiples elementos independientes.

La comunicación entre micro frontends debe mantenerse lo más independiente posible, pero para casos necesarios se pueden utilizar eventos, gestión de estado global como Redux, o cualquier otro mecanismo que permita la transmisión de información sin acoplar fuertemente los componentes.

Para el desarrollo local, cada micro frontend tiene su propio repositorio y canalización de CI. Los desarrolladores pueden trabajar de manera aislada y usar un entorno de desarrollo que emula la producción, asegurando que los módulos funcionen correctamente juntos antes de su despliegue.

No, los micro frontends son un patrón de diseño y no una solución única. Su aplicabilidad y efectividad dependen del caso de uso específico, tamaño de la aplicación, y la estructura del equipo. Es crucial evaluar si esta arquitectura es la mejor opción para las necesidades particulares de un proyecto.

Ruben Casas
Ruben Casas
28 min
24 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla discute la revolución de los micro frontends en American Express, destacando los desafíos de la entrega independiente y la solución de los micro frontends. La arquitectura involucra un servidor Node.js para renderizado en el lado del servidor y composición de módulos, con módulos Holocron desplegados en un CDN. El flujo de trabajo de desarrollo incluye entornos de desarrollo locales y tuberías de integración continua. Los micro frontends son un patrón, no un conjunto de herramientas, y deben implementarse en función del caso de uso específico. Los desafíos de adopción incluyen la reestructuración de la arquitectura e implementación de características como Webpack y Module Federation. La comunicación entre módulos debe mantenerse independiente y la migración a micro frontends se simplifica con microservicios y Kubernetes existentes. El renderizado en el lado del servidor es opcional y el tamaño del paquete está limitado a 250K.

1. Introducción a la Revolución de los Micro Front-End

Short description:

Hola a todos. Mi nombre es Rubén y soy un ingeniero de software en American Express. Hoy voy a hablar sobre la revolución de los micro front-end que tuvo lugar en American Express. Comencemos con una historia. Imagina que acabas de ser contratado como el nuevo CTO de una gran corporación, responsable de la transformación digital y la escalabilidad. Decides agregar más desarrolladores y crear equipos autónomos más pequeños. Sin embargo, aplicar estos métodos al frontend presenta desafíos debido a una gran aplicación monolítica con código heredado. Surgen problemas de comunicación, fricción y dificultades para agregar nuevas características. Una reescritura completa parece desalentadora, pero detengámonos por un momento.

Y hoy voy a hablar sobre la revolución de los micro front-end que tuvo lugar en American Express. Así que, en primer lugar, comencemos con una historia. Imaginemos que acabas de ser contratado como el nuevo CTO de esta gran corporación. Entonces, eres responsable de la transformación digital de la empresa, así como de solucionar problemas de escalabilidad. Y estás a cargo de solucionar estos problemas.

La primera decisión que tomas es, ¿verdad?, necesitamos más desarrolladores. Necesitamos agregar más personas, y eso es lo que haces. También eres fan de la regla de las dos pizzas, y piensas, ¿verdad?, necesitamos crear equipos más pequeños y agregar esos desarrolladores a esos equipos. Así que creamos equipos autónomos más pequeños, y como en el pasado, fuiste parte de esta empresa anterior y tenías cierta experiencia previa, piensas, oh, creo que deberíamos hacer una arquitectura de microservicios aquí. Es una buena idea. Ha sido probada. Hay muchos recursos disponibles y es ampliamente adoptada. Así que aprovechemos al máximo la arquitectura de microservicios y aprovechemos al máximo la escalabilidad horizontal, porque sabemos que la escalabilidad vertical no es suficiente en algún momento, así que queremos comenzar a hacer escalabilidad horizontal. Y eso es genial. Eso funciona muy bien. Hasta que, bueno, hasta que intentamos aplicar estos métodos al frontend. ¿Y qué sucede con el frontend? Bueno, el frontend, imaginemos que este frontend es una aplicación monolítica realmente grande. Tiene mucho código heredado. Todos los ingenieros están trabajando en el mismo código base. Y si queremos agregar más ingenieros, obviamente esto es una mala idea, porque están trabajando en el mismo código base. Entonces, cuanto más ingenieros agregas, peor se vuelve, porque será una pesadilla administrar a tantas personas trabajando en el mismo código base.

Entonces, el frontend tiene muchos desafíos. Y estos desafíos son problemas de comunicación, fricción, cada vez lleva más tiempo agregar nuevas características, solucionar y encontrar errores se convierte en un desafío, muy difícil mantener los entornos de producción y desarrollo sincronizados. Y en algún momento de nuestras carreras, todos hemos tenido esta pregunta. Todos nos hemos preguntado, ¿qué tal una reescritura completa? Y piensas, oh, ¿es eso siquiera posible? Parece una tarea muy, muy difícil. Parece una tarea imposible. Pero estás considerando, ¿verdad?, que necesitamos

2. Desafíos de la Entrega Independiente

Short description:

Creo que hemos visto estos problemas antes. Los tuvimos cuando estábamos adoptando microservicios. La entrega independiente podría ser un punto de inflexión para las grandes organizaciones para permitir que los equipos entreguen más rápido y colaboren de manera más efectiva. Sin embargo, dividir el frontend en subdominios y permitir la entrega independiente puede causar más desafíos que soluciones. Construir aplicaciones en silos conduce a experiencias de usuario fragmentadas y la necesidad de duplicar funcionalidades. La actualización y gestión se vuelve difícil, lo que resulta en problemas de autenticación. Escalar una aplicación web para ser desarrollada por miles de ingenieros y adoptar las últimas tecnologías es una pregunta complicada.

Hacer una reescritura completa. Pero espera un segundo. Creo que hemos visto estos problemas antes. Hemos visto todos estos problemas de comunicación, todas estas cosas. Los tuvimos cuando estábamos adoptando microservicios. Entonces pensamos, hmm, ¿qué necesitamos hacer para aplicar los microservicios al frontend y resolver estos problemas? Lo primero que intentas es, bueno, he visto esta cita en algún lugar. La entrega independiente podría ser un punto de inflexión para las grandes organizaciones para permitir que sus equipos entreguen más rápido y libremente y colaboren de manera más efectiva. Y piensas, bueno, eso es. Necesito permitirles implementar de forma independiente. Quiero permitirles entregar de forma independiente para que no trabajen en el mismo código base y puedan entregar de forma independiente. Ese es nuestro primer enfoque. Intentamos dividir el frontend y digamos que lo vamos a dividir en subdominios. Entonces, le damos a cada equipo un subdominio y van a construir la aplicación en ese subdominio y todos deberían estar contentos con eso y resolveremos muchos problemas. Bueno, en realidad, tener solo entrega independiente podría causar más problemas y desafíos que soluciones reales. Permíteme expandirme en eso. ¿Por qué esto causará más desafíos? Bueno, si les damos a las personas su propio subdominio o su propio lugar en el sitio web, los equipos tenderán a comenzar a construir aplicaciones en silos. ¿Y qué es un silo? Bueno, es una forma de construir software que es muy difícil de comunicar con otra pieza de software. Entonces, la aplicación y las características se construyen en silos, y comenzamos a ver a las personas haciendo su propia cosa. Ahora, eso también causa experiencias de usuario fragmentadas. Debido a que están utilizando sus propias herramientas y siguen su propio camino, simplemente no les importa comunicarse con otros equipos. Terminamos con una experiencia de usuario muy desarticulada donde el sitio web puede verse muy diferente si vas a un subdominio o si vas a un subdominio diferente del sitio web, cuando estás navegando, espera un minuto, el sitio web no se ve igual y comienza a verse muy diferente. Ahora, si también comenzamos a construir la misma funcionalidad una y otra vez, por ejemplo, si queremos construir una variación diferente o si quieres traducir esa página a un idioma diferente o lanzar un mercado diferente en un lugar diferente, terminamos construyendo la misma funcionalidad una y otra vez solo porque tiene algunas variaciones en el idioma o diferentes regulaciones en diferentes partes del planeta. Entonces, comenzamos a construir lo mismo una y otra vez. No hay reutilización. Además, debido a que es realmente difícil actualizar y gestionar, las cosas están por todas partes y es muy difícil tener un lugar para actualizar algo en un solo lugar que se propague por todo el sitio web. Esto es realmente molesto para mí cuando tienes problemas de autenticación y estás en un sitio web y te pide que inicies sesión nuevamente. Pero espera, acabo de iniciar sesión en esta parte del sitio web y me está pidiendo que inicie sesión nuevamente. Entonces, terminamos con muchos problemas de autenticación y autenticación persistente. Ahora, esta es la gran pregunta. Esta es una gran pregunta en esta presentación. ¿Cómo escalamos una aplicación web para ser desarrollada no solo por cientos, sino por miles de ingenieros y actualizarla para usar las últimas tecnologías? Es una pregunta complicada.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
ESM Loaders: Mejorando la carga de módulos en Node.js
JSNation 2023JSNation 2023
22 min
ESM Loaders: Mejorando la carga de módulos en Node.js
ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.
Diagnostics de Node.js listos para usar
Node Congress 2022Node Congress 2022
34 min
Diagnostics de Node.js listos para usar
This talk covers various techniques for getting diagnostics information out of Node.js, including debugging with environment variables, handling warnings and deprecations, tracing uncaught exceptions and process exit, using the v8 inspector and dev tools, and generating diagnostic reports. The speaker also mentions areas for improvement in Node.js diagnostics and provides resources for learning and contributing. Additionally, the responsibilities of the Technical Steering Committee in the TS community are discussed.

Workshops on related topic

Masterclass de Node.js
Node Congress 2023Node Congress 2023
109 min
Masterclass de Node.js
Top Content
Workshop
Matteo Collina
Matteo Collina
¿Alguna vez has tenido dificultades para diseñar y estructurar tus aplicaciones Node.js? Construir aplicaciones que estén bien organizadas, sean probables y extensibles no siempre es fácil. A menudo puede resultar ser mucho más complicado de lo que esperas. En este evento en vivo, Matteo te mostrará cómo construye aplicaciones Node.js desde cero. Aprenderás cómo aborda el diseño de aplicaciones y las filosofías que aplica para crear aplicaciones modulares, mantenibles y efectivas.

Nivel: intermedio
Micro Frontends con Module Federation y React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends con Module Federation y React
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez has trabajado en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito frontend en piezas más pequeñas para que cada equipo pueda construir e implementar de forma independiente. En este masterclass aprenderás cómo construir aplicaciones de React grandes que escalen utilizando micro frontends.
Construye y Despliega un Backend con Fastify y Platformatic
JSNation 2023JSNation 2023
104 min
Construye y Despliega un Backend con Fastify y Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic te permite desarrollar rápidamente APIs GraphQL y REST con un esfuerzo mínimo. La mejor parte es que también te permite aprovechar todo el potencial de Node.js y Fastify cuando lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y complementos adicionales. En el masterclass, cubriremos tanto nuestros módulos de código abierto como nuestra oferta en la nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).
En este masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la nube de Platformatic.
Construyendo un Servidor Web Hiper Rápido con Deno
JSNation Live 2021JSNation Live 2021
156 min
Construyendo un Servidor Web Hiper Rápido con Deno
WorkshopFree
Matt Landers
Will Johnston
2 authors
Deno 1.9 introdujo una nueva API de servidor web que aprovecha Hyper, una implementación rápida y correcta de HTTP para Rust. El uso de esta API en lugar de la implementación std/http aumenta el rendimiento y proporciona soporte para HTTP2. En este masterclass, aprende cómo crear un servidor web utilizando Hyper en el fondo y mejorar el rendimiento de tus aplicaciones web.
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Dominando Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Dominando Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner es moderno, rápido y no requiere bibliotecas adicionales, pero entenderlo y usarlo bien puede ser complicado. Aprenderás a utilizar Node.js test runner a su máximo potencial. Te mostraremos cómo se compara con otras herramientas, cómo configurarlo y cómo ejecutar tus pruebas de manera efectiva. Durante la masterclass, haremos ejercicios para ayudarte a sentirte cómodo con el filtrado, el uso de afirmaciones nativas, la ejecución de pruebas en paralelo, el uso de CLI y más. También hablaremos sobre trabajar con TypeScript, hacer informes personalizados y la cobertura de código.