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 Frontends?
Search
Manfred Steyer
PRO
November 22, 2022
Programming
0
450
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
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
180
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
document.write再考
brn
5
2.5k
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
6.7k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
2.9k
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
7
2.1k
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
150
プロンプトエンジニアリング入門
tomokusaba
2
960
Understanding Ast By Looking
inouehi
0
120
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
260
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
270
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
66
8.5k
How STYLIGHT went responsive
nonsquared
92
4.7k
A Tale of Four Properties
chriscoyier
150
22k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Teambox: Starting and Learning
jrom
126
8.4k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Practical Orchestrator
shlominoach
180
9.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
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