Micro-Frontends in Just 10 Minutes
Vložit
- čas přidán 1. 06. 2024
- Take ten minutes to create three applications using Module Federation to create and share a Micro-Frontend between SolidJS and React.
Check out our book "Practical Module Federation": module-federation.myshopify.com/
As well as the playlist of Module Federation videos: • Module Federation
Code: github.com/jherr/micro-fes-in...
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 I'm a host on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
00:00 Introduction
00:13 Creating the host app
01:00 Creating the remote app
02:10 Creating the Micro-Frontend
04:05 Exposing the Micro-Frontend
04:45 Consuming the Micro-Frontend
07:00 Creating the React host app
08:00 Wrapping the Micro-Frontend
09:00 Consuming the Micro-Frontend in React
10:18 Outroduction
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#microfrontends #modulefederation #webpack5 #react #solidjs - Věda a technologie
Hey jack, amazing content! These concepts are too tough for beginners though 😂 can you give simple example of what basically microfrontend is
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.
This channel isn’t exactly for beginners!
His past videos dive deep in the concept :)
Jack's playlist answers all your questions regarding that.
"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).
Holy crap. This was one of those rare times where a video is just great all the way through. No BS, just pure content. High quality content.
Senior content is always hard to find, thanks very much for being different
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
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 CZcams 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 🙌🏻
Amazing content. So great to see this, and the cross framework example was spot on. Hoping to put these concepts into work soon.
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
Best video for a basic understanding of micro frontends.
Great video quality!! You are one of the best programmers that I have found on the CZcams :)
I have never this explained so simple like you did. Great video!
Wow, absolutely fantastic!
Awesome demonstration 🎉 and cool concept. It's really useful when the company wants to move gradually from one framwork to another.
Thank you sir, I have an upcoming HLD meeting in next 2 hr and I really needed this
This is extremely good content. Finally something worth to watch. Great explanation and clarity of the topics.
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)!
This solution is very much a game changer.
Great content Jack, thank you! I’m currently importing several npm modules made with TSDX, but will be giving this approach a try
Hi Myles!!
there is a lot of us, are you using plain rollupjs??
PD: I'm in the same situation.
PD: sorry for my bad English 😅😅
Awesome video. Explained in an easy way with simple example. Thanks
Man, this rules. THANK YOU! Game changer for a lot of my future work.
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.
10 mins of great content, thank you for all your effort.
Thanks for the tutorial Jack, informative as always.
Hey Jack!! Your content is amazing!!! Thanks for sharing this!
Greetings from Argentina!
Ok you sold me on this with this video. I need to schedule some time to study this each week.
This video is on point! Thank you!
Woah, so much information here! Will do some research on micro-frontends! Thank you! : D
Great job Jack. Nice tool!
This guy is the best developer instructor I have ever seen.
Big thanks for video 🔥
Very clear explanation
Amazing content, thank you very much Jack!
Useful and well explaned. Cheers!
Really, really amazing explanation!! 🎉
Awesome stuff as usual Jack!
plz create more such advanced topics
Such a wonderful video. Thumbs up
New stuff, good stuff, and also web presented greetings from Lithuania 🇱🇹
Great intro on microfrontends! Can you also cover topics on how to share states between microfrontends in the future?
Amazing video, Very good teaching style
Great Video Tutorial.
Cheers from Argentina
This video is a gem! Thanks for the content
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 :)
This was amazing! Thank you.
Thanks, I have to dive deeper into this stuff.
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.
U are so amazing. I love people that put their all into things they love 💯💯
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 🇨🇳🇭🇰 🥮🐇🧨🏮
This channel is the gold man. I'm impressed with the quantity and quality of our videos. Thank you for sharing.
Great explanation, thanks!
Great tutorial, Thanks
HOW DID I NOT STUMBLE ON YOU BEFORE! Amazing content. Thanks!
Blame CZcams. 😂
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
You saved my job again Jack, thank you 🎉
This is next level of coolness man!!
Thank you It’s easy to be understood,
Amazing, my cents for the book already
You are the gem jack!!!
Wow, Jack! Amazing ❤️🙌
wow, so amazing. thanks your for open my eyes
That was so cool, thank you
Great explanation :)
You just got a new subscriber ... great !
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.
I became a fan of you since I watched MFEs using single spa video
It's amazing, zing zing jack. Thanks!
Super awesome. Thanks
Gold! This is so valuable. Thank you for sharing you knowledge.
Jack my only question here is for the host/shell application can we handle ALL routing at that level for the remotes?
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: czcams.com/video/W0RbrAZtj7I/video.html
@@jherr thanks!
Great explanation
Thank you, you're amazing!
Loving this content!
Thanks so much!
Amazing Explanation 🙂
😳😳😳 Shocked! It's amazing BTW 😍
WOOWW it's greatt!!! thx Jack!!!!!
Great tutotial
Just too awesome channel
This is brilliant.
cross Framework App ! that's what we 've been waiting for.
Another great explanation Jack 👊🏽.
How real production applications will be handled related to dynamic server ports and hostnames?
Thanks a lot for another great content.
For remotes you set the publicPath to the deploy URL base path when doing a prod build. For hosts you change the remote URL based on the build mode. And that’s really all there is to it. You can get the build mode as a parameter to the function that returns the config. (And you have to change the config into a function that returns an object as opposed to just an object). I have a video on it.
Thats awesome. I feel stupid for messing around with s now 😁
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: czcams.com/play/PLNqp92_EXZBLr7p7hn6IYa1YPNs4yJ1t1.html
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.
@@jherr Awesome, thank you so much and I cannot wait for the next content
Great video, Jack. I just curious does all the apps have to run Webpack the same time to make this happen?
They all have to be bundled by Webpack 5. There is a rollup module federation plugin, but I think it can only consume federated modules.
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.
@@jherr Getting confused by using module federation to build MFEs versus Web Components. Do you have any content which addresses this? Thx
@@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.
amazing. great content!
do you have any video that explores this tech in depth? like how it this magic works.
The videos in the playlist are definitely slower paced and go into more detail. And zack Jackson has some really deep videos on the internals.
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.
Another banger Jack my Boy. Great content. Thanks for sharing. How can we work webassembly and rust in to this 🤔
Challenge accepted. 😂
Very cool!!
Amazing content!!!!
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.
I hadn't really planned on it. I'll keep it in mind tho.
Great video. I'm imagining that leveraging micro-frontends can have some pretty gnarly performance implications though. You'd be loading React and Solid.js in this example, right?
🔥🔥🔥🔥 love it!!
Awesome content 👌
Thanks Jack! Your 2-hour tutorial posted by freecodecamp gave me confidence in navigating our switch from monolith to micro-FEs. Coffee on me!
Thank you so much!
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.
Thanks!
Hey Jack! Whats the plugin that you're using for 'cd' command to show you the directories to which you want to navigate? Thank you! Btw, great content!
Thanks for this amazing content. i have a question. can microfrontend work in apps on different repositories?
Sick transition 😂
Great video! So can you please make a video using Piral
This is gold ❤
it's like magic wtf