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 Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
50
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
38
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
380
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
160
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
Semantic search with Django and pgvector
pauloxnet
0
220
受託開発でGitLab CI を活用していく
xiombatsg
1
260
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
3
3.4k
OpenAPI を守るのは難しい
ohmori_yusuke
2
750
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
400
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.1k
Why 1 + 1 = 2 in Swift?
1plus4
1
600
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
1.1k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
The Mythical Team-Month
searls
214
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
353
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
How STYLIGHT went responsive
nonsquared
92
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Gamification - CAS2011
davidbonilla
76
4.6k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.9k
The Cult of Friendly URLs
andyhume
73
5.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Adopting Sorbet at Scale
ufuk
67
8.6k
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