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? @w-jax 2022
Search
Manfred Steyer
PRO
November 10, 2022
Programming
1
330
Import Maps: The Next Evolution Step for Micro Frontends? @w-jax 2022
Manfred Steyer
PRO
November 10, 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
190
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
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
品質が高いコードって何?Rev2.1
ickx
1
490
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
上手な探索的テストとその上達方法について
matsu802
4
660
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
180
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
180
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
280
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
130
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
123
8.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Bash Introduction
62gerente
604
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Atom: Resistance is Futile
akmur
258
25k
How to Ace a Technical Interview
jacobian
272
22k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
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 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://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 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 Try out with esbuild, vite, etc.
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io