Creating web widgets with
Module Federation
and Angular Elements
https://slides.com/agesteira/module-federation-web-components


Agenda
-
JavaScript Modules
-
Module Federation
-
Microfrontends
-
Web Components
-
The use case
-
Demo
Andrés Gesteira
Twitter: @GeorgeKaplan_G /// andres.gesteira@henkel.com
Born in Madrid
Tech Lead Front End @Henkel DX
More than 6 years playing with Angular.
Likes cinema, books, food and wine.

JavaScript Modules
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
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
-
Microfrontends
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
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
The use case
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

TS Mixin classes

ConfigInitializer Decorator

Demo
Thanks


Manfred Steyer /// Alex Okrushko
We are recruting

Creating web widgets with Module Federation and Angular Elements
By Andres Gesteira
Creating web widgets with Module Federation and Angular Elements
- 591