Share
Embed

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Strategic Design in the Frontend: Moduliths & Micro Frontends ANGULARarchitects.io

Slide 2

Slide 2 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 "… and then someone will also create a guest area"

Slide 3

Slide 3 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Frontends became quite powerful … and complex! Modern SPAs are far more than receivers of DTOs

Slide 4

Slide 4 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4

Slide 5

Slide 5 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 1) How to Structure our Frontends? (+ how Strategic Design can help) 2) Implementation with Frontend Moduliths and Micro Frontends 3) Demos and Live Coding 4) Labs Agenda

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Structure our Frontends? + how Strategic Design can help …

Slide 8

Slide 8 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Good Fences Makes Good Neighbors!

Slide 9

Slide 9 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Vertical Architectures < Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law

Slide 10

Slide 10 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Find Good Verticals?

Slide 11

Slide 11 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Let's Try With Semantics … Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage

Slide 12

Slide 12 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Collaborative Modelling can Help

Slide 13

Slide 13 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Booking Boarding Flight Price Seats Passenger Tickets Flight Ticket Different Models: Clear Semantics → Less Deps

Slide 14

Slide 14 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Mindset & Techniques, Frontend devs can learn from Strategic Design

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Are These Slices the Same as in the Backend?

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Sometimes yes, …

Slide 17

Slide 17 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 …, sometimes no.

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Consider the Frontend Perspective Early

Slide 19

Slide 19 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Are These Slices "Real" Bounded Contexts?

Slide 20

Slide 20 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 If there is translation, the frontend can have a very simple ("cheap bargain") Bounded Context

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 "A bounded context owns the vertical slice of functionality [including the] presentation layer"

Slide 22

Slide 22 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 "[…] DDD folks […] can make the final mistake of exposing this complexity to the customer."

Slide 23

Slide 23 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Better Question: What can we Learn for the Frontend?

Slide 24

Slide 24 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 ✓ Different Models ✓ Look out for Semantics ✓ Look out for Pivotal Events ✓ Look at Processes ✓ Team up with Experts → Domain Knowlege ✓ Use Collaborative Modeling Takeaways

Slide 25

Slide 25 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Translation into Frontend Code

Slide 26

Slide 26 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp.

Slide 27

Slide 27 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp.

Slide 28

Slide 28 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Booking Boarding Shared Feature Feature Feature UI UI UI Data Data Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Feature Feature Feature Feature Feature Feature Feature UI Data Util UI Data Util

Slide 29

Slide 29 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Moduliths with Nx

Slide 30

Slide 30 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features

Slide 32

Slide 32 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Moduliths with Sheriff

Slide 33

Slide 33 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff 33 Modularization Boundaries on a per-folder basis

Slide 34

Slide 34 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 DEMO

Slide 35

Slide 35 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35 Micro Frontends

Slide 36

Slide 36 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Micro Frontends Booking App Check-in App Boarding App Luggage App

Slide 37

Slide 37 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Micro Frontends Help to Scale Projects to several teams!

Slide 38

Slide 38 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Integration via Hyperlinks

Slide 39

Slide 39 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 UI Composition with Hyperlinks µApp SPA µApp SPA µApp SPA

Slide 40

Slide 40 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40

Slide 41

Slide 41 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 41

Slide 42

Slide 42 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 42 Integration via Shell

Slide 43

Slide 43 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 SPA-based Shell µService µFrontend µFrontend µFrontend Shell

Slide 44

Slide 44 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 44 Module Federation

Slide 45

Slide 45 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 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 46

Slide 46 text

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

Slide 47

Slide 47 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 7 Alternatives Getting Popular TURBOPACK

Slide 48

Slide 48 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 48

Slide 49

Slide 49 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 49 DEMO

Slide 50

Slide 50 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 50 Multi-Framework/ Multi-Version Solutions

Slide 51

Slide 51 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 51 Not perfect :) Abstract them, e.g. via Web Components Different Versions or Frameworks? Angular App (MFE) React App (MFE) Coarse-grained Web Component

Slide 52

Slide 52 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 52 Result: Best of Both Worlds

Slide 53

Slide 53 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 53 DEMO https://red-ocean-0fe4c4610.azurestaticapps.net

Slide 54

Slide 54 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 54 More Details Workarounds for Zone.js and the Router Link

Slide 55

Slide 55 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 55 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 58 ✓ Domain thinking: also valueable in the frontend ✓ Different models, semantics, pivotal events ✓ Collaborative modelling together with domain experts ✓ Frontend Moduliths vs. Micro Frontends Conclusion

Slide 59

Slide 59 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 59

Slide 60

Slide 60 text

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