Micro-frontend architecture is a design approach in which an application is split into features – micro frontends – and delivered independently
- Multiple teams with different responsibilities
- Faster deployment and better release management
- Technology freedom
- Easy scaling
- Continuous deployment : enable incremental updates without affecting the entire application
- Your project size is medium to large
- Productivity is your priority : teams working on different features simultaneously
- Segmented parts : each feature lives within a separate micro frontend
- Loosely coupled app – all components can be independently built, deployed, scaled and even failed independently
- Shell – glues micro frontends together into something cohesive on a single page
- Autonomous teams – no need to coordinate releases with other development teams
- WebComponents
- building each micro frontend as an isolated component that can be deployed independently as a .js file
- Module Federation
- Allows loading micro frontends at runtime into a shell application without any build time dependency
netflix
- adopted the micro frontend approach to encourage rapid development. This enables Netflix to release new features and updates quickly, without impacting the rest of the website.
- a home page, search functionality, user profile settings, etc. can be cached independently and only updated when necessary, reducing the overall load time for the user.
-
Create applications with command :
npx create-mf-app
i.e creates a Module Federation application -
create applications for shell and other micro apps
-
for micro apps
-
develop components as we do . here ex: we are having component for header and footer
-
Now in
webpack.config.js
>plugins
>exposes
exposes: { "./Header": "./src/Header.js", "./Footer": "./src/Footer.js", },
-
Once components are exposed re run your application and on hoisted url hit -
http://localhost:3000/remoteEntry.js
remoteEntry.js
is a file generated by Webpack's Module Federation feature- It exposes the modules that can be shared with other applications.
- When a micro frontend application is loaded, it fetches the remoteEntry.js file from the remote host
-
-
for shell application
- develop the application according to requrements
- in
webpack.config.js
>plugins
>remotes
add the urls of your micro apps -
remotes: { home: "home@http://localhost:3000/remoteEntry.js", contact: "contact@http://localhost:9000/remoteEntry.js", }
- import it wherever you want to use
-
import Header from "home/Header"; import Footer from "home/Footer";
- to lazily import microfrontend
-
const Contact = lazy(() => import("contact/Contact")); { path: "/contact", element: ( <Suspense fallback={<div>loading</div>}> <Contact /> </Suspense> ), },
- custom events Each micro frontend can listen for specific custom events and dispatch events to communicate. ex:
window.dispatchEvent(new CustomEvent('myCustomEvent', { detail: 'Hello from MicroFrontend1' }));
window.addEventListener('myCustomEvent', handleCustomEvent);
- Shared State Management: Use a shared state management library like Redux
- Parent-Child Communication: parent component can pass props down to child micro frontends or use context to provide shared data and functions.
- Custom API: Define a custom API for communication between micro frontends.