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
Micro Frontends Unmasked Opportunities, Challen...
Search
Manfred Steyer
PRO
November 13, 2024
Programming
0
92
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
Manfred Steyer
PRO
November 13, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
31
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
90
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
59
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
250
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
370
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
300
Other Decks in Programming
See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
580
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
320
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
CSC509 Lecture 09
javiergs
PRO
0
140
Quine, Polyglot, 良いコード
qnighy
4
640
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Optimizing for Happiness
mojombo
376
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Typedesign – Prime Four
hannesfritz
40
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Site-Speed That Sticks
csswizardry
0
23
Transcript
AngularArchitects.io | @ManfredSteyer Micro Frontends Unmasked Opportunities, Challenges, Alternatives
Good Fences Make Good Neighbors!
Verticals: Basis for Autonomous Teams Minimal Dependencies Vertical 1 Vertical
2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
Verticals Verticals represent a business domain (ideally!) Verticals as Micro
Frontends: Maximizes Independence
Opportunities Team Autonomy Adding new Teams & Members Shorter Release
Cycles Testability Fault Isolation Runtime Performance Different Technology Stacks
Challanges UI/UX Initial Loading Times Coupling Technical Conflicts Complexity Diverging
Micro Frontends
@ManfredSteyer How to deal with these challenges?
@ManfredSteyer Agenda 1. Strategies for Dealing with Challenges 2. Costs
of Strategies 3. Alternatives
@ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and
Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer
@ManfredSteyer Strategies for Dealing With Challanges
@ManfredSteyer Design Systems Sharing Styles Sharing Libs Shadow DOM UI/UX
@ManfredSteyer SSR Automated Performance Checks Sharing Code Initial Loading Times
@ManfredSteyer 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 Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntrypoint.js import('…'); <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer Your Bundler Native Federation
@ManfredSteyer Demo
@ManfredSteyer Strategic Design (DDD) Eventing Separate Ways Inner Sourcing Coupling
@ManfredSteyer Event Storming
@ManfredSteyer Naming Conventions iframes Import Maps Script Loaders (SystemJS) Federation
Separate Ways Technical Conflicts
@ManfredSteyer Starterkits Utility Libs Meta Frameworks Automated Tests Developer Survey
Complexity
@ManfredSteyer However, … Many of these Strategies make sense even
without Micro Frontends! Strategic Design (DDD) Design Systems Starterkits and Libs Getting Dev Feedback …
@ManfredSteyer Costs of Micro Frontends
@ManfredSteyer Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team
2 Stream-aligned team … XaaS Flow of change
@ManfredSteyer Evaluating Options Facilitating Decisions Communicating Decisions
@ManfredSteyer Alternative
@ManfredSteyer Verticals in a Modulith Minimal Dependencies Vertical 1 Vertical
2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
@ManfredSteyer
@ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in
Builds
@ManfredSteyer Demo
@ManfredSteyer Free eBook (6th Edition) angularArchitects.io/ebook
@ManfredSteyer Conclusion It's all about Verticals! Strategic Design (DDD) Challenges
& Solutions Platform Team Alternative: Modulith You need to evaluate!
Good Fences Make Good Neighbors!
ManfredSteyer AngularArchitects.io Slides & Examples