A micro-frontend is a shared piece of UI code at (using the Atomic UI leveling) the "organism" level. Meaning that it's a self-contained UI that manages its own state and interaction with the customer. Though it can also interact with the host container.
"Micro frontends is an approach where a web application is broken up by its pages and features, with each feature being owned end-to-end by a single [microservice] team." (Thoughtworks 2016 Technology Radar) What this video describes is using module federation as a cross-framework reuse mechanism - which only has some relevance to "SPA/PWA Composition" micro frontends. From: code.talks 2019, "Patterns for Micro Frontends" by Erik Dörnenburg. Anti Pattern: Cross-service Data Loading - An SPA/PWA that loads one monolithic JS bundle and then queries each service separately (or through an API gateway). Issue: The goal with microservices is to have autonomous teams which maintain loosely coupled services. Ideally each micro service has full, autonomous control over the client facing representation of the service. A monolithic frontend makes it impossible for a service's client facing representation to be updated independently of everything else. Fix: Patterns for Micro Frontends: 1. Web Approach - Each microservice has it's own page so each page is a micro frontend. 2. Server-Side Composition - The micro frontend for a microservice is injected via a server side include (SSI) or edge side include (ESI). Example: "A High-Performance Solution to Microservices UI Composition" by Arif Wider & Alexey Gravanov regarding the AutoScout24 Project Tatsu. 3. Client-side Composition - The microservice renders an HTML partial/fragment which is returned to the browser to be spliced into the DOM. 4. Client-side Rendering - The microservice returns JSON and JS to render it to the browser which uses both to complete the render into a static page. 5. SPA/PWA Composition - Here the microservice specific JSON/JS is rendered by an SPA/PWA instead of a static page. This differs from the "Cross-service Data Loading" anti-pattern because each service supplies the JS responsible for rendering the service's JSON - i.e. the rendering JS is not included in SPA/PWA bundle (doesn't matter if the bundle is code split).
Absolutely GOLD content for free available and just 31k views WHY? i know the topics which he covers are quite advanced and one might not able to catch up but still pls share this channel a lot could be learned from Sr. Devs like him. Lots of love from India
This is awesome. I'm currently integrating an application with a frontend bus using iFrames, due to company specifications. I think this solution is a game changer. Thanks (also for all the other videos)!
Phenomenal, I had spent crazy time tryna figure this out and even took a Udemy course which was outdated, but this video met all my needs in just 10 mins. Huge respect
Just got tripped up on an interview with this term, absolutely essential to know. I've always used the "modular development" umbrella term for both components (that can make up a micro frontend) and micro frontends (that make up a complete application frontend).
Hey Jack! I searched RU-vid for Module Federation with React and saw your posts, have never seen them before. I purchased a Udemy course on micro front ends that drags on so long for far too many hours and is very soon outdated, but your videos are so direct and to the point, no BS fluff, really like your style and explanation. Thanks for sharing this info, it’s super helpful, glad to start watching more of your vids 🙌🏻
I use a micro frontend technology since 2000. It is certainly cool technology and I created dozen apps on it. I am glad that more people started using it now.
Great explanation, wish I had this back in 2018. I tried to sell the idea of micro-frontend to my team, but they didn't understand it; didn't help that I only had 3 months of experience
I did an online course on Udemy it was amazing but you sum all that in 10 minutes… I mean it would all have been Chinese 🇹🇼 to me [sic’] without the course 😅but at the same time it is just easier to understand with your explanation I wish I could have got that overview earlier in my learning process 🎉 🎉🎉 🧧🐰🇨🇦🇻🇳 Happy new year 🇨🇳🇭🇰 🥮🐇🧨🏮
Easy peasy as you say :) have you a plan to talk about your long experience with different programming languages, and the best programming language from your point of view, cons and pros, what about functional programming language and its important, ….etc.
papa Jack back at it again with another great video! Amazing one. I stopped Module federation implementation in our project last year since its made of webpack 4 CRA apps and moving things to webpack 5 was not stable and leaked memory all the time. Maybe its time to look at it again.
Yeah.There is a pattern called Full Site Federation that allows you to wire an entire site together using Module Federation. It's pretty intense: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-W0RbrAZtj7I.html
Hey Jack, cool video! I've never considered building microfrontends. Could you please describe some real-world use cases for this type of architecture?
Sure. Dashboard widgets are micro-frontends. Shared header/footers. Cart UIs in eCommerce applications. Those are just a few thoughts. Basically anywhere you want multiple teams to contribute to a single page.
@@stevenrankin9056 Web Components are a perfectly good MFE architecture to use. Really just depends on your requirements and the level of integration you want between the host application and the MFE.
Maybe a hot take Being able to deploy a fragment of an application independently is cool, HOWEVER deploying fragments of an application without testing its interactions is DANGEROUS. In microservices you can deploy independently because you can test independently because they fail independently (one microservice cannot break another microservice). In microfrontends you can deploy independently, but you cannot test independently, because one microfrontend can break another microfrontend in a myriad of ways: - The DOM - Stopping events - CSS - URL - Storage - Cookies - Global Javascript scope As far as I know Iframes are the safest, the leave room for storage and cookies issues, but the performance and accessibility is thrash. I'm I wrong? is there a way to GUARANTEE that microfrontend A CANNOT break microfrontend B?
There is as much of a "GUARANTEE" with microfrontends as there is with microservices. Being able to test a microservice in isolation (which you can do with a microfrontend) is no "GUARANTEE" that microservice A won't change its behavior in a such a way that microservice B that was depending on that behavior will break. In the same way that even a patch version change in a library can break that app that consumes it. Have good contracts, use the same component oriented framework across all the MFEs and apps. Make sure the versions are synced. Share as little state (preferably none) as possible. Don't use MFEs for mission critical behavior. These are the best practices that keep MFEs reasonable.
@@jherr I agree that for non critical uses "reasonable" stability is a fair price to pay for rapid deployment I'm also under the impression that a lot of developers are not fully aware that there is no guarantee of independent failure when deploying a microfrontend and do not have automated integration tests to cover these cases Thanks for your reply 👍
Module federation seems like such a next-level feature, but it feels so clumsy with Angular which is a bit bummer (or maybe there's a gap in my knowledge). I can't seem to find a proper way to use exposed components without using lazy loaded modules with Angular Router. Every example and repo seems to either use some directive to "create" the remote component, or a wrapper component to do the same. Looks so simple and clean with React/SolidJS though!
Regardless of the content, which is excellent by the way, your explaining skills are exceptional. Thank you very much for taking the time to explain us this topic. Certainly I subscribe, of course I subscribe.
the idea behind this is that parts of the front-end could be maintained separately by different teams. doesn't this make testing more difficult because it obscures end usage and creates yet another place for team communication and planning to break down?
Amazing Jack, I was wondering if you could do a deep dive on MFE using module federation, for example how the composition is made, how to handle one portion of the page being offline (is it called circuit break in this case too?), how to propagate for example a JWT with the currently logged user for auth handling, like which buttons are grayed out etc. I saw some material accross multiple sources, but they pale in comparison to your clarity and quality...
Many of those questions are answered in the videos in the Module Federation playlist: ru-vid.com/group/PLNqp92_EXZBLr7p7hn6IYa1YPNs4yJ1t1 Also, a federated module cannot be "offline", that's a common misconception. A federated module is just JavaScript code. So it should be deployed on an asset store (e.g. S3) just as you would any JavaScript module. So in order for it to be "down" S3 would need to be down. That being said, if you are super worried about that there are error boundaries and other mechanisms you can use.
I have a video on that in the playlist. Basically you need to have a shared "contract" declared interfaces in an NPM module that is brought into both the host and the remote. Because, yeah, you're right, at the point where the TypeScript is compiled into JS the types are gone. And even if they weren't gone tsc has no capacity to grab some types from remote code. I should probably update that video now that I've got a lot more TS experience.
Jack thank you for the great vids! Some of the best module federation content I can find. Any plans on making create-mf-app more production-ready? Also, would love to get some details on your VS Code setup. Cheers!
create-mf-app is meant to just create POC applications so that you can then simulate enough of your production setup to test whether using Module Federation makes sense, and how you would architect it. We are adding some very basic stuff to it, like .gitignores, but probably not much past that.
Hey Jack, This is fantastic. Learned a lot about micro-frontends in 11 mins that any other source /course. Would you have an example with NX instead of yarn workspaces :)
Great video Jack. I have been meaning to implement this for a long time as our Frontend has ton of services. One question though: how do these apps share state, e.g Authentication states and stuff
You can check the playlist and the book, there are a ton of options there. Anything from simply subscribe to some RxJS observable hung off of window, all the way through state managers like Redux, Jotai, etc. They all work.
Hello Jack I really love to watch your videos. I have a question about this topic. May I know when to use micro-frontend? Or what is the importance of it? Thank you.
Hey Jack! Awesome video again. I'm waiting for one MF example with nextjs 11 ssr, today nextjs only can use csr with the last version of @module-federation/nextjs-mf but ssr no yet. Do you have any solution? Thank my friend
I don't have anything for you on SSR/MF on NextJS. Honestly, I'm not really spending a lot of time on SSR myself. Most of the applications I work on are either CSR or SSG. If the SSR story becomes clearer I'll definitely cover it, but really the only hope is pushing Vercel to finally take Module Federation seriously. Thankfully general interest in MF is increasing because Micro-FEs are becoming more popular. At some point we are either going to get a Micro-FE ready framework and either that's going to be NextJS, or a competitor, which would push Vercel to support MF to compete.
@@jherr thanks so much for your response. Of course the best way will be that vercel make magic directly in nextjs. For now I'm looking for an alternative solution like a nextjs-mf from Zack Jackson but I need to paid for check this solution.
@@estebanburgos If you are looking at this just personally you might want to reach out to Zack directly to see if he can give you a break on the $12 price tag. If this is for a company then they should be able to handle $12 for you to check whether this solution is enough for your needs.
