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 16, 2022
Programming
0
320
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
November 16, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
34
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
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
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
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
120
CSC509 Lecture 06
javiergs
PRO
0
260
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
8
2.8k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
960
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.1k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
270
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
22k
How GitHub (no longer) Works
holman
315
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How STYLIGHT went responsive
nonsquared
100
5.8k
Side Projects
sachag
455
43k
The World Runs on Bad Software
bkeepers
PRO
72
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
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer #1 Import Maps #2 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 @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 Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer 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