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
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
5
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
80
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
78
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
410
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
使ってみよう Azure AI Document Intelligence
kosmosebi
2
300
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Netty Chicago Java User Group 2024-04-17
sullis
0
170
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
PHPはいつから死んでいるかの調査
chiroruxx
1
390
"config" ってなんだ? / What is "config"?
okashoi
0
240
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
730
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
見た目から始める生産性向上
ikumatadokoro
7
830
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Embracing the Ebb and Flow
colly
80
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
A designer walks into a library…
pauljervisheath
200
23k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Become a Pro
speakerdeck
PRO
11
4.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Being A Developer After 40
akosma
57
580k
Done Done
chrislema
178
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
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