Micro-Frontends: What, why and how

Thanks for this great video. I worked at a small company that used Web Components that got slotted into a React app. The React app was tiny as a result. We didn't use the term "micro front ends" but what we had basically meets your definition. I'd argue that this is definitely a standard. Certainly not a "Redux of MFEs" as you say, but still a viable standard, especially considering the variety of tools that can stamp out Web Components if you don't feel like rolling your own.

I checked now (2023) and it seems like single spa has significantly more downloads and coverage than any thing else you've described.

No standards is a deal breaker

Is it possible to create micro frontend in diffrent framework and render it in one single page application with module federation if yes how to do that configuration

Please help

Man.... you are KILLING IT. Keep up with great work!

First came applets, then portlets, then widgets and now micro frontends. The concept has been the same but the architecture behind changed a lot for good.

I see that you haven't touched micro frontends much after this time period(2-3 years ago), is it that they're not trendy anymore and monorepos are the new thing, or is it that there's nothing more to talk about them?

Can you make video on
Exposing component which is connected to api and redux store ??

To be honest, I still doubt the concept of MFE, because I see no established approach or live example, just an ad-hoc sites. How can the MFI manage authentication if each component have its own provider ? how to manage routing ? what if there is shared data between those MFI components ? How can we manage to make MFE components working together when we have fundamentally different approaches like Virtual DOM in React and a compiler for Svelte ?

Amazing video

I feel like this is a rehashing of the "Portal" architecture stuff from the mid 2000s.

Thank you for your contribution to the Software community. 👏 Your videos are awesome

I didn't get the diff between microfrontend and library. seems libraries/plugins just now have new name MICROFRONTEND 😁

what extension due use for the code snippets

Just started my first job and we’re considering adopting microfrontends for the various apps across the platform. It’s an interesting concept but I have a hard time distinguishing them from components.

Great video. I can't help but think that micro FE's could be really difficult to manage if you have multiple components that need to communicate with each other. It just sounds like a recipe for disaster to me. But maybe i'm wrong.

Hi Jack
Thanks for a great intro video on MFE. It really helped understand the concept.
However, I do have a question

We were always consuming other web portals into a host website using iframes or something similar. How ar MFEs differeent from these?

I watched this mfe THEORY video right after watching your mind-blowing mfe PRACTICAL video ("Micro-Frontends in Just 10 Minutes") -- which really helped convince me of the WHY. 👏 🤜🤛

Con: styling can be an issue, not too terribly easy to create themes that are applicable across different MFE.

Very usefull , God bless you !

I'm starting this video sceptical I'll be honest

I did implement micro apps by iframe in react until i meet with this channel,
To communicate with parent and children was really tricky and messy in Iframe. thank you!

Wy this guy is always saying "micro fernand"? It's "micro front end" 🤣🤣🤣🤣🤣🤣🤣🤣

Thanks!

Hi sir, please tell any resources to learn micro frontends in react

Awesome explanation. Thank you.

bravo!

This video made me realize, I was part of a micro front end team in my previous job 🤣. We had a mono repo for our micro frontends and we shared each other's teams reusable code by developing private npm packages for sharable code like UI libraries. We had micro frontends within a micro frontend if you consider loading different page sections in iframes which was crazy at first.

Thanks for the video. How should you unit test your app?

Thanks @Jack Herrington for making MF such easy way to implement.
Currently, I am struggling with "Cross micro frontends communication" with mono angular MF, through a common/ shared service between all the MFs.

I hope, I am not alone, Many of us going through same challenge, If you could share any article/ video. From there we can take reference.


Thanks in advance. I am waiting for hear something from you.

Hi, thanks for the explaination, my query is regarding is it possible achieve single spa of MF1 of AngularJs and MF2 Angular 9+ in vanilla JS root container or something like root-container will be Angular 10 or 13 and exposed MF's ie. AngularJs and Angular 2+ ? If it is possible please help to understand.

How does microfrontend differ from webcomponents?

I have a question. We're working on a POC app at work and we use microservices and microfrontends for the architecture.
We are dockerizing everything, every microfrontend and microservice. How would you go about having the different microFE containers communicate with each other?

Any blogs, forums or vids will help. Basically any rresource XD

I have a question. We're working on a POC app at work and we use microservices and microfrontends for the architecture.
We are dockerizing everything, every microfrontend and microservice. How would you go about having the different microFE containers communicate with each other?

Thank you, there are many helpful videos from you about MFEs.

It was just great and clean like yourself

Awesome! Are you planning to make a tutorial on micro-frontends? I would love to see a nice app split in micro-frontends, with routing, auth, and some code sharing

Might be a stupid question, but say you have a Design System / Component-Library / UI-Kit that lives within a Monorepo alongside, let’s say an AppShell (Host App), products page and a cart page.

All of them are MFs and all of them consume, let’s say the ButtonComponent from our component library. Does the code of the Button gets baked into each and every MF resulting basically in duplicated code and larger bundle per MF?

Or would you have to setup each and every component of the library as own MF to be able to consume it without duplication (resulting in a lot of request - because you other stuff out of the library too).

Or is there a chance that the shell imports the UI-Kit and kind of exposes all it’s contents (wildcard expose?!).

I really enjoyed the video - like all your other stuff ✌🏻❤️

Micro frontend concept is created by architect, not developer. The architect try to educate developer how to implement a vision he has, but the he doesn't know how to do it. It is politics, chaos, mess. It is vietname war that you can't win.

The first 3 minutes of this video makes me think of components in a React app. Components are individual blocks of code that do something. The code for such components are often found in 1 file among a collection of other components.

Thanks a lot!

Thank you sir, Gold content 🙏.

Ah, jeez. Everything old is new again. I was at a company building re-usable server side components in early 2000s for various industries, which would embed in their web pages. Now, just because we're moving some code to the front end we're suddenly using the "micro-frontend" buzzword. People were doing this crap with iframes since the year dot until that was disparaged.

How is this any different from a component ?

I started developing websites in the early 90s and did it professionally for about 6 years, then took a 20 year break.... it is funny coming back and seeing that all the headaches have been fixed. I want to make an uphill, both ways, joke

Really a good short and precise video, doing exactly what the title said it would do. And I'm now confidant that MFE is the wrong path for our current project. 👍

At a previous job, we tackled micro front ends by basically having a some shared header code, which was written in plain JavaScript html, hosted somewhere; this was injected into the page on load and rendered. The header had all of the links to the various micro uis, and each micro Ui was built and deployed individually by different teams. Some of the stuff you mention sounds like you took it to the next level (which is cool) such as having sub components of pages loaded and rendered via xhr request. I’ve switched projects since then, but it was a cool learning experience! Thanks for the video

your videos are gold

Although you explained the difference between a library and a micro frontends I just don't really understand what you meant when you said micro frontends are different because they can be deployed independently. So can libraries can't they? I'm not sure what you meant. It's just not clear to me why you'd use a micro frontend over a library and how they really differ?

microfronends