Micro Frontends | Aplicando ideas de los microservicios en un frontend monolítico 🗿

[@ManuelZapata]

👉 Busca ofertas de trabajo remoto para desarrolladores en Arc: go.arc.dev/3sn 👈

[@itmarck]

Llevo unos meses trabajando en Disney, y sus webs tienes una arquitectura similar a la comentas. Trabajo con React en mi proyecto y una parte de la web puede estar en Angular manejada por otro equipo. Fue lo que más me gustó cuando entré.

[@kuscamara]

Como aportación que no sé si se habrá comentado ya, otra opción para usar micro frontends es Webpack Module Federation. Personalmente yo también creo que en general no son una buena idea porque, al contrario que con los microservicios, el resultado de usar micro frontends es visible para el usuario final. Me explico: si varias apps se desarrollan de forma totalmente independiente, al final creo que inevitablemente habrá diferencias en estilos, interacciones, transiciones, etc., además de que eso supone también no reutilizar recursos comunes penalizando tiempos de carga. Dicho esto, seguro que también hay casos en los que los micro frontends van como anillo al dedo. Gracias por el vídeo :)

[@SaskeUchijaCol]

Yo recuerdo que hace un año un compañero implementó eso de los micro frontends el problema fue que quedó no muy bien incluso no salió nunca producción y si ha generado muchos problemas por lo que primero nadie sabe darle mantenimiento a eso y lo otro es que no se integra eso con nada y se volvió fue en un problema que no existía Y que muy probablemente se tenga que volver a hacer

[@ManuelZapata]

Interesante experiencia Raúl! Gracias por compartirla.

[@roy_c]

Yo trabaje en mercado libre y cada pagina casi es un microfrontend. Si bien no tocaba la app principal, sino una tool interna, tambien era un microfrontend. Da mucha versatilidad la verdad.

[@ManuelZapata]

Gracias por compartir esa experiencia!

[@AndresSossa]

muy buen video, excelente explicación, al final la necesidad debe ser quien te guie y no complicar el dominio de negocio solo por moda.

[@skull2449]

Mereces más seguidores. Ojalá y cada vez te vaya mejor. Hermoso video y contenido en general!

Excelente explicación. Buena arquitectura, bien aplicada puede ser muy útil. Aplicada sin necesidad real no tiene ningúna ventaja.

[@bezael]

Buen, video amigo Manuel. Tengo que reaccionar a este video 🫢

[@ManuelZapata]

Que se venga esa reacción compadre!

[@moviedomof]

mmmm esta bueno pero lo dejaría madurar. ya va a salir algún framework o libreria contenedor avanzado para hacer esto

[@germancocca958]

Excelente contenido! Me gusta mucho lo generales y fáciles de entender que son tus explicaciones. Te felicito!

[@lims41]

Muy interesante Manuel. Sin ser especialista en el tema, comparto la opinión final sobre estos microservicios en el front. Su uso debe ser si sólo si la aplicación lo requiere y no por moda

[@ManuelZapata]

*La aplicación y el equipo lo requieren. Gracias por tu opinión, Santiago!

[@Alejandrodaniel1818]

También consideró lo mismo como dices en la conclusión, yo desarrollo en Vue y los componentes mayormente los manejos como micro frontend por así decirlo, lo de microservicios si tiene más utilidad pienso, si se ve de una perspectiva diferente, más parece aplicaciones monolíticas específicas que se agrupa

[@guillermosolia]

Exelente video Manuel. Quizás convenga trabajar como módulos, cómo comentaste en el vídeo de monolitos modulares, así si en el futuro aparece la necesidad de evaluar la aplicación de microfrontends la solución permita más fácilmente su implementación. Un genio como siempre Manuel. Saludos

[@ManuelZapata]

Esa es una idea interesante, Guillermo

[@faller222]

excelente! al final el sistema se convierte en una series de Apps, el subSistema de Configuracion, el subSistema de pagos, el subSistema de catalogo, el subSistema de ...

[@marthiynashi]

Excelente explicación, muchas gracias por compartir tus conocimientos.

[@ManuelZapata]

Con gusto Martha!

[@leonardohidrovo4729]

@ManuelZapata como se manejaría las seguridades como la autenticación en este esquema de microfrontends?

[@ernestorh6110]

Estelares tus videos! Saludos desde Cuba 🇨🇺

[@ManuelZapata]

Gracias Ernesto! 🙏

[@code_castle]

Me gusta lo que explicaste.

[@yair54]

Muy buen video , una duda : es válido aplicar el concepto de microfrontend para separar auténticas soluciones en una sola? Me explico : tengo tres aplicaciones empresariales que no tienen nada que ver entre sí pero estas las queremos centralizar en un “cascarón “ único que parezca que al final son la misma. (Algo así como un ERP que tiene diferentes módulos que algunos no tienen nada que ver con otros)

[@atl.academy]

bueno, en mi proyecto hay una parte que mostramos reportes en google data studio, en otra google maps, y en otra youtube... todos s... si vamos al caso, eso serían microfrontends?

[@ManuelZapata]

Yo creo que no, Lucas. Lo que tienes es un frontend donde embebes usando iFrames. Un micro frontend involucra temas más complejos en cuanto a organización de equipos, comunicación/infraestructura de aplicaciones.

[@nicolasericesmendez8421]

no creo que los microfrontend sea el futuro del frontend siento que es mas un problema que solución. pero muy buena explicación super claro

[@MiguelLeon-tw2ii]

Se ve como complicar las cosas son necesidad, ya para eso existen las librerías reactivas, qué tienen componentes independientes, comunicarse por medio de backend 2 microfrontend es hacer más consumo de recursos y tiempo, es más enredado

[@TheArokLair]

Hola Manuel, gracias por el tutorial sabes he estado buscando algo así para aplicaciones móviles basadas en React Native encontré algo con OTA Updates y usando features flags de firebase me pareció interesante también apalancar el concepto en móviles

[@defaultName-gw1vg]

👍🏻 muy buen video

[@marcogrijalva816]

Me queda duda de como esos microfontends compartirían el state de toda la aplicación, por ejemplo para variables de state que requieran que lo utilize el micro X pero se creó en el micro Y...

[@haroldmunoz1775]

Buen día Manuel. Tengo una inquietud y es que si uno a nivel backend desea usar más de un lenguaje, ej .NET y Django con Python, como uno maneja la seguridad? Digamos si uno consume servicios del frontend como uno administra el JWT si usa ambos backend. Gracias desde Colombia

[@javier01123]

gracias!

[@ManuelZapata]

Con gusto!

[@device8466]

alguien que lo haya requerido que me responda porfa, ¿es posible que varios virtual host apunten a un mismo folder?, lei que google penaliza eso, pero creo que si apunta al mismo sitio aplica

[@jesusfuentes1449]

Cual seria el caso de uso más cercano en la que este concepto pueda darnos mayor beneficio? y Saludos

[@ManuelZapata]

Frontends grandes donde cada uno de sus módulos necesite evolucionar de forma independiente a los otros.

[@elbranching]

Aunque tu video está un poco largo, el contenido es tan bueno que ni sentí el paso del tiempo. Te felicito! Ahora, mi opinión acerca de los microfrontend es: mmm... no lo se Rick... [ponga meme del tipo de la casa de empeño XD] Las razones son las mismas que mencionaste al final y por otro lado, hay una moda de separarlo todo en muchos servidores... y que los dockers... y los buses de datos... pareciera que todo el mundo anda construyendo facebooks y twitters por todo lado, incluso conocí una startup que se aventó de primeras y sin clientes, a hacer todo con microservicios y kafka... en fin Pero esto pasa porque muchos piensan que consumir un microservicio no tiene lag o que es algo despreciable, además a mi modo de ver, cada microservicio es un punto de fricción en el sistema (y un webservice pues ni hablar) porque es mas probable que las cosas salgan mal cuando los datos tienen que salir por un cable de red a que sean pasados a una librería que se instancia dentro del mismo procesador. Una preguntica: tenía entendido que los iFrames tienen serios problemas de seguridad. No se si eso sea algo que se quedó en el pasado o realmente no era tan grave ¿sabes algo al respecto?

[@seluesma]

Sacate un curso en Udemy bien completo sobre microfrontend

[@ManuelZapata]

Gracias por la sugerencia, Santiago! Será que si hay suficiente gente interesada?

[@ivangalicia4618]

No se si se tome el Event driven design para front end

[@BreegBenjamin]

no

[@ManuelZapata]

Te refieres a arquitecturas orientadas a eventos?

[@davidsanchezmancilla6765]

Si no estoy mal el laucher de league of legends por Riot Games utiliza esté concepto.

[@cristianagudelo6446]

muy interesante el tema. pero no lo adoptaría, ni lo recomendaría... Bastante desglozado están los frameworks, como para desglozar mas... 🤷‍♂🤷‍♂

[@christiansanchez2217]

gracias master! , por otro lado arc() es solo para bilingues u.u

[@ManuelZapata]

A estudiar inglés se dijo!

[@RubenCortezBrito]

Creo que es más sencillo usar los modulos perezosos de Angular

[@ManuelZapata]

Interesante. Supongo que eso funcionaria si todos los micro frontends están en Angular.