🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒 ├𝘼𝙉𝙂𝙐𝙇𝘼𝙍 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?

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!

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.

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

A mi me encanta el concepto de microfrontend!

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

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

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

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

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

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

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!

Como siempre grandes aportes. Saludos Crack !!

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

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 👌

Excelente explicación.... Saludos.

Que buen video... gracias

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?

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

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

@LeiferMendez

11 ай бұрын

🔥🔥🔥🔥 Saludos gracias por unirte

Excelente contenido. No hay muchos videos sobre micro-frontend tan bien explicados en KZread. 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

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.

Tenía una idea, gracias por aclarar.

Saludos, my bien!!

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

@LeiferMendez

Жыл бұрын

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

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

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

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 :)

Buen ejemplo, like y suscribir 👍

@LeiferMendez

Жыл бұрын

Bienvenido a está comunidad Ivan. ¡Un saludo!

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

Amazing 🔥🔥

Excelente 🙂😃

@LeiferMendez

Жыл бұрын

Graciassas por comentar 👏.

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

@LeiferMendez

Жыл бұрын

Gracias por tu comentario Mariano y siempre pasarte un abrazo

@marianoAlvez13

Жыл бұрын

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

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?

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

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

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

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.

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?

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.

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!

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

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

@LeiferMendez

Жыл бұрын

Exactamente proyectos grandes

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 ?

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? 👀

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

Cuando el siguiente?

no has realizado mas videos de este tema :(

De casualidad tienes pensado subir mas material de microfrontend?

@LeiferMendez

6 ай бұрын

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

@Deus-lo-Vuilt

6 ай бұрын

@@LeiferMendez Se agradece 👏

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 :(

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

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

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

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

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

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"

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

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

Y si las microaplicaciones ya están creadas?

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

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

@danielsuescun3993

7 ай бұрын

En el backend no es necesario

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

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

12 күн бұрын

Tengo el mismo problema, nos pueden ayudar

@tiberiovelasco2821

8 күн бұрын

estoy teniendo el mismo problema

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

en mis tiempos se usaban s

@LeiferMendez

11 ай бұрын

Jajaja en los míos

Y estos micros se pueden usar con PWA?

@LeiferMendez

Жыл бұрын

Hola Omar, si es posible. Un saludo!

Y como mandar datos de una aplicación a otra

hey cambia PHP por Net 6 jejeje

Este es micro comentario

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

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