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
June 21, 2023
Programming
0
360
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
June 21, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
36
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
120
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
200
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
110
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
210
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
80
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
130
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
100
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
280
Other Decks in Programming
See All in Programming
見えないものに着目すると上手くいく、モデリングの勘所 / invisible-driven-design
minodriven
18
3.7k
Good intentions gone bad
evaferreira
0
110
Vanilla JavaScript はマルチプラットフォームの夢を見るか
mitsuharu
0
120
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
4.8k
From LALR to IELR: A Lrama's Next Step
junk0612
2
1.3k
LTのやり方
yosuke_furukawa
PRO
9
1.1k
The Design of Everyday APIs - PyCon 2024
roguelynn
1
640
Does Ruby Parser dream of highly expressive grammar?
ydah
3
530
計算量オーダーの話
tsudaahr
1
140
Compose UI for... a light switch? (KotlinConf 2024)
jakewharton
PRO
3
320
Datadogのmonitorを Terraform管理に爆速で 移行する
kuro_kurorrr
2
290
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
650
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Brand Is Dead. Long Live the Brand.
mthomps
49
32k
In The Pink: A Labor of Love
frogandcode
138
21k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Adopting Sorbet at Scale
ufuk
69
8.7k
Building Adaptive Systems
keathley
32
1.9k
A better future with KSS
kneath
231
17k
Product Roadmaps are Hard
iamctodd
45
9.8k
Music & Morning Musume
bryan
42
5.7k
Web development in the modern age
philhawksworth
203
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Mythical Team-Month
searls
217
42k
Transcript
@ManfredSteyer Import Maps The Next Evolution Step for Micro Frontends?
ManfredSteyer
@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 Module Federation 101 #2 Import Maps #3 Module
Federation on Import Maps
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in //
webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer Selecting the highest compatible version ^10.0 ^10.1
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 11.0 10.1
@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://this-app/module.mjs": { "date-fns": "./libs/this-date-fns.js" }, "http://that-app/module.mjs": { "date-fns": "./libs/that-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 Meta Data
@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 @gioboa/vite-module-federation @softarc/native-federation @angular-architects/native-federation yours Dev Preview: Summer 2023
@ManfredSteyer
@ManfredSteyer In general: Native Federation is your insurance for the
mid- and long-term
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low
level building blocks Native Federation: Insurance
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io