Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer The Price of Micro Frontends … and Your Alternatives Manfred Steyer, ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 Good Fences Make Good Neighbors!

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 3 Verticals for Autonomous Teams Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 4 Verticals A Vertical represents a business domain (ideally!) Verticals as Micro Frontends: Maximizes Independence

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 5 Benefits Team Autonomy Easier Onboarding Shorter Release Cycles Different Technology Stacks

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 6 Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer How to deal with these challenges and what does it “cost“?

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 8 1) Strategies for Dealing with Challenges 2) Costs of Strategies 3) Alternatives Agenda

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 9 About me … Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 10 Strategies for Dealing With Challanges

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 11 Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Web Components Eventing

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 12 Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Separate Ways Eventing

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 13 Domain-Driven Design

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 14 Domain-Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 This is what Strategic Design Prevents

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 16 Example Flight System

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 17 Example Booking Check-in Boarding Luggage Sub-Domains

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 18 Finding Sub-Domains Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Passenger Travel Agency Check-in Agent Boarding Agent

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Event Storming

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 21 Module Federation

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 22 Idea const Component = import('other-app/xyz')

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 23 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 24 Providing Metadata Shell (Host) Micro Frontend (Remote) RemoteEntrypoint.js import('…');

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 25 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 25

Slide 25 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 6 Alternatives Getting Popular TURBOPACK

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 27

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 28 Your Bundler Native Federation Adapter

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 29 Characteristics Mindset: Module Federation EcmaScript Modules Import Maps Simple config, sharing libs

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 1) npm i @angular-architects/native-federation -D 2) nx g @angular-architects/native-federation:init 3) Adjust generated configuration 4) nx serve Native Federation

Slide 30

Slide 30 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 31 DEMO

Slide 31

Slide 31 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Costs of Micro Frontends

Slide 32

Slide 32 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 33 Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change

Slide 33

Slide 33 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 34 Evaluating Options Facilitating Decisions Communicating Decisions

Slide 34

Slide 34 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 35 Alternative: Frontend Modulith

Slide 35

Slide 35 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 36 Verticals in One Monolith Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature

Slide 36

Slide 36 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 37

Slide 37

Slide 37 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 38 Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds

Slide 38

Slide 38 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 39 DEMO

Slide 39

Slide 39 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 40 6th edition 20 chapters http://angularArchitects.io/ebook Free eBook

Slide 40

Slide 40 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 41 Conclusion It‘s all about verticals! Strategic Design (DDD) Platform Team Alternative: Modulith You need to evaluate!

Slide 41

Slide 41 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 42 Good Fences Make Good Neighbors!

Slide 42

Slide 42 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io