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
The Microfrontend Revolution: Module Federation with Angular @μCon 2021
Search
Manfred Steyer
PRO
April 14, 2021
Programming
1
470
The Microfrontend Revolution: Module Federation with Angular @μCon 2021
Manfred Steyer
PRO
April 14, 2021
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
来週から実践できる! LayerXのバクラク事業部で行われている Go 関連の読書会のご紹介 / Bakuraku Go Reading Group
upamune
5
270
Reactive Java REST APIs, FTW? Virtual JUG 2024
mraible
PRO
0
400
CQRS+ES解体新書 / CQRS ES Disassembly Book
nrslib
7
720
The Frontend Rubyist
largo
0
480
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
3
720
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
160
プログラミング&実行できるWEBアプリを手作り
ohmori_yusuke
3
210
HonoのRPCで真の型安全が欲しかった
kosei28
1
210
It’s about time to pack Ruby and Ruby scripts in one binary
ahogappa0613
1
1.3k
「正の影響力」を目指して書くこと
honey32
2
110
1BRC – Nerd Sniping the Java Community (Keynote JCon Slovenia)
gunnarmorling
1
100
見えないものに着目すると上手くいく、モデリングの勘所 / invisible-driven-design
minodriven
18
3.7k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
77
4.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Agile that works and the tools we love
rasmusluckow
325
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
246
20k
Code Reviewing Like a Champion
maltzj
516
39k
Atom: Resistance is Futile
akmur
260
25k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
9
3.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
GraphQLとの向き合い方2022年版
quramy
33
13k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Microfrontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding
#4: Possible Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!
@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated
@ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module
Federation and Alternatives (~100 pages)
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io