Experience working with micro frontends?

Microfrontends are an architectural approach where a frontend application is broken down into independent, isolated parts (microfrontends) that can be developed, deployed, and updated separately.

Experience with microfrontends typically includes:

• Dividing a large application into several autonomous modules.
• Using different technologies or frameworks for different microfrontends.
• Integration through a container or shell application that assembles and displays the microfrontends.
• Managing shared states and communication between microfrontends.
• Organizing CI/CD for independent deployment.

Examples of tools and approaches include: Module Federation in Webpack, single-spa, iframe, Web Components.

An example of a simple integration approach with single-spa:

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('app1/App'),
  activeWhen: ['/app1']
});

start();

Thus, microfrontends enable scaling the team and application, reducing dependencies between frontend parts.