Hackforge Academy

Explanation

Slide 1: Introduction to Micro Frontend Architecture. Micro Frontends divide a large frontend application into smaller, independently developed and deployed applications. Module Federation in Webpack 5 enables sharing and loading components between applications at runtime.

Code:

// Host Application
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    products: 'products@http://
localhost:3001/remoteEntry.js'
  }
});

Explanation

Slide 2: Benefits. Multiple teams can work independently, deploy features separately, and scale development efficiently. This approach is commonly used in large enterprise applications.

Code:

// Remote Application
new ModuleFederationPlugin({
  name: 'products',
  filename: 'remoteEntry.js',
  exposes: {
    './ProductList': './src/ProductList'
  }
});

Explanation

Slide 3: Runtime Component Sharing. The Host Application dynamically loads components exposed by Remote Applications without requiring a rebuild.

Code:

// Dynamic Import
const ProductList = React.lazy(
  () => import('products/ProductList')
);

Explanation

Slide 4: Shared Dependencies and Real-Time Use Cases. Common libraries like React are shared to reduce bundle size. Typical use cases include E-Commerce modules such as Products, Cart, Orders, and Profile.

Code:

// Shared Libraries
shared: {
  react: { singleton: true },
  'react-dom': { singleton: true }
};

Explanation

Slide 5: Advantages and Challenges. Advantages include independent deployment, scalability, and maintainability. Challenges include dependency management, communication between applications, routing, authentication, and performance optimization.

Code:

// Event Communication Example
window.dispatchEvent(
  new CustomEvent('cartUpdated', {
    detail: { itemCount: 5 }
  })
);