¿Esto es MICRO-FRONTEND? Angular y React explicación y ejercicio practico

[@LeiferMendez]

🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒 ├𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoencasa.com/PROMO-INICIAL ├𝙉𝙊𝘿𝙀 principiantes ⮕ link.codigoencasa.com/NODE └ 𝘼𝙒𝙎 𝘽𝙖𝙨𝙞𝙘𝙤 desde cero ⮕ link.codigoencasa.com/AWS

[@NohemiMartineznohestmm]

Hola tienes alguna docu de coomo compartir props entre angular y react?

[@davidraygosa6472]

Que genial. Estaría súper que pudieses realizar algún curso completo realizando algunos proyectos con sus respectivos despliegues y entornos. Sería el primero en adquirirlo!

[@alejandrorios6999]

Gracias crack. Con éste video me ha quedado bastante claro que es el microfrontend. Está arquitectura es muy interesante, algo totalmente nuevo para mi. Es muy interesante y creo que empezaré a aprenderla. Gracias

[@CodeWithDesign]

Realmente esto es lo que falta en youtube... Excelente!, si pudieras hacer un curso de esto con arquitectura hexagonal serias el primero en youtube

[@atl.academy]

A mi me encanta el concepto de microfrontend!

[@Ak4n0]

Enhorabuena. Es la mejor explicación que he encontrado en todo youtube.

[@HDSRosa]

estoy aprendiendo una banda con tus videos, estoy casi terminando tu curso de node y creando mi propio proyecto con lo aprendido, explicas bien y das detalles de porque se hace cada cosa, muchos otros youtubers que enseñan programacion no hacen eso y explican olvidandose que la gente muchas veces se queda en blanco cuando estan explicando.

[@alesolano8676]

Estaría cool un curso completo de esto acompañado de un proyecto 🫡

[@leiwisbernalsanchez7468]

Eres un crack, llevo tiempo buscando cursos de single-spa ya que como decías al inicio, el concepto de micro frontend es bastante abstracto, muy buena explicación, muy preciso, muy al punto, me encantaría si subes una segunda parte eventualmente

[@geraldogonzalez5458]

Excelente contenido. No hay muchos videos sobre micro-frontend tan bien explicados en KZbin. Me uno a los que comentaron que estaría genial un curso sobre ello. Sigue así, un abrazo y suscripción.

[@LeiferMendez]

Un abrazo! Gracias por formar parte de la comunidad

[@e-om]

Muy bueno el video para tu último comentario seguro q la solución es con redis para manejar session. Lo que estaría buenos es ver como se integra con docker o docker-composer todo esto de microframework para el frontend. Saludos y gracias por compartir

[@losajoke8355]

Me parece interesantísimo. Eres un grande. Espero que hagas una pequeña serie de esto.

[@juanatencia5752]

excelente video, pero tengo una pregunta como hacemos la comunicacion entre un proyecto y el otro?

[@Alexxis2233]

Excelente video! me quedó clarisimo microfront! espero el de routing! Muchas gracias crrackk

[@pipersDev]

Excelente explicación.... Saludos.

[@z3r1t0]

Que buen video... gracias

[@REYNALDISTA72]

A partir de hoy, nuevo sub, hasta el final de los tiempos, jajaja que buen contenido Leifer saludos, desde cartagena - colombia

[@LeiferMendez]

🔥🔥🔥🔥 Saludos gracias por unirte

[@danabaiardi5452]

Esto parece magia! :)

[@frontend3409]

again, i don't understand sh*t, but i watched and liked it. i used webpack module federation and nx for micro frontends, but it's good to see SingleSPA-based approach in the action. i cloned the repo so i could click the link with zonejs info, lol. Good job, dude!

[@ivanbustos7467]

Muy buen video. Te has ganado un nuevo subscriptor. Saludos desde Chile.

[@LeiferMendez]

Bienvenido a esté canal Iván. ¡Un saludo!

[@Adoracion-Alabanza]

Genial Leifer. Estoy trabajando con microfrontend pero me re sirvio el video!!!

[@LeiferMendez]

Gracias por tu comentario Mariano y siempre pasarte un abrazo

[@Adoracion-Alabanza]

Gracias a ti Leifer, espero con ansias el vídeo dónde trabajarán las sesiones entre micro aplicaciones!!!

[@kevintipantiza9344]

Como siempre grandes aportes. Saludos Crack !!

[@jsinnerx]

Sería genial ver cómo se pueden compartir estados y eventos entre las micro-frontend applications

[@Jorge-Luiso]

Saludos, my bien!!

[@crisalbaeincognitomusicalo48]

Podrías hacer un vídeo explicando cómo se hacen los despliegues ? Que archivos y como montar a un servidor los microfrontends? Buen aporte como siempre Leifer 👌

[@Deus-lo-Vuilt]

De casualidad tienes pensado subir mas material de microfrontend?

[@LeiferMendez]

Hola, si tengo uno que otro material de microfrontend, pronto estaré subiendo

[@Deus-lo-Vuilt]

@@LeiferMendez Se agradece 👏

[@carlosericesmendez2605]

lo usamos hace mas de 1 año donde trabajamos con single-spa y nos va super bien con la shell

[@LeiferMendez]

Excelente!! gracias por comentar me gustaría saber que fue el mayor reto

[@carlosericesmendez2605]

@@LeiferMendez buscar desarrolladores en el 2022 ya que por alguna extraña razón suele especializarse en frameworks específicos y cuando les toca ver algo de React y Angular al mismo tiempo se quejan.

[@ivancalisaya4218]

Buen ejemplo, like y suscribir 👍

[@LeiferMendez]

Bienvenido a está comunidad Ivan. ¡Un saludo!

[@DuvanDuque-b1f]

Hola Leifer, gracias por la explicación, esta genial. Quería saber si tienes alguna explicación sobre como se pueden comunicar los microfrontends de manera optima?

[@turion399]

Tenía una idea, gracias por aclarar.

[@ricardotorres6993]

Gracias por compartir, creo que el mayor reto esta para lo ultimo que comentaste, como hacer el manejo de estados y comunicación entre componentes de distinta tecnología. Veo Microfrontend, para manejar funcionalidades completas o módulos completos, pero no cosas muy minúsculas, que se puede convertir en un infierno para desplegar a producción.

[@rubens1571]

Hola y ya se superó e reto de la comunicación de datos entre mf ?

[@xkiller838]

genial este video aunque tambien me genero muchas dudas como por ejemplo como puedo conectar las dos aplicaciones para enviar informacion entre ellas etc

[@elkingarzon4351]

genial el vídeo se que se deben ver mas cosas pero me gustaría saber como se haría para compartir los estilos css

[@gchirinos100]

Excelente 🙂😃

[@LeiferMendez]

Graciassas por comentar 👏.

[@CodeWithDesign]

Leifer.. una consulta recomendas single spa?.. porque estoy estudiando ModuleFederation puro.. que opinas de esto?

[@akballahak]

Muy buen video, gracias por compartir tu conocimiento. Me queda una duda ¿Como se puede desarrollar un microfrontend sin usar la herramienta single-spa?

[@doangameryt9908]

Hola, espero alguien me pueda ayudar, cuando quiero crear el mf del encabezado, el cual es en angular, me crea una carpeta vacia, sigo los pasos del video e igual me crea vacia

[@pruebageminipruebaprueba]

Tengo el mismo problema, nos pueden ayudar

[@tiberiovelasco2821]

estoy teniendo el mismo problema

[@jacsamg]

Traer una arquitectura del servidor al cliente... Son dos entornos diferentes, peor aún, el cliente aquí es el navegador. Esto es insostenible. Incluso en un equipo de trabajo, los beneficios se convertirán en pesadillas rápidamente. Hay una gran cantidad de aspectos a señalar, pero la sobre carga de dependencias encabeza la lista, seguido de la complejidad innecesariamente aumentada y el rendimiento degradado del resultado final, pues todo está corriendo en el único proceso del motor V8. La lista padria continuar. Una arquitectura limpia y patrones de diseño orientados a encapsular junto con cualquier framework moderno soluciona los problemas que "micro-frontend" intenta atender. Le veo sentido a la solución en una empresa y aplicación realmente grandes, con una cantidad de usuarios que valga la pena. Pero incluso allí lo cuestionaría, pues las desventajas son inherentes a la arquitectura y no tanto a la ejecución. Dejo en claro que aprecio mucho tu trabajo y este no es un comentario sobre tu contenido sino sobre la arquitectura que se presenta. Por cierto, gracias por el video, me ayudó a entender mejor este enfoque. Sonaba bien sobre el papel, pero la ejecución dejó entrever más detalles.

[@tornillogt]

Así somos, no sabemos de algo, buscamos un video de youtube que nos lo explique y ya luego nos creemos expertos, man, este fue un video introductorio, con ese video ya tienes suficiente información para descartar la arquitectura y decir que no vale por que según tú ya lo analizaste y dijiste que no te hace sentido? Por favor, debemos profundizar más, investigar bien, probar cosas, este enfoque se usa en empresas grandes, en empresas pequeñas o medianas es verdad puede dar más problemas que aportes y la verdad que depende porque hasta una mediana se puede beneficiar de la arquitectura, entender bien por que se usa y que ventajas o desventajas nos da(dependiendo del projecto), requiere más tiempo y trabajo que ver un video de youtube y ya analizamos que no aporta la arquitectura. Ojo no digo que esté mal buscar en youtube porque yo soy el primero que lo hace, me refiero al tema de sacar conclusiones tajantes sin saber profundizado, investigado o haber probado las cosas.

[@jacsamg]

​@@tornillogtBueno, que te puedo decir... Quizá no estás enterado, pero ha pasado más de un año y el asunto está más que claro en la industria. Intentaron volver esto un tema más relevante de lo que era (probablemente para vender cursos), pero no funciono, porque es lo que es, una buena arquitectura para un problema muy específico y que pocos tienen. Entiendo tu comentario. Pero no era novato cuando escribí el mío. Si, este video fue de mis primeros acercamientos al tema, pero gracias a la experiencia pude pensar rápido y tener mis propias conclusiones. Por cierto, el tiempo a demostrado que estaba completamente en lo cierto. Así que en respuesta, si. Cuando te dedicas a esto y tienes experiencia, es posible ver un vídeo, hacer un par de lecturas rápidas y realizar un análisis técnico para descartar una tecnología. De hecho, en este sector se hace todo el tiempo. Pero oye, no me hagas caso. Eres libre de utilizar está arquitectura si te apetece.

[@tornillogt]

@jacsamg bueno, dices que el asunto está más que claro en la industria, me parece extraño que compañías como Nexflix o Spotify usen la arquitectura, o que los gigantes del Cloud como AWS provean soluciones para implementar microfrontend si es algo que solo fue una moda o para vender cursos como dices. Y por supuesto que si, si tienes mucha experiencia, puedes ver un video, hacer un análisis rápido de algo e investigar para descartar o aprobar una tecnología o arquitectura, y probablemente lo que concluyas funcione bien... Pero ey, que algo funcione no implica que sea la manera más óptima en la que se pudo hacer, de seguro puedes pensar en muchos ejemplos de cosas así. Todo nos parece innecesario o no le vemos el sentido hasta que llega el momento que se presenta el caso de uso para eso.

[@jacsamg]

@@tornillogt Para corregir el mal entendido. No dije que fuese una moda, siempre fue una solución usada por las empresas que mencionas, pero en su momento algunas personas pretendieron darle más relevancia de la que tenía y por eso lo escuchamos mucho. Está bien si te convences y piensas que es algo viable. Por mi parte, ahora no es un tema de mi interés. Pero fue bueno recordarlo. Saludos :)

[@d-landjs]

Excelente Leifer, me parece interesante este nueva metodología, pero solo en proyectos grandes lo implementaría o estoy mal )?

[@LeiferMendez]

Exactamente proyectos grandes

Saludos excelente video, se puede implementar con una aplicacion ya existente en angular 8, para que los nuevos desarrollos o modulos sean micro frontend, o es recomendable comenzar desde cero con micro frontend

[@JJOC214]

Muy buen video pero pregunto, si lo que ve el root es un js para hacer un deploy a prd se hace en un war o el archivo js o como se compila single spa en producción.

[@eliuddyn]

Amazing 🔥🔥

[@OnNixXx14]

Hola Leifer, queria consultar si sabias que versiones especificas se necesitan para hacer todo esto, porque con instalar la base root de single SPA ningun problema, pero a la hora de crear las app con react o angular con npx, me genera errores, es necesaria alguna version en especifica de single spa o de angular y react?

[@klaynospina9236]

Hola muy bien tu video, pero tengo una pregunta quiero crear apps cona angular y nextjs, pero no me aparece la opcion para crear con nextjs con SSR y CSR como se podria hacer eso con single spa ?

[@julianospina6565]

Hola bro muy buena info, hasta el momento solo he participado en proyectos donde el frontend es monolítico y me surge la duda en este caso, por ejemplo si quisieras utilizar el buscador que está en el header (Angular) para que filtre y muestre los resultados de la lista (React), como es masomenos ese proceso bro?

[@jaimegomez8814]

Si se quiere hacer por ejemplo 2 MicroFrontend, pero una de estas tiene el login, como interactúa esos datos logueados con el otro MicroFrontend ? Espero haberme explicado...

[@kirosho]

tengo la misma pregunta, debe haber algun localstorage supongo en el single-spa

[@FranciscoGaviria]

no has realizado mas videos de este tema :(

[@ep4r4]

Leifer buenisimo, pregunto, 1.- ¿se puede integrar una aplicación o componentes de una aplicación monolita? Ej: quiero adaptar de una aplicación de react algo especifico a SPA. 2.- ¿Se puede integrar con Nextjs?

[@josuevargas638]

Pudieras explicar como pasar un dato o estado de un MF en angular a otro MF en React o al reves.

[@mikehurtado4772]

Y si las microaplicaciones ya están creadas?

[@lerkiseliecercausadoespiti159]

existe algo similar para el backend? te agradeceria la respuesta Leifer gracias

[@danielsuescun3993]

En el backend no es necesario

[@caelum16007]

Una consulta en cuento al rendimiento es viable? Por la cantidad de lib que carga cada micro-frontend. gracias

[@leiwisbernalsanchez7468]

Cada app se carga como lazy, sin embargo, dado a la cantidad de javascript que se va a cargar en el navegador siempre es recomendable usar lazy components dentro de cada proyecto, ejemplo react lazy

[@aprendeconmigo-yibsonleudo7063]

Se puede montar una aplicación ya hecha de React, y cual sería el link?, Gracias

[@yunieskymendez8436]

Saludos Mendez, podrías hablar de mono repositorio en tus vídeos. Gracias por tu buen trabajo 👏

[@rogeracg]

Hola ! Hay forma de que en el microfrontend-layout.html consideremos un application dentro de otro ? Ahora mismo tengo un sidebar con angular material que pensaba convertirlo en un microfrontend y tmb a cada una de las aplicaciones que van dentro del content de este sidebar. Intente poner algún elemento o application dentro de otro, pero me da error :(

[@pipe201196]

Lo que me causa condiciones es, como persistir la info del.jwt para aplicaciones que requieren login

[@brunobraner7652]

Crack♥️🔥🙏

[@LeiferMendez]

De los primeros comentario escribeme por telegram o discord para compartirte una recompensa

[@brunobraner7652]

Leifer, ¿Como estas?, Te comento que te hable por Discord 😅😅

[@LeiferMendez]

@@brunobraner7652 holaa cual es tu usernam

[@brunobraner7652]

Bruno Braner Sulzer

[@brunobraner7652]

Bruno Braner #8070

[@leonardobarrios1509]

Que tak Leifer, gracias por compartir tu conocimiento, en el futuro subiras contenido utilizando module federation para microfront?? gracias y un saludo paisano. xD

[@LeiferMendez]

Se viene Leooooo se viene algo pro. Un abrazo!

[@omarvargas3630]

Y estos micros se pueden usar con PWA?

[@LeiferMendez]

Hola Omar, si es posible. Un saludo!

[@diegoBike31]

Buenas, segui los pasos... me arrojo error del puerto, cambie el puerto y volvi a instalar los node_modules... ahora ya abre el local pero no me sale la pagina como en el video... en el inspector me sale "Loading... if you see this message for a long time, either single-spa is not on the page or you are not running a version of single-spa that supports developer tools"

[@MisteriosMisteriososExtranos]

Como puede convivir una aplicación webpack pre-existente con un micro front end hecho en Angular 14? Es posible llevar esto acabo?

[@eduardoalvarez3159]

Siempre he tenido una pregunta con respecto a los MFs, y es como hacer que los componentes que son compartidos (ejemplo, una tabla con x elementos y paginada en React) y esa misma vista con un pequeño cambio (ejemplo que muestre solo los 10 primeros elementos sin paginado) en Angular o en mismo React pero en otro MF sin duplicar código. De acá surge otra duda, y es que en el contenedor existe un design system, como lo haces para evitar estar importando el mismo design system en los distintos MFs? 👀

[@kevinfrnando]

Asumo que esto es para web, para movil lo veo mas engorroso pero es posible?

[@yonathanpenuela8530]

Cuando el siguiente?

[@StessensAlejandro]

muy bueno el video!!! te hago una consulta, ¿Cómo hago para que no me inicie el git cdo le das el nombre de la organización? porque sino me tira este error : "git" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable. × An error occured while running root-config#copyFiles C:\Users\USURIO\AppData\Roaming pm ode_modules\create-single-spa ode_modules\execa\lib\error.js:60 error = new Error(message); ^ Error: Command failed with exit code 1: git init at makeError (C:\Users\USURIO\AppData\Roaming pm ode_modules\create-single-spa ode_modules\execa\lib\error.js:60:11) at module.exports.sync (C:\Users\USURIO\AppData\Roaming pm ode_modules\create-single-spa ode_modules\execa\index.js:194:17) at spawnCommand.spawnCommandSync (C:\Users\USURIO\AppData\Roaming pm ode_modules\create-single-spa ode_modules\yeoman-generator\lib\actions\spawn-command.js:35:16) at SingleSpaRootConfigGenerator.copyFiles (C:\Users\USURIO\AppData\Roaming pm ode_modules\create-single-spa ode_modules\generator-single-spa\src oot-config\generator-root-config.js:198:38) { shortMessage: 'Command failed with exit code 1: git init', command: 'git init', escapedCommand: 'git init', exitCode: 1, signal: undefined, signalDescription: undefined, stdout: undefined, stderr: undefined, failed: true, timedOut: false, isCanceled: false, killed: false } Node.js v18.15.0

[@rokenbupolecat]

Y como mandar datos de una aplicación a otra

[@kpoxtremox1009]

We're all in tNice tutorials together dude. Beginner phase suck, hopefully we get to understand it soon.

[@cesardavidfloressanmartin387]

Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(browser)

[@edgardrendon3231]

tienes que quitar algunas cosillas en el archivo angular.json

[@danielsuescun3993]

En 2023 me da muchos errores, uff seria bueno un curso

[@FernandoHernandez-r2f]

no entiendo estos youruber que saben que uno viene a ver el contendio no su cabezota atravezada en la panatalla

[@adiazwise]

hey cambia PHP por Net 6 jejeje

[@hackdan]

Este es micro comentario

[@JuanMartinRuiz]

para mi es mas humo que otra cosa,,,,, imaginen recursos humanos buscar seniors para cada microfontend...... o senior de angular y react a la vez

[@hck1bloodday]

es qoe lo estas enfocando mal se supone que aca la idea es que cada miservicio (y por tanto microfrontend) tenga su equipo de desarrollo, si tienes un solo equipo para todos los desarrollos, no estas aprovechando las ventajas de usar microservicios. si la aplicacion no es tan grande como para tener un equipo para cada servicio, tal vez no deberías estar usando microservicios

[@ssupercrack]

en mis tiempos se usaban s

[@LeiferMendez]

Jajaja en los míos