Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Import Maps: The Next Evolution Step for Micro ...
Search
Manfred Steyer
PRO
September 29, 2022
Programming
0
770
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
September 29, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
24
All About Angular's New Signal Forms
manfredsteyer
PRO
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
190
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
130
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
68
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
44
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
540
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
CSC305 Lecture 06
javiergs
PRO
0
240
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
150
チームの境界をブチ抜いていけ
tokai235
0
180
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
400
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
350
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
180
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
200
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Music & Morning Musume
bryan
46
6.8k
How to Ace a Technical Interview
jacobian
280
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Why Our Code Smells
bkeepers
PRO
340
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
@ManfredSteyer Import Maps: The Next Evolution Step for Micro Frontends?
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer #1 Module Federation 101 #2 Import Maps #3 Module
Federation on Import Maps
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in //
webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer Selecting the highest compatible version ^10.0 ^10.1
@ManfredSteyer Make sure, your Angular app sees exactly the same
Angular version at runtime it was built with! (Don't use ^ or ~ in your package.json)
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer
@ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns';
const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
@ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns';
const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
@ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } }
</script>
@ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js", "is-long-weekend": "http://this-app/module.mjs",
"is-bridging-day": "http://that-app/module.mjs" } } </script>
@ManfredSteyer <script type="importmap"> { "imports": { […] }, "scopes": {
"http://that-app/module.mjs": { "date-fns": "./libs/other-date-fns.js" } } } </script>
@ManfredSteyer const im = document.createElement('script'); im.type = 'importmap'; im.textContent =
JSON.stringify(importMap); document.currentScript.after(im);
@ManfredSteyer [https://caniuse.com/import-maps]
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Meta Data • Providing at compile Time • Loading
at runtime Bundling • Remotes • Shared Packages • Angular Compiler Import Map • Generate using Meta Data • Scopes for Version Mismatches
@ManfredSteyer
@ManfredSteyer @gioboa/vite-module-federation @softarc/native-federation @angular-architects/native-federation yours Example: VanillaJS and React with
esbuild Example: Vite with Svelte and Angular (AnalogJS)
@ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...
})
@ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...
}) // Step 2: Trigger your build process await esbuild.build({ [...] external: federationBuilder.externals, [...] });
@ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...
}) // Step 2: Trigger your build process await esbuild.build({ [...] external: federationBuilder.externals, [...] }); // Step 3: Run additional tasks await federationBuilder.build();
@ManfredSteyer module.exports = withNativeFederation({ name: 'mfe1', exposes: { './component': './mfe1/component',
}, shared: { ...shareAll({ [...] }), }, });
@ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>
{ await initFederation({ mfe1: 'http://localhost:3001/remoteEntry.json', }); await import('./app'); })();
@ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>
{ await initFederation({ mfe1: 'http://localhost:3001/remoteEntry.json', }); await import('./app'); })();
@ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>
{ await initFederation('assets/manifest.json'); await import('./app'); })();
@ManfredSteyer const module = await loadRemoteModule({ remoteName: 'mfe1', exposedModule: './component',
});
@ManfredSteyer const module = await import('mfe1/component');
@ManfredSteyer <script type="esms-options"> { "shimMode": true } </script> <script src="../es-module-shims.js"></script>
<script type="module-shim" src="main.js"></script>
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer If you use webpack: No need to hurry. Stick
with webpack Module Federation
@ManfredSteyer If you use esbuild or vite: Give Native Federation
a try and provide feedback
@ManfredSteyer Once, Angular CLI supports esbuild: Give Native Federation a
try and provide feedback
@ManfredSteyer In general: Native Federation is your insurance for the
mid- and long-term
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low
level building blocks Native Federation: Insurance Try out with esbuild, vite, etc.
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io