Micro-Frontends in Just 10 Minutes

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

[@adarshpandya]

Hey jack, amazing content! These concepts are too tough for beginners though 😂 can you give simple example of what basically microfrontend is

[@jherr]

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.

[@omarkarim9298]

This channel isn’t exactly for beginners!

[@Brunoenribeiro]

His past videos dive deep in the concept :)

[@CFXTBogard]

Jack's playlist answers all your questions regarding that.

[@peerreynders1824]

"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).

[@theprodev]

Amazing content. So great to see this, and the cross framework example was spot on. Hoping to put these concepts into work soon.

[@marcelinoborges5088]

I have never this explained so simple like you did. Great video!

[@mccall7122]

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.

[@ram-bk4mu]

Great video quality!! You are one of the best programmers that I have found on the KZbin :)

[@amansaxena4446]

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

[@jakhongirabdukhamidov2796]

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

[@shubhasingh7583]

10 mins of great content, thank you for all your effort.

[@garywaddell6309]

Hey Jack! I searched KZbin 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 🙌🏻

[@ngochunglongnguyen4523]

Awesome demonstration 🎉 and cool concept. It's really useful when the company wants to move gradually from one framwork to another.

[@Drvo3]

This is extremely good content. Finally something worth to watch. Great explanation and clarity of the topics.

[@clouatre3034]

Man, this rules. THANK YOU! Game changer for a lot of my future work.

[@Ca-rp7bv]

Senior content is always hard to find, thanks very much for being different

[@dattugaade]

Awesome video. Explained in an easy way with simple example. Thanks

[@chrissullivan331]

Thanks for the tutorial Jack, informative as always.

[@turokII]

Great content Jack, thank you! I’m currently importing several npm modules made with TSDX, but will be giving this approach a try

[@fagundezantony2358]

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 😅😅

[@Astral_Dusk]

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

[@claudioseccia9380]

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

[@jherr]

This solution is very much a game changer.

[@SwiftySanders]

Ok you sold me on this with this video. I need to schedule some time to study this each week.

[@thiccboi6211]

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.

[@aileenchan3741]

Woah, so much information here! Will do some research on micro-frontends! Thank you! : D

[@AlexCrudu]

HOW DID I NOT STUMBLE ON YOU BEFORE! Amazing content. Thanks!

[@jherr]

Blame KZbin. 😂

[@fagundezantony2358]

Hey Jack!! Your content is amazing!!! Thanks for sharing this! Greetings from Argentina!

[@matts8857]

Awesome stuff as usual Jack!

[@niloneregato5097]

Great job Jack. Nice tool!

[@lechos5245]

Wow, absolutely fantastic!

[@theworld5937]

This guy is the best developer instructor I have ever seen.

[@DaggieBlanqx]

This video is on point! Thank you!

[@clebsgaming92]

Amazing content, thank you very much Jack!

[@saikun0293]

This video is a gem! Thanks for the content

[@TheArkadyuti]

Thank you sir, I have an upcoming HLD meeting in next 2 hr and I really needed this

[@marcelinorguez]

Useful and well explaned. Cheers!

[@danielpuerta2386]

Really, really amazing explanation!! 🎉

[@mdminhazahamedrifat3282]

Such a wonderful video. Thumbs up

[@rodrigomoura2108]

This channel is the gold man. I'm impressed with the quantity and quality of our videos. Thank you for sharing.

[@alexandrkositsky7698]

Big thanks for video 🔥 Very clear explanation

[@TheDorac1]

This was amazing! Thank you.

[@DevAditya]

😳😳😳 Shocked! It's amazing BTW 😍

[@10x-developer]

New stuff, good stuff, and also web presented greetings from Lithuania 🇱🇹

[@miguelship3]

This is next level of coolness man!!

[@Dev-Phantom]

Best video for a basic understanding of micro frontends.

[@albo4life6082]

U are so amazing. I love people that put their all into things they love 💯💯

[@Micsc]

Thanks, I have to dive deeper into this stuff.

[@KriztianEinsamkeit]

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.

[@alinawaz4034]

Amazing video, Very good teaching style

[@franklinendaya9906]

Great intro on microfrontends! Can you also cover topics on how to share states between microfrontends in the future?

[@yusufansari7618]

You are the gem jack!!!

[@RobertoGPuentesDiaz]

Great Video Tutorial. Cheers from Argentina

[@ralphlargo9728]

You saved my job again Jack, thank you 🎉

[@Hitotsuday]

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

[@daytcg3186]

Thank you It’s easy to be understood,

[@jr-hp7er]

Wow, Jack! Amazing ❤️🙌

[@SebastianVuye]

Great explanation, thanks!

[@matthew1106]

Gold! This is so valuable. Thank you for sharing you knowledge.

[@matthew1106]

Jack my only question here is for the host/shell application can we handle ALL routing at that level for the remotes?

[@jherr]

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: kzbin.info/www/bejne/jWG1k6V3j9mdbas

[@matthew1106]

@@jherr thanks!

[@fadiliabdeljalil770]

Great tutorial, Thanks

[@Luxcium]

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 🇨🇳🇭🇰 🥮🐇🧨🏮

[@natanloterio]

That was so cool, thank you

[@haquocviet9253]

wow, so amazing. thanks your for open my eyes

[@LahiruKurukulasuriya]

I became a fan of you since I watched MFEs using single spa video

[@PiyushChauhan2011]

Amazing, my cents for the book already

[@naturecultureafrica]

You just got a new subscriber ... great !

[@sagarreddy7461]

It's amazing, zing zing jack. Thanks!

[@hamburger-fries]

Loving this content!

[@GiriJeedigunta]

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

[@kamilkuriata1747]

Great explanation :)

[@zacharywagner3519]

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!

[@jherr]

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.

[@alisanad9048]

Thank you, you're amazing!

[@aseep0109]

WOOWW it's greatt!!! thx Jack!!!!!

[@DuyTran-ss4lu]

Super awesome. Thanks

[@JoanJimenez]

This is brilliant.

[@yassinebouchoucha]

cross Framework App ! that's what we 've been waiting for.

[@ParthaSarathylink]

Great explanation

[@helloworld2740]

Just too awesome channel

[@davidk.6834]

Sick transition 😂

[@eferesen]

Thanks so much!

[@muzammilrafay4348]

Amazing Explanation 🙂

[@the_coder241]

🔥🔥🔥🔥 love it!!

[@RavindraSingh-lp9pl]

plz create more such advanced topics

[@halffull6279]

Great tutotial

[@matteolorenzoni9975]

Amazing content!!!!

[@MarkDekkersLife]

This is freakin awesome

[@aminomar7890]

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.

[@jherr]

I hadn't really planned on it. I'll keep it in mind tho.

[@sujithgnth]

This is gold ❤

[@cannotthinkofanybetterhandle]

Very cool!!

[@filipe7rito]

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.

[@jherr]

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.

[@mohammedsahil7618]

Awesome content 👌

[@kettenbach]

Another banger Jack my Boy. Great content. Thanks for sharing. How can we work webassembly and rust in to this 🤔

[@jherr]

Challenge accepted. 😂

[@lixiao2882]

Thanks Jack! Your 2-hour tutorial posted by freecodecamp gave me confidence in navigating our switch from monolith to micro-FEs. Coffee on me!

[@jherr]

Thank you so much!

[@MrJellekeulemans]

Thats awesome. I feel stupid for messing around with s now 😁

[@joaomelo6642]

amazing. great content! do you have any video that explores this tech in depth? like how it this magic works.

[@jherr]

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.

[@jacobmartin6686]

Aweeesoome content pal

[@kevinrobertandrews]

Hey Jack, cool video! I've never considered building microfrontends. Could you please describe some real-world use cases for this type of architecture?

[@jherr]

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]

@@jherr Getting confused by using module federation to build MFEs versus Web Components. Do you have any content which addresses this? Thx

[@jherr]

@@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.

[@wajid4627]

Great video! So can you please make a video using Piral

[@abhisheksharma9796]

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

[@jherr]

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.

[@RobertoFabrizi]

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...

[@jherr]

Many of those questions are answered in the videos in the Module Federation playlist: kzbin.info/aero/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.

[@RobertoFabrizi]

@@jherr Awesome, thank you so much and I cannot wait for the next content

[@nikhilprabhakar7116]

Thanks!

[@williamnarmontas9549]

Subscribed.

[@kaizhu1702]

Great video, Jack. I just curious does all the apps have to run Webpack the same time to make this happen?

[@jherr]

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.

[@Kekfalar]

Hey Jack, first let me thank you for this awesome channel 👏. So in Micro Frontends, components usually need to talk to each other, for example we add an item to a cart which is a micro frontend react app and the cart itself is written in another microphone app in Vue, how can we send the info over to the cart or how to tell it to fetch the new data?

[@jherr]

Really it's just JavaScript on the page, right? So pretty much any communications mechanism that the Micro-FEs can share will work. You could use custom-events fired against window if you want something super lightweight. You could also share another federated module that has an agnostic state manager (e.g. RxJS). Really just depends on how heavyweight you want the solution. For my money, less state sharing is better. Also, you can pass props down to MFEs. I didn't do it here so that I could keep the video short, but that works as well. So you could pass down both state and callback functions.

[@RobertoFabrizi]

Absurdly good