Micro-Frontends: What, why and how

Find out all about Micro Frontends at the high level. Why are they interesting? What are the advantages and disadvantages? And how would you get started in moving your site into a Micro-FE architecture.

Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates.

#micro-fe #micro-frontend #web-development #web-architecture

[WebDevCody]

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

[viraj_singh]

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.

[tonymcconville]

This was a great video, the company I work for is shifting to this architecture and this explained it far better than they have.

[rfkashani]

Greetings from Redmond, WA :) Thank you, your videos are awesome! I spent the last few hours binge watching your playlist. Nice to see how far the industry has come along. Back in 2015, I worked at Microsoft and we built a proprietary micro-frontend for Azure.

[alexgochenour]

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.

[pph]

Take a shot every time he says micro-frontend / MFE. All jokes aside, I love your videos.

[SkyrimBeast]

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.

[Katan]

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

[naudemalounguila]

Thé information is 1 year old and still relevant. Thank you.

[PatsCeltsBruinsSoxs]

I just want to say Jack, you're awesome! Your ability to break things down and explain they "why" to any technology is uncanny. Keep it up!

[ionut-cristianratoi]

A really helpful video! I like that you presented both the aspects (pro and cons). This way, you will better know when it's a good idea to use it and when it's not.

[malikrajat]

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.

[thelavishcoder]

This is awesome. I’ve been writing config based code for the last 3 years and finally something comes out that is going to make this style the norm. I can’t wait for this to happen.

[vakhtangnodadze]

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

[devrano]

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!

[flemminghansen]

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

[erhan.emrah.fırat]

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

[shahji]

This is a good Intro. You should share more examples or tutorials on how to begin with Micro Frontends.

[DarrenJohnX]

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. 👏 🤜🤛

[MrRacn]

Excellent video. The way you broke this concept down made it very simple to understand.