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
280
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
420
Angular Architecture Workshop: Modulith to Micro Frontends
manfredsteyer
PRO
0
700
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
570
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
180
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
290
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
540
Keynote: The Future of WebDevManfred Steyer
manfredsteyer
PRO
0
150
Other Decks in Programming
See All in Programming
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
100
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
180
Jetpack Compose 完全に理解した
mkeeda
1
430
中小企業開発事例から見るサーバーレス
seike460
PRO
4
1.5k
Quarto Tips for Academic Presentation
nicetak
0
890
Gradle build: The time is now
nonews
1
320
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Rによる大規模データの処理
s_uryu
2
610
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
120
An Advanced Introduction to R
nicetak
0
1.6k
Felteで作る簡単フォームバリデーション
kubotak
1
130
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
200
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Into the Great Unknown - MozCon
thekraken
2
280
In The Pink: A Labor of Love
frogandcode
132
21k
Designing Experiences People Love
moore
130
22k
Web Components: a chance to create the future
zenorocha
304
40k
The Mythical Team-Month
searls
210
40k
How to name files
jennybc
46
73k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Building Applications with DynamoDB
mza
85
4.9k
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