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
November 22, 2022
Programming
0
480
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
November 22, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
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
90
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
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
74
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
52
13k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
9.4k
WindowInsetsだってテストしたい
ryunen344
1
230
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.1k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Deep Dive into ~/.claude/projects
hiragram
12
2.3k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
PipeCDのプラグイン化で目指すところ
warashi
1
250
NPOでのDevinの活用
codeforeveryone
0
740
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
400
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Visualization
eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Optimizing for Happiness
mojombo
379
70k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Practical Orchestrator
shlominoach
188
11k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
@ManfredSteyer Import Maps: The Next Evolution Step for Micro Frontends?
@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 Import Maps in General #3 Module Federation on
Import Maps
@ManfredSteyer Manfred Steyer
@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
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@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 • How to implement maintainable architectures with Monorepos, Standalone
Components, DDD, and NX? • How to implement Micro Frontends w/ Module Federation, Standalone Components and Web Components ? • … Public or Company Training, Remote or On-Site German and English
@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