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...
Search
Manfred Steyer
PRO
April 14, 2021
Programming
1
480
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
All About Angular's New Signal Forms
manfredsteyer
PRO
0
78
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
140
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
59
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
34
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
390
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
650
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
520
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
5
2.2k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
740
CSC305 Lecture 02
javiergs
PRO
1
260
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
CSC305 Lecture 06
javiergs
PRO
0
210
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
560
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A Tale of Four Properties
chriscoyier
160
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Bash Introduction
62gerente
615
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Applications with DynamoDB
mza
96
6.6k
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