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
760
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
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
160
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
90
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
95
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Hack Claude Code with Claude Code
choplin
4
2.2k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Writing Fast Ruby
sferik
628
62k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
A Tale of Four Properties
chriscoyier
160
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Statistics for Hackers
jakevdp
799
220k
Practical Orchestrator
shlominoach
189
11k
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