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
More Than Micro Frontends: 3 Further Use Cases ...
Search
Manfred Steyer
PRO
July 05, 2022
Programming
0
930
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
Manfred Steyer
PRO
July 05, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
23
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
98
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
190
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
460
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
870
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
520
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
30
Other Decks in Programming
See All in Programming
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
430
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
960
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
0
140
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
770
Functional APIから再考するLangGraphを使う理由
os1ma
4
640
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
8
3.9k
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
120
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
4
1.2k
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
240
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
870
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Designing for Performance
lara
605
69k
A Modern Web Designer's Workflow
chriscoyier
693
190k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Documentation Writing (for coders)
carmenintech
69
4.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
46
6.4k
Fireside Chat
paigeccino
37
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Automating Front-end Workflow
addyosmani
1369
200k
Transcript
@ManfredSteyer ManfredSteyer More Than Micro Frontends: 3 Further Use Cases
for Module Federation Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer On Youtube
@ManfredSteyer On Youtube
@ManfredSteyer Consuming an Interface Implementing an Interfacae
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation 101 #2: Plugin Systems #3:
A/B Testing #4: Build Performance
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Does not work with webpack/ Angular CLI
@ManfredSteyer Webpack 5 Module Federation 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 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 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init
3) Adjust generated configuration 4) ng serve
@ManfredSteyer Great Deal for Micro Frontends!
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "http://..." } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Setting Micro Frontend Shell 10 Micro Frontends á 20
Features Separately buildable 200 Features in total!
@ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System
@ManfredSteyer Angular CLI npm install -g @angular/cli ng new workspace
cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
@ManfredSteyer Nx npm install -g @angular/cli npm init nx-workspace workspace
cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
@ManfredSteyer Results Cold Cache: 58.8 sec Warm Nx Cache: 0.6
sec Changed One App: 9.71 sec
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Conclusion Loading Separately Deployed Code Micro Frontends Plugin Systems
A/B Testing Build Performance
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io