Micro-Frontends in Just 10 Minutes

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

[@PeerReynders]

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

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

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

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

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

[@nikhilprabhakar7116]

Thanks!

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

[@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!

[@abdullahfurkanozbek7558]

Great explanation, I did know some stuff and how it works. But it is really great to see how we can setup these nested projects.Great video.

[@theworld5937]

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

[@Dev-Phantom]

Best video for a basic understanding of micro frontends.

[@SwiftySanders]

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

[@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 🙌🏻

[@ram-bk4mu]

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

[@marcelinoborges5088]

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

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

[@ngochunglongnguyen4523]

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

[@TheArkadyuti]

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

[@clouatre3034]

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

[@10x-developer]

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

[@shubhasingh7583]

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

[@rodrigomoura2108]

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

[@niloneregato5097]

Great job Jack. Nice tool!

[@lechos5245]

Wow, absolutely fantastic!

[@ralphlargo9728]

You saved my job again Jack, thank you 🎉

[@yusufansari7618]

You are the gem jack!!!

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

[@dattugaade]

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

[@RobertoGPuentesDiaz]

Great Video Tutorial. Cheers from Argentina

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

[@LahiruKurukulasuriya]

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

[@trent3589]

Great video mate

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

[@yassinebouchoucha]

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

[@matts8857]

Awesome stuff as usual Jack!

[@franklinendaya9906]

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

[@miguelship3]

This is next level of coolness man!!

[@theprodev]

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

[@DevAditya]

😳😳😳 Shocked! It's amazing BTW 😍

[@saikun0293]

This video is a gem! Thanks for the content

[@DaggieBlanqx]

This video is on point! Thank you!

[@PiyushChauhan2011]

Amazing, my cents for the book already

[@chrissullivan331]

Thanks for the tutorial Jack, informative as always.

[@alexandrkositsky7698]

Big thanks for video 🔥 Very clear explanation

[@clebsgaming92]

Amazing content, thank you very much Jack!

[@alinawaz4034]

Amazing video, Very good teaching style

[@mrc-kit83]

Useful and well explaned. Cheers!

[@Drvo3]

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

[@mdminhazahamedrifat3282]

Such a wonderful video. Thumbs up

[@ParthaSarathylink]

Great explanation

[@kamertonaudiophileplayer847]

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.

[@danielpuerta2386]

Really, really amazing explanation!! 🎉

[@hamburger-fries]

Loving this content!

[@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!

[@albo4life6082]

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

[@TheDorac1]

This was amazing! Thank you.

[@aseep0109]

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

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

[@sagarreddy7461]

It's amazing, zing zing jack. Thanks!

[@kettenbach]

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

[@jherr]

Challenge accepted. 😂

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

[@SebastianVuye]

Great explanation, thanks!

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

[@JoanJimenez]

This is brilliant.

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

[@dars1816]

it's like magic wtf

[@Micsc]

Thanks, I have to dive deeper into this stuff.

[@fadiliabdeljalil770]

Great tutorial, Thanks

[@flaviuivanciuc3859]

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!

[@daytcg3186]

Thank you It’s easy to be understood,

[@helloworld2740]

Just too awesome channel

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

[@jr-hp7er]

Wow, Jack! Amazing ❤️🙌

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

[@afrikanonyma]

You just got a new subscriber ... great !

[@alisanad9048]

Thank you, you're amazing!

[@RavindraSingh-lp9pl]

plz create more such advanced topics

[@natanloterio]

That was so cool, thank you

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

[@haquocviet9253]

wow, so amazing. thanks your for open my eyes

[@BetterDayEachDay]

This is freakin awesome

[@sourabhvaishnav8235]

He is the JACK of ALL.

[@DuyTran-ss4lu]

Super awesome. Thanks

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

[@MilMike]

Hi, awesome content. I have a question. You have that micro frontend as a federated module. Is it also considered a "micro frontend" if I create a package and publish it to npm (or in my case to a private registry like verdaccio). So then I can install that micro frontend using npm. It looks just like a normal component which is sitting in npm.. which basically is. I am just starting with micro frontends and I am not sure about it. Any thoughts?

[@jherr]

The term micro-frontend doesn't AFAIK have a specific technical definition. If you have a self-contained component that manages all of its state and talks to the backend if it needs to and presents a complete user experience, then to me that's a micro-frontend.

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

[@davidk.6834]

Sick transition 😂

[@mambatukaa]

Hey Jack, thanks. I have a one question. How that terminal suggestion work on terminal?

[@jherr]

I use Fig and oh-my-zsh.

[@mambatukaa]

@@jherr thanks 😀

[@thomasmeerpohl2438]

Hey Jack, thank you for the video. Is this only possible with webpack or do other bundlers also support module federation?

[@jherr]

No other bundlers officially support Module Federation currently AFAIK.

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

[@rp3058]

Love your videos! Quick question about the Practical Module Federation book: What is the book-format (printed book, ebook, kindle, pdf)?

[@jherr]

It's PDF and ePub.

[@rp3058]

@@jherr Thanks!

[@eferesen]

Thanks so much!

[@dhawald7]

Hi Jack! Great content! Quick question, if we change the publicPath in the remote app do we need any changes in the host app? I changed the remote url in the host app but get 'Chunk Load Error'. Would appreciate if you could guide me on this. Thanks!

[@jherr]

As long as the remote entry location doesn't change you should be ok. That being said, maybe a cache problem, and maybe have a look at the network inspector to make sure it's loading from the same place. You can also take this question to the #module-federation channel on the Discord server.

[@dhawald7]

Thanks for the reply Jack! I found the problem. My remote app is on 3000 and host on 3001. When I change the publicPath in remote app the host app is tries to load the remote chunks from localhost:3001(the host's address itself) instead of localhost:3000(the remote's address). Not sure what could be the reason and how to resolve it.

[@jherr]

@@dhawald7 You should join the Discord server and take your question to the #module-federation channel. But be sure to read the posting #rules first. Please don't post screenshots. And if you have a very small test app that demonstrates the issue that you can post on GitHub so that we can look at it, that would be great.

[@antoncaballes1846]

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.

[@fagundezantony2358]

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

[@the_coder241]

🔥🔥🔥🔥 love it!!

[@fezekileplaatyi7224]

Thanks, Jack, great content! Just a quick question, can we share the state for example updating the state on solid-js and have that replicated to react app with this architecture?

[@jherr]

Yeah, you just need to have view library agnostic state manager. I tend to use something like RxJS for that. It's simple, somewhat lightweight, and it's easy to use and agnostic.

[@fezekileplaatyi7224]

@@jherr awesome, thank you so much. I will look into that

[@goldydog1]

Thanks for the great video! Are there any approaches for handling global state or SSR with this approach? Would you still recommend module federation over something like Astro that allows multiple frameworks in a single app?

[@jherr]

Global state is actually pretty easy. I would recommend limiting the amount of shared state though. SSR is tricky because you have to figure out a way to force the servers or lambdas to update their MFEs. So that’s not trivial. As for running multiple frameworks. If you don’t need runtime loading, if you can do build time sharing then Astro is an excellent choice.