Micro-Frontends demystified in just 25 minutes! #frontend #developers #technology #react #web

In this video, I break down the concept of micro-frontends, explaining what they are and how they can revolutionize web development. I'll explore how micro-frontends can help scale teams within an organization, making it easier to manage and develop complex applications. Through clear, concrete examples, you'll learn how to effectively divide a website into micro-frontends, ensuring modularity and efficiency. Whether you're a developer, tech lead, or just curious about the latest in web architecture, this video will provide you with the insights and practical knowledge you need to get started with micro-frontends.

Resources in the video:

Chapters:

00:00 Problem space
00:31 Micro-Frontends introduction
02:57 What are Micro-Frontends
03:46 Micro-Frontends vs Components
04:55 Multi-framework approach
05:42 Reusability
6:44 Team ownership
07:19 Micro-Frontends deployment
08:41 Frontend Discovery Service
08:52 How to identify Micro-Frontends in your application
18:02 Vertical vs Horizontal split
20:03 The core team
21:53 Value stream teams
22:58 Companies using Micro-Frontends
23:41 TLDR

===================================

Follow me for more tips!

[Myc]

You are welcome 🤗 if you have any question just ask, happy to help if I can

[JagaSantagostino]

Thanks for pressing about ME vs Components differences, very easy to make a mess without that separation

[willchadwick]

That section about Reusability, and adjusting your mental model to focus on a different set of priorities is so important. Thanks.

[matheusdamiao]

Amazing video! So many valuable lessons packed into 25 minutes!

One thing that really caught my attention was how you related micro-frontends to different pieces of shared data, like products. If I understood correctly, it seems these micro-frontends are tied to distinct business domains, which are also commonly separated in the backend through microservices. Is there a specific name for this approach? It feels somewhat like a "domain-driven" or "data-centric" design in the frontend.

I'm curious about how this data-centric approach connects with domain separation in the frontend, as it's something we're used to seeing more on the backend with microservices. Thanks again for the insights!

[flexidesks]

I forwarded through most of this because I was looking for your actual technical suggestions on how to combine the micro front ends. Do you suggest a particular framework?

[denyspavlenko]

And what about reusing some ui components like buttons or sliders? Or what if there is a huge component with redux state which is needed to be used on several pages, how should it be structured?
And in general, with this approach there is no way to share a single redux state across pages?