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
Federated Angular – Why and How? @ngConf 2021
Search
Manfred Steyer
PRO
April 25, 2021
Programming
0
360
Federated Angular – Why and How? @ngConf 2021
Manfred Steyer
PRO
April 25, 2021
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
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei3
0
190
Deep Dive into the Symfony Security Component
hhamon
1
180
htmx is fun!
codehex
2
160
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
sbt-assemblyにハマってDB接続できず時間が溶けた話
wakye5815
1
660
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
2
490
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
4
430
私がエッジを使う理由
chimame
9
3.6k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
170
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
How to train your dragon (web standard)
notwaldorf
71
5k
A designer walks into a library…
pauljervisheath
199
23k
Code Review Best Practice
trishagee
54
15k
Designing the Hi-DPI Web
ddemaree
275
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Done Done
chrislema
178
15k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Thoughts on Productivity
jonyablonski
57
3.7k
Transcript
@ManfredSteyer ManfredSteyer Federated Angular – Why and How? Manfred Steyer,
ANGULARarchitects.io
@ManfredSteyer Which one is the best?
@ManfredSteyer It’s all about consequences in your very situation!
@ManfredSteyer Micro Frontends
@ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module
Federation
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)
@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)
@ManfredSteyer Huge European Bank Domain A Domain B Domain C
Domain D Domain E Domain F eBanking
@ManfredSteyer Another Huge European Bank Details from Domain A Customer
Relationship Management Domain A Customer XYZ Domain B Domain C
@ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)
@ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling
Teams & Domains Switching out Technologies Rapitely Changing Requirements
@ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime
and Bundle Size Common Look and Feel
@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 Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains
Module Federation
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io