Micro Frontends Unmasked Opportunities, Challenges, Alternatives

Slide 1

Slide 1 text

AngularArchitects.io | @ManfredSteyer Micro Frontends Unmasked Opportunities, Challenges, Alternatives

Slide 2

Slide 2 text

Good Fences Make Good Neighbors!

Slide 3

Slide 3 text

Verticals: Basis 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

Verticals Verticals represent a business domain (ideally!) Verticals as Micro Frontends: Maximizes Independence

Slide 5

Slide 5 text

Opportunities Team Autonomy Adding new Teams & Members Shorter Release Cycles Testability Fault Isolation Runtime Performance Different Technology Stacks

Slide 6

Slide 6 text

Challanges UI/UX Initial Loading Times Coupling Technical Conflicts Complexity Diverging Micro Frontends

Slide 7

Slide 7 text

@ManfredSteyer How to deal with these challenges?

Slide 8

Slide 8 text

@ManfredSteyer Agenda 1. Strategies for Dealing with Challenges 2. Costs of Strategies 3. Alternatives

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@ManfredSteyer Strategies for Dealing With Challanges

Slide 11

Slide 11 text

@ManfredSteyer Design Systems Sharing Styles Sharing Libs Shadow DOM UI/UX

Slide 12

Slide 12 text

@ManfredSteyer SSR Automated Performance Checks Sharing Code Initial Loading Times

Slide 13

Slide 13 text

@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')

Slide 14

Slide 14 text

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })

Slide 15

Slide 15 text

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntrypoint.js import('…');

Slide 16

Slide 16 text

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 17

Slide 17 text

@ManfredSteyer

Slide 18

Slide 18 text

@ManfredSteyer Your Bundler Native Federation

Slide 19

Slide 19 text

@ManfredSteyer Demo

Slide 20

Slide 20 text

@ManfredSteyer Strategic Design (DDD) Eventing Separate Ways Inner Sourcing Coupling

Slide 21

Slide 21 text

@ManfredSteyer Event Storming

Slide 22

Slide 22 text

@ManfredSteyer Naming Conventions iframes Import Maps Script Loaders (SystemJS) Federation Separate Ways Technical Conflicts

Slide 23

Slide 23 text

@ManfredSteyer Starterkits Utility Libs Meta Frameworks Automated Tests Developer Survey Complexity

Slide 24

Slide 24 text

@ManfredSteyer However, … Many of these Strategies make sense even without Micro Frontends! Strategic Design (DDD) Design Systems Starterkits and Libs Getting Dev Feedback …

Slide 25

Slide 25 text

@ManfredSteyer Costs of Micro Frontends

Slide 26

Slide 26 text

@ManfredSteyer Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change

Slide 27

Slide 27 text

@ManfredSteyer Evaluating Options Facilitating Decisions Communicating Decisions

Slide 28

Slide 28 text

@ManfredSteyer Alternative

Slide 29

Slide 29 text

@ManfredSteyer Verticals in a Modulith Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature

Slide 30

Slide 30 text