Module federation is awesome but I have to pause the video and read (basically watch your other video) about valtio 😀. I watched your video about zustand it was like wow, I’m loving it but valtio is like zustand++ 👍. Thanks for sharing and making awesome videos 👍
Hey Jack. I have been following you since long and all your videos are so damn good and helpful. But this video on micro frontends is pure gold. Waiting for more such videos Thank you
Next up is Vue. ;) I do know that Manfred Steyer has done a lot of work with Angular and Module Federation. Myself, I used to know Angular, but it's super rusty. If someone doesn't do it, I will, but it aint gonna be pretty. LOL.
Hi Jack. Awesome clear and concise on mfe apps. I am thinking of going with this architecture but I am not sure how do you handle injecting these mfes into a true vanilla app. Meaning there is no webpack or such. It’s just html files with script imports. We only support evergreen browsers so I assume I can script import type module?
We looked at that, you can do a lightweight WP5 boot loader shim, and that gives WP5 enough of a client runtime to load the federated modules. Basically you webpack something tiny. Like a single JS function that returns true. Which ends up being a couple of kB. And then you load that on the client and with that you have everything you need to asynchronously load whatever federated modules you want. It similar to what you'd need to pull off SingleSPA with SystemJS.
@@jherr thanks for the quick reply. So basically we need the wp5 runtime injected into the static files and then that can call the federated modules ? Would you happen to have a gist or example of this? Also, are you planning to do a tutorial on this using vitejs?
@@rcarias78 I don't think you need to inject anything into files. I just think you need to create a tiny WP5 bundle and have it also included on the page. That will install the globals that you can use to import other federated modules. I've got a bunch of tutorials I need to do on Module Federation. Might be a while though. You probably check with Zack Jackson to see if he has some examples.
Hey Jack, thanks for the awesome video. I'm trying to get my team to adopt this, but one thing I'm struggling with is, if we were to update the remote and deploy the updated bundles to GCP Cloud, how do I force the host server to bust the cache and pull the latest `remoteEntry.js` file from GCP Cloud?
You need to set the max-age to whatever your SLA is. But there should also be a cache busting function on the platform if the GCP CDN has a similar feature set to something like an Akamai.
Hey Jack, I have been binge-watching on this Module Federation and this content is practical to its core! Awesome!! I have a question regarding the store of growlers, Let's say an MFE(other than growlers) which is wired into host app through Module Federation, tries to initiate the load func of the growler store with a different client name, will the host app initiated store be overridden or will there be separate objects for Host app and MFE??(including the views )
The state in MF is just client state. There is no implicit sharing of state across applications or anything like that. If you wanted to do it you'd need to connect your client code to a service just as you would outside of the Module Federation context. Have a watch of this th-cam.com/video/0WIFW3s2fDM/w-d-xo.html for more detail on this.
If you import a compile time type definition then yes. Otherwise no, because it's a runtime definition and how would VS Code know what that is, right? But if all your Micro-FE components have to match a specific set of props then you could have that as an externalize type definition in a node module that's imported by both the host application and the micro-fe application and then you'd have the typing. I actually have a video on using Module Federation with Typescript (th-cam.com/video/UbEx1v26kCs/w-d-xo.html)
Hi Jack this is fantastic, thank you for your effort I'll definitely give a read on your book! I have a quick question if that's ok? Given now there is the app which hosts and exports those components and the other 2 which import them, we have a hard dependency. I assume for simplicity sake we did not care about resiliency/fault tolerance etc. Would a complete picture involve a CDN, storing a cached version of the app which hosts the components?
The CDN part is optional. But you always want to store static assets on an object store (e.g. S3). If you serve the static assets from origin then your literally buying slower performance.
@@jherr Understood. But if we want the apps which "depend" on the app exporting components to not break, if the exporting app goes down, then we would have to either have multiple instances of the exporting app and a load balancer, or a something in the middle to cover for "origin downtime", right ?
@@chrise202 The exported components are just a static file asset. Like any other part of the JS/CSS/images files that you deploy to S3 on release. So for the exported components to go down would mean S3 would go down. If the issue is that the exported components are making API calls to their host app, then that could be a problem. But for that React has error boundaries and you can either not show the component in that case, or show a skeleton talking about how that part is temporarily unavailable, etc.
But I don't think there is any difference in that regard between a federated module and a build time module you bring in from a shared NPM project. Those components can also fail at runtime.
Video is very interesting and knowledgeable. First time , I am going to work on single spa with Reactjs. so i am little bit confused . I am having case in project where user authentication and authorization , and other two modules are there so how I can share token with every MFE and if required other data as well with each other. if you would guide me then it would be great help. Thanks you Sir
I have a lot of videos on Micro Frontends with Module Federation, some of those cover shared state. If you are using React and Module Federation you can share state just as you would in any React app. You can store your auth status in a shared Redux store and it will propagate to connected components even if they are in Federated Modules.
@@jherr Thanks Sir for quick replied . I am so glad to received response from you. there is one constraint in our application. where client wanted to have reactjs with single spa since I am unable to use module Federation . If you don't mind then Can we please make on video on only reactjs and Single SPA : single-spa.js.org/docs/getting-started-overview
@@pramodkharade5373 I'm unlikely to do that. Single-SPA is super well documented and has a ton of videos for support. I'm sure you could find articles, videos and example code if you google around for it.
Quite impressive how easily this can be set up! If you had multiple remotes hosting micro FEs, how would you go about sharing a single React runtime across them all?
Module Federation handles that dependency arbitration automatically. It can support libraries for which there can be multiple versions, as well as those like react, react-dom, and redux that need to be singletons. If the host app shares react then none of the incoming federated modules (micro-fe code) will download react, they'll just use the host react. If the host app does not share react then the first micro-fe that needs it will download it, and then any subsequent imports, even if from other remotes, will not re-download react.
@@jherrWow, that sounds better than I hoped for, considering what hat to be done in previous approaches. So basically webpack splits the bundles into their separate dependencies and then uses the standard lazy loading caching mechanism for modules? How does it decide how to split the modules up? I guess I'll have to get my hands dirty a bit :) Is this covered in more depth in the book?
@@domjancik A little more depth. The book is about practical use. So we go through a bunch of use scenarios. There is a little more detail around the fact that the ModuleFederationPlugin is actually syntactic sugar around three smaller plugins that work together. But nothing deeper than that. If you want that kind of depth, Zack Jackson has done some deep dive videos into how it works.
@@jherr Thanks for the pointer! I'm currently researching options on how to integrate new parts into an angular monolith, with the hope the dev teams can stay as independent as possible, so a bit of deeper knowledge can't hurt to foresee some potential issues. By the way do you know of some good resources on testing with this architecture?
@@domjancik For Angular I'd be sure to look up Manfred Steyer. He's doing a lot of great work with Module Federation in the Angular space. He may have some pointers on testing. My best idea would be to mock the imports and return empty but valid components for unit tests. This is certainly an issue with runtime dependencies. But for E2E tests Module Federation re-opens a world of possibilities. Check out my video on Full Site Federation. It shows running an E2E test across several apps in a micro-site architecture.
Module federation is awesome but I have to pause the video and read (basically watch your other video) about valtio 😀. I watched your video about zustand it was like wow, I’m loving it but valtio is like zustand++ 👍. Thanks for sharing and making awesome videos 👍
Love your explanation and delivery, thanks!
Hey Jack. I have been following you since long and all your videos are so damn good and helpful. But this video on micro frontends is pure gold.
Waiting for more such videos
Thank you
Yah, I'm really happy with this one. Glad you are too. I'll probably do another on on Vue, similar format.
I couldn't agree more.
@@jherr Yeah Vue would be very nice and Vue cli 5 is now in alpha with webpack 5. I owe so much to your videos. Thank you!
Thank you good sir!
Another unbelievably useful and informative video.
Fantastic video. Thank you for making these!
Awesome Jack. I always like to see your videos, thanks. I'm waiting for the vue version 👀
Gonna be building that one out this weekend.
Hi Jack , learnt a lot from your videos . Thanks for all the motivation to try out new things and stay ahead
This is awesome 👍👍
Any hopes of getting a tutorial for adding an Angular micro-FE to this ??
Next up is Vue. ;) I do know that Manfred Steyer has done a lot of work with Angular and Module Federation. Myself, I used to know Angular, but it's super rusty. If someone doesn't do it, I will, but it aint gonna be pretty. LOL.
😂😂 No worries... Much appreciated and I look forward to the Vue one
Hi Jack. Awesome clear and concise on mfe apps. I am thinking of going with this architecture but I am not sure how do you handle injecting these mfes into a true vanilla app. Meaning there is no webpack or such. It’s just html files with script imports. We only support evergreen browsers so I assume I can script import type module?
We looked at that, you can do a lightweight WP5 boot loader shim, and that gives WP5 enough of a client runtime to load the federated modules. Basically you webpack something tiny. Like a single JS function that returns true. Which ends up being a couple of kB. And then you load that on the client and with that you have everything you need to asynchronously load whatever federated modules you want.
It similar to what you'd need to pull off SingleSPA with SystemJS.
@@jherr thanks for the quick reply. So basically we need the wp5 runtime injected into the static files and then that can call the federated modules ? Would you happen to have a gist or example of this? Also, are you planning to do a tutorial on this using vitejs?
@@rcarias78 I don't think you need to inject anything into files. I just think you need to create a tiny WP5 bundle and have it also included on the page. That will install the globals that you can use to import other federated modules.
I've got a bunch of tutorials I need to do on Module Federation. Might be a while though. You probably check with Zack Jackson to see if he has some examples.
Hey Jack, thanks for the awesome video. I'm trying to get my team to adopt this, but one thing I'm struggling with is, if we were to update the remote and deploy the updated bundles to GCP Cloud, how do I force the host server to bust the cache and pull the latest `remoteEntry.js` file from GCP Cloud?
You need to set the max-age to whatever your SLA is. But there should also be a cache busting function on the platform if the GCP CDN has a similar feature set to something like an Akamai.
Hey Jack, I have been binge-watching on this Module Federation and this content is practical to its core! Awesome!!
I have a question regarding the store of growlers, Let's say an MFE(other than growlers) which is wired into host app through Module Federation, tries to initiate the load func of the growler store with a different client name, will the host app initiated store be overridden or will there be separate objects for Host app and MFE??(including the views )
The state in MF is just client state. There is no implicit sharing of state across applications or anything like that. If you wanted to do it you'd need to connect your client code to a service just as you would outside of the Module Federation context. Have a watch of this th-cam.com/video/0WIFW3s2fDM/w-d-xo.html for more detail on this.
Awesome. I've got a question. Can code auto completion (intellisense) work on external app imports?
If you import a compile time type definition then yes. Otherwise no, because it's a runtime definition and how would VS Code know what that is, right? But if all your Micro-FE components have to match a specific set of props then you could have that as an externalize type definition in a node module that's imported by both the host application and the micro-fe application and then you'd have the typing. I actually have a video on using Module Federation with Typescript (th-cam.com/video/UbEx1v26kCs/w-d-xo.html)
Hi Jack this is fantastic, thank you for your effort I'll definitely give a read on your book! I have a quick question if that's ok? Given now there is the app which hosts and exports those components and the other 2 which import them, we have a hard dependency. I assume for simplicity sake we did not care about resiliency/fault tolerance etc. Would a complete picture involve a CDN, storing a cached version of the app which hosts the components?
The CDN part is optional. But you always want to store static assets on an object store (e.g. S3). If you serve the static assets from origin then your literally buying slower performance.
@@jherr Understood. But if we want the apps which "depend" on the app exporting components to not break, if the exporting app goes down, then we would have to either have multiple instances of the exporting app and a load balancer, or a something in the middle to cover for "origin downtime", right ?
@@chrise202 The exported components are just a static file asset. Like any other part of the JS/CSS/images files that you deploy to S3 on release. So for the exported components to go down would mean S3 would go down. If the issue is that the exported components are making API calls to their host app, then that could be a problem. But for that React has error boundaries and you can either not show the component in that case, or show a skeleton talking about how that part is temporarily unavailable, etc.
But I don't think there is any difference in that regard between a federated module and a build time module you bring in from a shared NPM project. Those components can also fail at runtime.
Video is very interesting and knowledgeable. First time , I am going to work on single spa with Reactjs. so i am little bit confused . I am having case in project where user authentication and authorization , and other two modules are there so how I can share token with every MFE and if required other data as well with each other. if you would guide me then it would be great help. Thanks you Sir
I have a lot of videos on Micro Frontends with Module Federation, some of those cover shared state. If you are using React and Module Federation you can share state just as you would in any React app. You can store your auth status in a shared Redux store and it will propagate to connected components even if they are in Federated Modules.
@@jherr Thanks Sir for quick replied . I am so glad to received response from you. there is one constraint in our application. where client wanted to have reactjs with single spa since I am unable to use module Federation . If you don't mind then Can we please make on video on only reactjs and Single SPA : single-spa.js.org/docs/getting-started-overview
@@pramodkharade5373 I'm unlikely to do that. Single-SPA is super well documented and has a ton of videos for support. I'm sure you could find articles, videos and example code if you google around for it.
Quite impressive how easily this can be set up!
If you had multiple remotes hosting micro FEs, how would you go about sharing a single React runtime across them all?
Module Federation handles that dependency arbitration automatically. It can support libraries for which there can be multiple versions, as well as those like react, react-dom, and redux that need to be singletons.
If the host app shares react then none of the incoming federated modules (micro-fe code) will download react, they'll just use the host react.
If the host app does not share react then the first micro-fe that needs it will download it, and then any subsequent imports, even if from other remotes, will not re-download react.
@@jherrWow, that sounds better than I hoped for, considering what hat to be done in previous approaches.
So basically webpack splits the bundles into their separate dependencies and then uses the standard lazy loading caching mechanism for modules?
How does it decide how to split the modules up? I guess I'll have to get my hands dirty a bit :) Is this covered in more depth in the book?
@@domjancik A little more depth. The book is about practical use. So we go through a bunch of use scenarios. There is a little more detail around the fact that the ModuleFederationPlugin is actually syntactic sugar around three smaller plugins that work together. But nothing deeper than that.
If you want that kind of depth, Zack Jackson has done some deep dive videos into how it works.
@@jherr Thanks for the pointer!
I'm currently researching options on how to integrate new parts into an angular monolith, with the hope the dev teams can stay as independent as possible, so a bit of deeper knowledge can't hurt to foresee some potential issues.
By the way do you know of some good resources on testing with this architecture?
@@domjancik For Angular I'd be sure to look up Manfred Steyer. He's doing a lot of great work with Module Federation in the Angular space. He may have some pointers on testing.
My best idea would be to mock the imports and return empty but valid components for unit tests. This is certainly an issue with runtime dependencies. But for E2E tests Module Federation re-opens a world of possibilities. Check out my video on Full Site Federation. It shows running an E2E test across several apps in a micro-site architecture.
Very nice….
masha allah ..nice very smart