Micro frontends a escala

Últimamente el termino está muy relacionado a componentes, usar múltiples frameworks, SPAs y bundles de JS, pero en nuestro caso no es tan así.

Cuando se habla de micro frontend se refiere a una arquitectura que nos permite romper una aplicación monolítica en partes pequeñas, que podrían ser otras aplicaciones o componentes.

El stack actual que usamos es Node + Express + React, con Server Side Rendering en la mayoría de los casos (hay excepciones, pero las menos).

Vamos a pensar en uno de los flujos que hace una persona al ingresar a MELI.

Entra en Mercado Libre, busca productos, ve sus detalles, los agrega al carrito y los compra.

Cada uno de los pasos son diferentes aplicaciones que pertenecen a distintos equipos, los cuales trabajan para ofrecer “una única experiencia de compra”.

Veamos las aplicaciones:

  1. Entra a Mercado Libre -> HOME
  2. busca un productos -> SEARCH
  3. ve sus detalles -> PDP
  4. los agrega al carrito -> CART
  5. los compra -> CHO

De esta manera, cada equipo tiene la autonomía de desarrollar, deployar e iterar rápidamente sin dependencias.

A nivel código, todos los frontends parten de una misma base. De esta manera, nos aseguramos de reutilizar la mayor cantidad de código y es clave nuestro design system (librería de React) para lograr consistencia visual y de interacción. Así es como parece una sola aplicación.

  • Usamos microfrontends con múltiples aplicaciones
  • Todos los equipos usan React
  • Reutilizamos la mayor cantidad de código
  • Preferimos MPAs en vez de SPAs
  • Queremos jugar con Webpack module federation

Lectura recomendada sobre micro frontends:

Meow. 🐈

Originally published at https://blog.pazguille.me.

--

--

--

👨‍💻 Front End Web Developer ⚡️ Web Performance Lover | Sr. Technical Manager at $MELI

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Guille Paz

Guille Paz

👨‍💻 Front End Web Developer ⚡️ Web Performance Lover | Sr. Technical Manager at $MELI

More from Medium

Setting Up ESLint with React/TypeScript

React accordion frontend task with custom hooks

Improve performance of React App with lazy loading and preloading images

Micro Frontend Architecture: What It Is, Why It Matters, and What are the Benefits?

Micro Frontend Architecture: What It Is, Why It Matters, and What are the Benefits?