Mastering Micro-Frontends With RSpack and Module Federation
Вставка
- Опубліковано 1 чер 2024
- Micro-Frontends have never been easier with Module Federation and building code has never been faster than with Rspack. Now you get the best of both worlds with Rspack creating Federated Modules enabling you to create amazing MFEs.
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
0:45 Create Module Federation and Project Setup
2:32 Creating Counter in the Remote App
3:35 Exposing the Counter from the Remote App
6:10 Runtime Linking between the Apps
7:50 Connecting the Counter in the Vue App
8:42 Mounting the Vue Application in an Element
10:35 Consuming the Vue Remote in the Host App
12:14 Outroduction - Наука та технологія
I am FKING excited to seeing Rspack going to V1.0, Fast bundler built with Rust. I am just waiting for Modern Js to officially document how MFE is built with Rspack
What is ModernJS?
@@cherryfuchs Modern JS is a open sourced React framework created by ByteDance company. Its pretty much inspired by Remix but with SPA and Micro frontend as first class citizen. It can do SSR out of box as well :) Rspack is part of their package eco system
Sidebar: You make the best videos. The time and effort you put in to make it concise but also visually easy to understands helps more than you know! Would love to see a video on your process! Would help improve other's demoing skills a TON
* I mean even using ARC to keep things even simpler. Mind blown
Your videos on Module Federation are super helpful. I'm totally hyped about RsPack's potential as a Webpack alternative, especially with the new Module Federation support. It would be awesome if you could do a walkthrough of the fresh features in Module Federation 1.5. I bet a lot of us would find it super helpful. Thank you!
Awesome, can you please make a video on MicroFrontend in general, different technique and their pros & cons
ua-cam.com/video/w58aZjACETQ/v-deo.html
I was thrilled to see module federation with Webpack 5 and now with RSPack. Thanks for the amazing video! 🙌
best knowledge source on the entire internet 🔥🔥💯
Cool. Thank you, Jack!
I'm super excited to see you do videos on MFEs ! Hope you'll keep this MFE series alive again! Is it possible to have MF with Rspack in a mono repo, with Turbo Repo or NX? Thanks again for this awesome video!
I don't see any reason why you couldn't do that.
Amazing I was just thinking about thisb
Hi Jack, Super helpful as always! If you had an application with a few MFEs and they are sharing dependencies. Now you need to update some of those dependencies across the MFEs but you don't want to do a 'Big Bang' deployment, is there a way to manage different version of the dependencies in the runtime without the different versions effecting each other?
This is definitely a game changer!
Hey, nice video? In your opinion, which is better to apply in module federation? Vite or rspack?
Awesome stuff, is it possible to use module federation to combine different versions of some react together? I assume I would need to do simillar mount helper function like you did with vue counter?
Love the zsh prompt! Just curious have you tried neovim and tmux. I have been forcing myself to learn vim. Anyways, great video. Have a great week!
I used vim for years and I'm not interested in going back any time soon. I've tried tmux, but I'm doubious about the value when we have good GUI terminals that support multiple panes. All the vim + tmux stuff seems like it's going back to where we were 20 years ago.
This is great, Jack!!
Thank you so much for sharing this, we were exploring different approaches to share components between apps.
Would you mind to do a video comparing share components using a Components library package, using Story books + npm package VS this module federation technique?? And also from the Host to the Remote, a component which code is in the host being used by the remote.
Thank you so much again, your videos are awesome! 👏
#Kudos
Currently, the most convenient, easy to maintain and test code, the most efficient way to share components between applications are various types of monorepo. Switching to Module Federation is asking for trouble ;)
What is the difference between a monorepo and module federation? I'm using Turborepo for sharing code between applications, and hot reloading works too.
awesome!!!!!!!
If I expose one component from my first miscroservice with RSpack, can I add his to my other microservice where I used webpack ModuleFederation?
I have many microservices with webpack ModuleFederation and I want to try in one of them use RSpack instead of webpack.
Thanks for awesome content!
That is magical! Mounting a Vue component inside of a React? You united the frameworks! Is this a special builder/bundler RSPack doing this? Without it this will not work?
Module Federation only moves code around. The magic in this case is just a simple function that mounts a Vue component in an element, and the corresponding useEffect in the React code to invoke it. You could do the same thing with a build time linkage. You just wouldn't automatically get the update when the Vue remote application updates.
@@jherr Thanks for the insight. Been struggling with an old vue2/webpack5 remote to get it to run in a new react/vite host. Ended up using single-spa to get it to work but I'm going to try the "magic" you explained here.
@@Desfek The "magic" is very obviously not as comprehensive as single-spa. But it really depends on what you intend to do with it. If you just need it on the page, maybe initialized with some session information or other global state, then something like this is probably good enough.
Hi Jack, can you make video on how to build two different microfrontend app in typescript react and deploy them on aws s3 bucket and consume them.
Maaan, this is awesome
Will you consider to add an authentication step and protect the remote apps? How you do that?
This video is frkn awesome though, thanks man!!
If you put that kind of auth on the JS files for your app, you could also put that on the JS modules from Module Federation. From a security perspective Module Federation is just code splitting.
This is really cool! I’m wondering if it’s possible to have dynamic imports (not defining a static remote entry file)
Yes. Look up "module federation with dynamic remotes" examples.
Hey Jack,
I have seem a lot of video on micro-frontend of yours. It's great.
Can you please make a video on how can an existing project be migrated to micro frontend?
The first question should be, why? What will you gain from this? You will only make the process of testing the application and maintaining it more difficult. MFE has a small community, where will you get information when you encounter a problem? MFE is mainly the work of one man Zack Jackson, when he is gone there will probably be no one to develop and maintain this solution... MFE does not support SSR, if your project requires good SEO, forget about MFE.
@@ukaszrozewicz7488 that's true. That's what I'm worried about. But with all the hype and claims that you should be able to scale your project as well as the team i was considering it. Should probably dig down a little bit more.
First off, let's disconnected MFEs from runtime loading. You can do MFEs at build time by just externalizing them into libraries and ensuring that there is light coupling between the MFE and the host app.
Runtime loading, like what I do here, should be primarily driven by requirements from business or product. You have a business requirement to use exactly the same code in a couple of different deployed applications and they need to update simultaneously. Then MF is a good mechanism for that. But I wouldn't add that complexity unless there was a business level reason to do so.
Great video thanks. Angular is not supported by create-mf-app. Any recommendations/docs/pointers for using MFE with an Angular app?
Talk to Agular Architects. Angular isn't supported because Angular cannot simply be installed in a stock npm module, as all the others can. I've talked with the Angular team about this repeatedly and they just shrug; use the Angular CLI or don't use Angular, your choice. I would gladly add support for Angular if they got off their high horses and started playing nice like every other framework.
Thanks Jack. Angular Team is advertising the latest release as a “Renaissance”, hopefully the next one will be more focused on collaboration…
@@bidikong They've been hyping that for the last two releases, but nothing so far.
Hi Jack , can you plz make a video on micro front end with next 14+ , I am waiting for this from a long time 😊
It would be really great seeing how rspack module federation plays out combined with webpack's and vite's module federation.
You can do exactly that using create-mf-app. Just create one without Rspack (which would be webpack) and then one with Rspack. Spoiler alert: It works just fine. I should also add an option to use Vite. I think Vite supports most, if not all, of those frameworks.
Any chance of making a video about Wundergraph Cosmo? I have a case where i should self-host it, but its docs are not that good. Their approach to the federated gateway + services seems good in theory but those subgraphs are a nightmare to work with.
This is different to the video you did a couple of years ago
Cosmo is about GQL Federation, which is not related to Module Federation. I could do a video on it, but it would probably be a sponsored video. I don't tend to do non-sponsored videos on commercial products.
I'm trying to run module federation with nextjs projects but it just doesn't work. Any ideas what can I do?
I get the concepts behind module federation, but what I am missing are some real world examples of where this would have the most benefit over other approaches. I would love t see some videos highlighting that!
Big companies with lots of teams that want to deploy independently but ALSO share code where when that code updates all uses of it are updated immediately. A header, footer, and nav system are ideal targets for that.
Could you make video for react native? How can we share code between web (react )and react native(mobile)? Thx
What about single-spa for multi-framework support ? it’s suitable for that purpose?
Yep. There is definitely overlap on the venn diagram between Single-spa and Module Federation. Single-spa does a better job than I did at packaging components and integrating them. Module Federation does a better job at sharing any type of code you want (not just components).
How does sthat work on typescript? Is it smart enough to work for big enterprise projects?
The whole concept of MFEs is designed for "big enterprise" projects since it enables multiple teams to be able to work and deploy independently. There are solves for TypeScript, but you have to understand that these are _runtime_ loaded modules and TypeScript works at build time. So what you are doing is specifying a contract for the imported runtime module, but there is no actual guarantee that the runtime loaded module actually matches that interface.
Does module federation also works with nextjs?
Hello, Can you please do a tutorial about forwardRef react hook.
does it work with nextjs (with app routing )?
The problem with this architecture (runtime imports) is that is all CSR then SEO if pretty bad... You better do local imports and just get the components at buildtime.
astro comparison video to this approach i dont see when to use which
Yaaaaaaaaaaaa.... idk.... About This.... lol
This seems to be incompatible with SSR
Yes.
Wait, what browser do you use?
Currently Arc. Reconsidering that though.
So, why not just go monorepo?
Because some people like to drive a reliable and proven Honda or Toyota, while others like to drive an unreliable and problematic Land Lover. Well, Land Rover looks better, it all depends on the priorities in your project ;)
More MF)
Sorry, but Module Federation is one of the worst architectural solutions ever invented. Difficult to maintain, difficult to test, and introduces excessive and unnecessary complexity into the architecture.
What do you propose as an optimal solution to implement MF?
welcome to the world of Micro services/frontend :)
@@marcelp4825 s xD
Haha, zoid!