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
June 21, 2023
Programming
0
390
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
June 21, 2023
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
180
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
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
テスト駆動Kaggle
isax1015
0
310
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Music & Morning Musume
bryan
46
6.6k
Done Done
chrislema
184
16k
It's Worth the Effort
3n
185
28k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Balancing Empowerment & Direction
lara
1
430
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Bash Introduction
62gerente
613
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
@ManfredSteyer Import Maps The Next Evolution Step for Micro Frontends?
ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@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 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 Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 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://this-app/module.mjs": { "date-fns": "./libs/this-date-fns.js" }, "http://that-app/module.mjs": { "date-fns": "./libs/that-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 Meta Data
@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
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer @gioboa/vite-module-federation @softarc/native-federation @angular-architects/native-federation yours Dev Preview: Summer 2023
@ManfredSteyer
@ManfredSteyer In general: Native Federation is your insurance for the
mid- and long-term
@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
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io