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
57
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
200
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
73
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
44
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
410
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
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
320
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
Go言語はstack overflowの夢を見るか?
logica0419
0
370
Le côté obscur des IA génératives
pascallemerrer
0
150
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
KATA
mclloyd
PRO
32
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Balancing Empowerment & Direction
lara
5
690
Navigating Team Friction
lara
190
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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