Creating web widgets with
Module Federation
and Angular Elements
https://slides.com/agesteira/ng-india-web-widgets
Microfrontends
Modules
Module Federation
The User Story
Demo
Twitter: @GeorgeKaplan_G
Born in Madrid.
Tech Lead Front End
Longer than 6 years playing with Angular.
Likes cinema, books, and food.
Breaks up a FE app into smaller parts, called microfrontends.
Each MFE should be separately built and deployed.
Each MFE takes care of a different UI.
Each MFE can be handled by a different squad.
A MFE can be either:
An application.
A component.
They allow us to create reusable custom elements.
They contain an encapsulated DOM called Shadow DOM.
They build their markup with:
<template> & <slot>
They need to be registered in the DOM by using:
customElements.define('tag', HtmlElement)
wrapperElement.appendChild()
A system creates the self-contained HTML fragments.
Depending on who assembles the fragments:
It can be Server-Side Includes (SSI)...
... or Client-Side Includes (CSI).
Module Federation uses this approach.
In JavaScript we have different execution contexts...
...we call them scopes.
If the code runs in script mode it uses the global scope.
But there are also 3 types of local scope
It is a mechanism to split JavaScript programs.
It it typically implemented in a separate file (js/mjs).
It must contain import and/or export declaration/s.
Because it can produce multiple architectures.
The code is federated across different servers.
Each part of the federation is a module.
The host module wraps the other ones....
...which are called remote modules.
Any module can communicate with any module.
So circular dependencies are allowed.
Shell / Host
Remote 1
Remote 1
import()
Remote 2
import()
Remote 3
import()
remoteEntry.js
It is not a module.
It is a manifest...
...that enables the dynamic sharing.
It includes fine-grained information about:
Modules.
Libraries.
PROS:
No code duplication (better than Webpack's default).
Shared libraries.
Version control.
CONS:
Cross-framework not guaranteed.
In Angular, it creates several root scopes.
You need to do it with Angular.
You need to deploy self-contained HTML fragments.
BUT You don't have the routing app. And you will never have it.
Web Component
Shell
Remote
Web Component
Shell
Remote
Any Web App