JavaScript Modules

• They provide mechanisms for splitting JavaScript programs

• They are code fragments with import/export functionality.

• Each one is contained in a file:

  • *.js

  • *.mjs

• Libraries that enable non native module usage:
  • RequireJS
  • CommonJS
  • Webpack (+ Typescript / Babel)

Module Federation (I)

• Created for Webpack by Zack Jackson.

• Inspired by Apollo Federation.

• It communicates local and remote modules.

• The code is federated across different servers (like iframes).

• Makes possible runtime sharing.

• Circular dependencies are allowed.
• They work both client and server side.

Module Federation (II)

Shell / Host (remoteEntry.js)

Remote 1

Remote 1

import()

Remote 2

import()

Remote 3

import()

Module Federation (III)

• Webpack is not the only technology anymore.

• There is a plugin for Vite.

• And native federation can already been achieved:

  • ES Modules

  • Import Maps

Module Federation !== Microfrontends

• Are not the same as Module Federation

  • MF is a code transport layer.

  • MFE is a UI architectural style.

• A MFE is:

  • Platform agnostic.

  • A runtime dependency. Independent deploys.

• So MF works well when shell and remotes come from the same framework but it is not cross-framework.

• A MF does not need to be exactly an app.

Web Components (I)

• They allow us to create reusable custom elements.

• They contain an encapsulated DOM called Shadow DOM.

• It communicates local and remote modules.

• They build their markup with:

  • <template> & <slot>

• They need to be registered in the DOM by using:

  • customElements.define('tag', HtmlElement)

  • wrapperElement.appendChild()

Web Components (II)

Web Components (III)

Web Components (IV)

Shell / Host (remoteEntry.js)

Remote 1

Remote 1

import()

Web Component

Remote 2

import()

Web Component

Remote 3

import()

Web Component

Microfrontends without shell

Any Web App (remoteEntry.js)

Remote 1

Remote 1

import()

Web Component

Remote 2

import()

Web Component

Remote 3

import()

Web Component

Global styles

Shadow styles

Shadow styles

Shadow styles

Composition

• On Angular/Typescript you have 3 options:

  • Decorators.

  • Mixin classes.

  • Angular v.15 directive composition.

TS Decorators

https://ts.dev/style/#decorators

TS Mixin classes

ConfigInitializer Decorator