Kostiantyn Synyshyn
JS engineer
Module federation
Module federation
- What is it?
- How does it work?
- Module federation vs everything
- Possible applications
but first
WHY?
sharing code between independent applications
What is it?
Module federation
learn the vocabulary
Module federation - (referred as a JavaScript architecture by its creator Zack Jackson), however, in the nutshell it is the Webpack 5 plugin that allows for runtime code sharing.
Demo
How does it work?
no magic just Webpack
Application that has the component/view/lib
[Remote]
Application that consumes component/view/lib
[Host]
export.js
Application is built and is up & running
runtime import
<html>
<script src="http://source-app.com/export.js"></script>
Module1
Module2
ModuleN
Vocabulary
Host
a Webpack build that is initialized first during a page load
Remote
another Webpack build, where part of it is being consumed by a “host”
Bidirectional-host
when a bundle or Webpack build can work as a host or as a remote. Either consuming other applications or being consumed by others — at runtime
How does it work?
Host
Remote
// Module Federation Plugin options in your webpack cfg:
remotes: {
<container name>: "http://yourAppDomain/remoteEntry.js", // -> name of the remote container + URL to its remoteEntry.js
},
// Module Federation Plugin options in your webpack cfg:
exposes: {
"./Header": "./src/Header", // -> component/module you expose
},
MF vs everything/ what are the alternatives
Share the code as dependency
pros
- everyone us used to node ecosystem
cons
- getting the latest version of the desired package might be rough
- dependency management
ESI
client (browser)
ESI compatible server
yourApp.com
your2ndApp.com/anotherSource
<html>
<head>
<title>My Site</title>
**<esi:include src="/someModule" />** <!-- 👀 notice these-->
</head>
<body>
<header class="header">
<img src="/images/logo.jpg" />
</header>
<main>
<span>BlahBlahBlah</span>
</main>
**<esi:include src="/someModuleOtherModule" />**
</body>
</html><html>
<head>
<title>My Site</title>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
** <!-- end client wouldn't ever see these ESI tags-->
</head>
<body>
<header class="header">
<img src="/images/logo.jpg" />
</header>
<main>
<span>BlahBlahBlah</span>
</main>
<script>console.log("Doesn't do much")</script>
</body>
</html>pros
- inclusion
- build your app from different entry points
cons
- no one really knows 🤷
- additional surrogate layer is required
Microfrontends
pros
- forces you to write reusable agnostic components
cons
- basically an API service with chunks of FE code
Module federation
new architecture
The application is standalone but also shares it internals
-
Configs
-
Pages
-
Components
-
Functions
-
whatever you want
Links
Module federation
By Kostiantyn Synyshyn
