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 16, 2022
Programming
0
290
Import Maps: The Next Evolution Step for Micro Frontends?
Manfred Steyer
PRO
November 16, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
Deep Dive into the Symfony Security Component
hhamon
1
180
Honoとhtmx
yusukebe
6
1.1k
上手な探索的テストとその上達方法について
matsu802
1
440
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
1
480
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
WasmOS: Wasmを実行する自作Microkernel
riru
0
360
decksh - a little language for decks
ajstarks
4
18k
品質が高いコードって何?Rev2.1
ickx
1
390
CSC308B Lecture 12
javiergs
PRO
0
110
Catch Up with Swift 5.10
ojun9
1
450
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
7
2.3k
How to name files
jennybc
62
91k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
For a Future-Friendly Web
brad_frost
170
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
4 Signs Your Business is Dying
shpigford
174
21k
Automating Front-end Workflow
addyosmani
1353
200k
The Mythical Team-Month
searls
214
42k
We Have a Design System, Now What?
morganepeng
42
6.7k
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 #2 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 @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 Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer 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