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 @FrankenJS
manfredsteyer
PRO
0
110
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
90
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
75
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
110
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
95
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
260
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
450
Micro Frontends with Web Standards
manfredsteyer
PRO
1
330
Other Decks in Programming
See All in Programming
The test code generator using static analysis and LLM
mikik0
1
250
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
The Design of Everyday APIs - PyCon 2024
roguelynn
1
210
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
330
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
18
2.5k
RubyGems on ruby.wasm
kateinoigakukun
0
130
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
2024 コーディング研修
ckazu
2
670
Unlocking Potential of Property Based Testing with Ractor
ohbarye
2
130
Criando a Woovi em uma semana
daniloab
0
120
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Rails Girls Zürich Keynote
gr2m
91
13k
A Modern Web Designer's Workflow
chriscoyier
689
190k
A better future with KSS
kneath
231
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Practical Orchestrator
shlominoach
183
9.8k
Ruby is Unlike a Banana
tanoku
96
10k
A Philosophy of Restraint
colly
197
16k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
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