Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
November 22, 2022
Programming
0
300
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
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
620
Angular Architecture Workshop: Modulith to Micro Frontends
manfredsteyer
PRO
0
760
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
590
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
190
Import Maps: The Next Evolution Step for Micro Frontends? @w-jax 2022
manfredsteyer
PRO
1
230
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
280
Reusable Components & Directives: Deep Dive
manfredsteyer
PRO
0
300
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
550
Keynote: The Future of WebDevManfred Steyer
manfredsteyer
PRO
0
150
Other Decks in Programming
See All in Programming
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
Milestoner
bkuhlmann
1
250
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
140
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
42tokyo-born2beroot-review
love42
0
120
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
190
tidy_rpart
bk_18
0
610
An Advanced Introduction to R
nicetak
0
1.8k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
350
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
350
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
87
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Unsuck your backbone
ammeep
659
56k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
410
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Making Projects Easy
brettharned
102
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
A Tale of Four Properties
chriscoyier
149
21k
How GitHub (no longer) Works
holman
298
140k
Designing with Data
zakiwarfel
91
4.2k
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