Skip to content

santoshshinde2012/micro-frontends-mindmaps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Micro-Frontend Mindmaps

What

In this repository, you will find mindmaps we created about Micro-Frontend based on public information. As all of the information is already in the public domain, please feel free to use and share these mindmaps however you like.

What is Micro-Frontend ?

Micro-frontends are the technical representation of a business subdomain, they allow independent implementation with the same and different technology.

Please find the key factors for micro-frontends below.

  • Decomposed
  • Independent
  • Tech-Agnostic
  • Deployable Separately
  • Loosely Coupled
  • Customizable
  • Updated Incrementally
  • Fault-Tolerant

The History of Microfrontends

The History of Microfrontends

Micro-frontends decisions framework

The 4 pillars that we need to decide up-front when architecting micro-frontends, as stated by Luca Mezzalira here in his medium article - Micro-frontends decisions framework.

graph TD;
  A1[Micro-frontends decisions framework]-->B1[Definition];
  A1[Micro-frontends decisions framework]-->B2[Composition];
  A1[Micro-frontends decisions framework]-->B3[Route];
  A1[Micro-frontends decisions framework]-->B4[Communication];
Loading

Defining Micro-Frontends

Identifying micro-frontends becomes quite straightforward. Understanding how users behave is of great use in determining our micro-frontends. You can read Luca Mezzalira's full article here for more details.

Identifying micro-frontends in our applications

graph TD;
  A1[Defining Micro-Frontends]-->B1[Horizontal split];
  A1[Defining Micro-Frontends]-->B2[Vertical split];
  B1--Domain Driven Design-->C1[Core Subdomains]
  B1--Domain Driven Design-->C2[Supporting Subdomains]
  B1--Domain Driven Design-->C3[Generic Subdomains]
  B2--Domain Driven Design-->C1[Core Subdomains]
  B2--Domain Driven Design-->C2[Supporting Subdomains]
  B2--Domain Driven Design-->C3[Generic Subdomains]
Loading

Composition of Micro-frontends

Analyzing how different frameworks can be used with different micro frontends on the same page.

graph TD;
  A[Composition of Micro-frontends]-->A1[Client-side composition];
  A[Composition of Micro-frontends]-->A2[Edge-side composition];
  A[Composition of Micro-frontends]-->A3[Server-side composition];
  A[Composition of Micro-frontends]-->A4[Build Time Composition];
Loading
1. Client-side composition

Client Side Composition is one of the patterns that combine Fragments on client-side

graph TD;
  A1[Client-side composition]-->B1[Fragments]
  A1[Client-side composition]-->B2[Libraries]
  B2[Libraries]-->C1[single-spa/single-spa]
  B2[Libraries]-->C2[frintjs/frint]
  B2[Libraries]-->C3[smapiot/piral]
Loading
2. Edge-side composition

Basically its combination of client side and server side composition to take the advantages of CDN caching. Idea behind edge-side composition – fragments are stitched together, close to the client.

graph TD;
  A1[Edge-side composition]-->B1[Lambda Edge]
  A1[Edge-side composition]-->B2[Rendering Example]
  B1[Lambda Edge]-->C1[AWS Lambda CloudFront]
  B2[Rendering Example]-->D1[Next js using Lambda Edge and Serverless Framework]
  B2[Rendering Example]-->D2[Cloudflare Workers using a framework called Flareact]
Loading
3. Server-side composition

Pattern that assembles Fragments on the server side.

graph TD;
  A1[Server-side composition]-->B1[Layout Server]
  A1[Server-side composition]-->B2[Fragments Server]
  A1[Server-side composition]-->B3[Fragment Gateway]
  A1[Server-side composition]-->B4[Libraries]
  B4[Libraries]-->C1[Ara Framework]
  B4[Libraries]-->C2[OpenComponents]
  B4[Libraries]-->C3[Piral]
  B4[Libraries]-->C4[Tailor]
Loading
4. Build Time Composition

Build Time Composition assembles Fragments at build time, not at client or server. Publish each micro frontend as a package, and have the container application include them all as library dependencies.

graph TD;
  A1[Build Time Composition]-->B1[Shared libraries]
  A1[Build Time Composition]-->B2[Static Site Generators]
  A1[Build Time Composition]-->B3[Bit]
Loading

Micro-Frontends Communication

There are sometimes UI fragments belonging to different teams that need to interact or communicate. When a user adds an item to the basket by clicking the buy button, other micro frontends such as the mini basket want to be notified to update their content accordingly.

1. User interface communication
graph TD;
  A1[User interface communication]-->B1[Parent to fragment]
  A1[User interface communication]-->B2[Fragment to parent]
  A1[User interface communication]-->B3[Fragment to fragment]
  A1[User interface communication]-->B4[Publish Subscribe with the Broadcast Channel API]

Loading
2. Sharing state
graph TD;
  A1[Sharing state]-->B1[Web Workers]
  A1[Sharing state]-->B2[Props and callbacks]
  A1[Sharing state]-->B3[Custom Events]
  A1[Sharing state]-->B4[Pub Sub library]
  A1[Sharing state]-->B5[Custom implementation]
Loading

Micro-Frontends Communication Patterns

1. Parent to Fragment
graph TD;
  A1[Parent to Fragment]-->B1[Element Attributes]
  A1[Parent to Fragment]-->B2[Connected Callback]
  A1[Parent to Fragment]-->B3[Attribute Change Callback]
Loading
2. Fragment to Parent
graph TD;
  A1[Fragment to Parent]-->B1[Custom Events]
  A1[Fragment to Parent]-->B2[Event Listeners]
Loading
3. Fragment to Fragment
graph TD;
  A1[Fragment to Fragment]-->B1[DOM Manipulation]
  A1[Fragment to Fragment]-->B2[Attributes and Callbacks]
  A1[Fragment to Fragment]-->B3[Event Bus]
  A1[Fragment to Fragment]-->B4[Broadcast Channel API]
Loading
4. Global Communication
graph TD;
  A1[Global Communication]-->B1[URL Params]
  A1[Fragment to Fragment]-->B2[Global Context and State]
  A1[Fragment to Fragment]-->B3[State Management Libraries Redux]
Loading

Micro-Frontends anti-patterns

  • Difference between micro-frontend and component
  • Multi frameworks approach
  • Write programs that do thing and do it well
  • Dependency hell
  • Unidirectional flow at the rescue
  • Avoid organizational coupling
  • Multiple micro-frontends calling same endpoint

4 Micro-Frontend Anti-Patterns

1. Difference between micro-frontend and component

A micro-frontend is a technical representation of a business subdomain that has a specific behavior that is controlled by the self.

A Component is a technical solution for any frontend element that has a specific behavior that may be modified by a controlled component or container.

Component Micro-Frontends
Technical Solution Technical Representation of business subdomain
Having a specific behavior that may be modified by a controlled component or container. Having some Behaviour but driven by self

Implementation of Micro Frontends

There are several ways to implement a microfrontend, and this article(3 Ways to Build Micro-Frontends) will help you understand them.

According to my understanding, the application shell is the most crucial component of a micro-frontend architecture, as it is the component that enables you to render your all micro-frontends inside of a container.

Application shell

The application shell serves as the parent application to all micro-frontends. All incoming requests arrive there, It selects the micro-frontend that the user wishes to view and renders it in the documents.

Application shell

Micro Frontends Frameworks

  1. Bit
  2. Webpack 5 and Module Federation
  3. Single SPA
  4. Systemjs
  5. Piral
  6. Open Components
  7. Qiankun
  8. Luigi
  9. FrintJS
  10. Mosaic 9
  11. PuzzleJS

Microfrontends with Module Federation

Module federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server.

  • loading the module (asynchronous)
  • evaluating the module (synchronous)
Why Use Module Federation?
  • Better way to share code : Expose any code from any application that Webpack supports.
  • Environment-Independent : Use shared code in different environment web, Node.js etc.
  • Resolves Dependency Issues : Federated code defines their dependencies and if Webpack can’t find it in the scope, will download it.
  • Modernize Legacy Applications: The microfrontend approach divides a frontend into smaller, deployable parts, but is crucial for real-time scenarios with legacy applications and modernization, as companies may be reluctant to rewrite entire applications.
Advanced Topics
  • Version Mismatches
  • Dynamic Federation
  • Mono vs. Multirepo
  • Multiple Frameworks/Versions

Micro-Frontend Mindmap

Case Studies

When to use Micro Frontends ?

Each pattern, as we know, has advantages and disadvantages, and in order to use it, we must establish a boundary between these and our requirements.

  • Ideal for large, fast-growing, and complex enterprise applications.
  • Provides implementation independence, preventing blockages and bottlenecks.
  • Ideal for independent deployments, allowing frequent updates without disrupting the entire application.
  • Ideal for fast-paced environments requiring agility and quick response to changing marketing demands.
  • Can accommodate different technology stacks, allowing teams to select the technology stack that best suits their needs
  • Minimizes the risk of failure by detaching or detanglering different components of the application
  • Enables collaboration between multiple, independent teams on a single application
  • Creates a flexible application, allowing different configurations for different user types.
  • Ideal for gradual modernization of existing solutions, allowing for gradual replacement of old components with micro-frontends.

References

  1. Mindmap
  2. Behind leroymerlin.fr: Micro Frontends
  3. Resources to start with Micro Frontend
  4. Micro Frontends Conference
  5. Micro frontend resources
  6. Four Micro-frontend Anti-patterns
  7. What’s the Difference Between a Component and a Micro-Frontend?
  8. Awesome Micro-Frontends
  9. Use React components inside Angular
  10. Micro Frontend Architecture: Helping you move from theory to practice with our workshop
  11. Micro Frontends — The Better Way to Modernize Legacy Applications
  12. Micro frontend architecture

Videos

  1. Micro-frontend Anti-patterns
  2. Micro-Frontends with Module Federation: Beyond the Basics

Courses

  1. Microfrontends with React: A Complete Developer's Guide by Stephen Grider

Recent Medium Posts

TitleCategories
From Monolith to Lightning-Fast: A Web App’s Transformation Journeyweb-performance, caching, nextjs, module-federation, web
Micro Frontends: Build-Time vs. Runtime Integrationui, micro-frontends, typescript, web-development, module-federation
Micro Frontends: Build-Time vs. Runtime Integrationui, micro-frontends, typescript, web-development, module-federation
Why Webpackoptimization-techniques, tree-shaking, module-bundler, webpack, module-federation
Why and How to Use Micro Frontends for a Large Web Redesign: Best Practices for Developers and…nextjs, software-development, react, micro-frontends, web-development
Step-by-Step Guide to Module Federation in Next.js with Tailwind CSSnextjs, module-federation, tailwind-css
Revolutionizing Frontend with Module Federationfrontend, micro-frontends, webpack, module-federation, front-end-development
Revolutionizing Frontend with Module Federationfrontend, micro-frontends, webpack, module-federation, front-end-development
Micro Frontends in Flutter: A Modular Approach to Adopt in 2025frontends-in-flutter, flutterdevelopmentcompany, app-development, micro-frontends
Ripple CI: Build Time Micro Frontendsmicro-frontends, devops, continous-integration, ci-cd-pipeline, components
From Monolith to Microfrontends: Migrating a Legacy React App to a Modern Architecturereact, preact, rspack, migration, module-federation
Building a Microfrontend application using Nx, Angular, React, and Module Federationimplement-microfrontend, react, module-federation, nx, angular
Unlocking the Potential of Micro Frontends: A Smart Solution for Collaboration and Developer…front-end-development, micro-frontends, web-development, frontend, javascript
From Old to New — Case Study, Part 4 — Micro Frontendmaintenance, micro-frontends, velocity, architecture, scalability
What is Microfrontend and Why You Should Know About Itimplement-microfrontend, angular, micro-frontends, vue, react
¿Qué es Microfrontend y por qué debes conocerlo?react, implement-microfrontend, vue, angular, micro-frontends
React Microfrontends using Webpack’s Module Federationerror-boundaries, webpack, frontend, react-microfrontend, module-federation
The Micro-Frontend Revolution: Breaking Down Applications for Better Development and Maintenanceweb-design, front-end-development, web-development, micro-frontends
Module Federation in Angular: A Step-by-Step Guideangular, mfe, micro-frontends, module-federation, dynamic-programming
Micro-Frontends: Module Federation with Webpack and optimizing with Esbuild-Loadermodule-federation, esbuild, webpack-5, microfontend, microservices

Connect with me on