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

[@nikhilprabhakar7116]

Thanks!

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

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

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

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

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

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

[@theworld5937]

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

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

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

[@DevAditya]

😳😳😳 Shocked! It's amazing BTW 😍

[@shubhasingh7583]

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

[@10x-developer]

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

[@theprodev]

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

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

[@clouatre3034]

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

[@TheArkadyuti]

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

[@lechos5245]

Wow, absolutely fantastic!

[@dattugaade]

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

[@albo4life6082]

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

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

[@AlexCrudu]

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

[@jherr]

Blame KZbin. 😂

[@alexandrkositsky7698]

Big thanks for video 🔥 Very clear explanation

[@chrissullivan331]

Thanks for the tutorial Jack, informative as always.

[@saikun0293]

This video is a gem! Thanks for the content

[@aileenchan3741]

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

[@Drvo3]

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

[@DaggieBlanqx]

This video is on point! Thank you!

[@ralphlargo9728]

You saved my job again Jack, thank you 🎉

[@RobertoGPuentesDiaz]

Great Video Tutorial. Cheers from Argentina

[@clebsgaming92]

Amazing content, thank you very much Jack!

[@yassinebouchoucha]

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

[@danielpuerta2386]

Really, really amazing explanation!! 🎉

[@franklinendaya9906]

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

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

[@mdminhazahamedrifat3282]

Such a wonderful video. Thumbs up

[@mrc-kit83]

Useful and well explaned. Cheers!

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

[@LahiruKurukulasuriya]

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

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

[@yusufansari7618]

You are the gem jack!!!

[@alinawaz4034]

Amazing video, Very good teaching style

[@TheDorac1]

This was amazing! Thank you.

[@matts8857]

Awesome stuff as usual Jack!

[@miguelship3]

This is next level of coolness man!!

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

[@SebastianVuye]

Great explanation, thanks!

[@PiyushChauhan2011]

Amazing, my cents for the book already

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

[@sagarreddy7461]

It's amazing, zing zing jack. Thanks!

[@alisanad9048]

Thank you, you're amazing!

[@ParthaSarathylink]

Great explanation

[@jr-hp7er]

Wow, Jack! Amazing ❤️🙌

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

[@haquocviet9253]

wow, so amazing. thanks your for open my eyes

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

[@daytcg3186]

Thank you It’s easy to be understood,

[@DuyTran-ss4lu]

Super awesome. Thanks

[@fadiliabdeljalil770]

Great tutorial, Thanks

[@the_coder241]

🔥🔥🔥🔥 love it!!

[@trent3589]

Great video mate

[@natanloterio]

That was so cool, thank you

[@Micsc]

Thanks, I have to dive deeper into this stuff.

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

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

[@JoanJimenez]

This is brilliant.

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

[@kettenbach]

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

[@jherr]

Challenge accepted. 😂

[@afrikanonyma]

You just got a new subscriber ... great !

[@dars1816]

it's like magic wtf

[@eferesen]

Thanks so much!

[@RavindraSingh-lp9pl]

plz create more such advanced topics

[@aseep0109]

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

[@BetterDayEachDay]

This is freakin awesome

[@MrCoolByte]

How well does typescript play with this? since the code is pulled at runtime, I'm guessing you won't get type info on the host right?

[@jherr]

I have a video on that in the playlist. Basically you need to have a shared "contract" declared interfaces in an NPM module that is brought into both the host and the remote. Because, yeah, you're right, at the point where the TypeScript is compiled into JS the types are gone. And even if they weren't gone tsc has no capacity to grab some types from remote code. I should probably update that video now that I've got a lot more TS experience.

[@MrCoolByte]

@@jherr Thanks alot for your prompt response. I hope you channel gets the attention it deserves, really one of the best coding channels out there.

[@morningstarsci]

the idea behind this is that parts of the front-end could be maintained separately by different teams. doesn't this make testing more difficult because it obscures end usage and creates yet another place for team communication and planning to break down?

[@fagundezantony2358]

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

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

[@davidk.6834]

Sick transition 😂

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

[@kamilkuriata1747]

Great explanation :)

[@helloworld2740]

Just too awesome channel

[@deficx]

Module federation seems like such a next-level feature, but it feels so clumsy with Angular which is a bit bummer (or maybe there's a gap in my knowledge). I can't seem to find a proper way to use exposed components without using lazy loaded modules with Angular Router. Every example and repo seems to either use some directive to "create" the remote component, or a wrapper component to do the same. Looks so simple and clean with React/SolidJS though!

[@jherr]

I think it's the dependency injection that makes it harder to get Module Federation running on Angular. You end up having to work around that a lot.

[@muzammilrafay4348]

Amazing Explanation 🙂

[@hamburger-fries]

Loving this content!

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

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

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

[@halffull6279]

Great tutotial

[@b_mathemagical]

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?

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

[@Ernuna]

Jack, can you tell how did you create this create-mf-app cli?

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