Tweet
Tweet

Slide 1

Slide 1 text

@duffleit leitner.io @duffleit leitner.io Micro Frontends Beyond the Buzzword Microservices Vienna

Slide 2

Slide 2 text

@duffleit leitner.io David Leitner ▪ Technical Expert/Lead Developer at Senacor Technologies ▪ Lecturer for post diploma courses at UAS Technikum Vienna ▪ I do a couple of things around the tech-community

Slide 3

Slide 3 text

@duffleit leitner.io “the idea of micro frontends is to extend the concept of micro services to the frontend world.”

Slide 4

Slide 4 text

@duffleit leitner.io Disclaimer 1: That's fine in 80 % of the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB

Slide 5

Slide 5 text

@duffleit leitner.io Monolith API Gateway SPA DB Disclaimer 2: That's fine in 60 % of the cases.

Slide 6

Slide 6 text

@duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB

Slide 7

Slide 7 text

@duffleit leitner.io Sam Newman “microservices are small and focused on one thing to be autonomous.”

Slide 8

Slide 8 text

@duffleit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development

Slide 9

Slide 9 text

@duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Model around Business Domains ❌ Parallel development Frontend Monolith

Slide 10

Slide 10 text

@duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB SPA API Gateway Micro Frontends

Slide 11

Slide 11 text

@duffleit leitner.io Web Components

Slide 12

Slide 12 text

@duffleit leitner.io Microservice SPA Microservice Microservice DB DB DB SPA API Gateway

Slide 13

Slide 13 text

@duffleit leitner.io @duffleit leitner.io How to slice?

Slide 14

Slide 14 text

@duffleit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Integration

Slide 15

Slide 15 text

@duffleit leitner.io ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Based on the assumption to have fully verticalized systems. μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Integration

Slide 16

Slide 16 text

@duffleit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting Approach 1: Hyperlink Integration

Slide 17

Slide 17 text

@duffleit leitner.io Approach 1: Hyperlink Integration with Backend for Frontends μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB BFF Service BFF Service BFF Service BFF Service https://samnewman.io/patterns/architectural/bff/ Presentation Process Flow Domain Logic Data Presentation Process Flow Domain Logic Data

Slide 18

Slide 18 text

@duffleit leitner.io Approach 1: Hyperlink Integration with GraphQL μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB GraphQL https://samnewman.io/patterns/architectural/bff/ Presentation Process Flow Domain Logic Data

Slide 19

Slide 19 text

@duffleit leitner.io The more coarse-grained you can go, the more coarse-grained you should go.

Slide 20

Slide 20 text

@duffleit leitner.io But,

Slide 21

Slide 21 text

@duffleit leitner.io Hyperlink Integration breaks your SPA.

Slide 22

Slide 22 text

@duffleit leitner.io

Slide 23

Slide 23 text

@duffleit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB View Aggregation Layer Horizontal Layer

Slide 24

Slide 24 text

@duffleit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB View Aggregation Layer Horizontal Layer

Slide 25

Slide 25 text

@duffleit leitner.io Dashboard Profile Profile μService DB Catalogue μService DB Catalogue Ordering Ordering μService DB Dashboard μService DB

Slide 26

Slide 26 text

@duffleit leitner.io Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard How to slice? One “Micro Frontend” per page. 2...n Micro Frontends per page.

Slide 27

Slide 27 text

@duffleit leitner.io @duffleit leitner.io How to integrate them?

Slide 28

Slide 28 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration

Slide 29

Slide 29 text

@duffleit leitner.io Repository Build & Deploy Server Browser Mono Repo package.json Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Simplifies Dependency Management. ✔ Allows extensive code sharing and reuse. Angular Workspaces

Slide 30

Slide 30 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development

Slide 31

Slide 31 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration Project Mosaic

Slide 32

Slide 32 text

@duffleit leitner.io Based on the concept of Server Side Includes or Edge Side Includes ⛔ JS and CSS global scoped ⛔ Round-Trips are needed

Slide 33

Slide 33 text

@duffleit leitner.io Tailor is a Layout Server header fragment μService account fragment μService catalogue fragment μService maps your request to a template checkout-template.html ... dashboard.template.html profile-template.html

Slide 34

Slide 34 text

@duffleit leitner.io supports Javascript-Isolation init(fragment-dom){ ... } How about account fragment μService html script styles 1...n

Slide 35

Slide 35 text

@duffleit leitner.io supports Javascript-Isolation account fragment μService html script styles 1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM

Slide 36

Slide 36 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development

Slide 37

Slide 37 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading

Slide 38

Slide 38 text

@duffleit leitner.io the aggregation is done on a single point. Aggregating UI

Slide 39

Slide 39 text

@duffleit leitner.io the aggregation and configuration is done on a single point. Aggregating UI

Slide 40

Slide 40 text

@duffleit leitner.io the aggregation and configuration is done on a single point. immutablewebapps.org index.html https://12factor.net/

Slide 41

Slide 41 text

@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Runtime Integration

Slide 42

Slide 42 text

@duffleit leitner.io Ok, which one to use?

Slide 43

Slide 43 text

@duffleit leitner.io Server Browser Server Side Integration Runtime Integration Request Response Model Interactions between different Verticals are done on the Backend. Longliving App State in the frontend & verticals need to interact with each other.

Slide 44

Slide 44 text

@duffleit leitner.io @duffleit leitner.io How to share state?

Slide 45

Slide 45 text

@duffleit leitner.io Most of the state that needs to be shared between child applications is just API data. UI-state that isn't in the API is much less commonly shared. Having a shared API cache can be a simple but very efficient solution.

Slide 46

Slide 46 text

@duffleit leitner.io immutable observables decouple communication via event-bus using a global redux store

Slide 47

Slide 47 text

@duffleit leitner.io

Slide 48

Slide 48 text

@duffleit leitner.io @duffleit leitner.io How to keep the UI consistent?

Slide 49

Slide 49 text

@duffleit leitner.io what designers expect us to do how it finally looks like what customers would like to see

Slide 50

Slide 50 text

@duffleit leitner.io CDN - for static files CMS - for static content Component Library

Slide 51

Slide 51 text

@duffleit leitner.io A Component Library Within a Project Within a Company Monorepo

Slide 52

Slide 52 text

@duffleit leitner.io SPA-A component library Time Effort 2019 2020 2021 SPA-B component library SPA-C component library a promise that you will save time in the future by reusage. a dependency between projects.

Slide 53

Slide 53 text

@duffleit leitner.io A little copying is better than a little dependency. Rob Pike

Slide 54

Slide 54 text

@duffleit leitner.io Low Fidelity High Fidelity Design Toolkits Design Specifications Component Libraries Even if something has to look equal, it does not have to be technically the same. Source of truth

Slide 55

Slide 55 text

@duffleit leitner.io If you really need a component library, then build it framework agnostic. If Angular can be ignored JSX + CSS Modules worked good for us. And, of course web components.

Slide 56

Slide 56 text

@duffleit leitner.io https://codeburst.io/building-efficient-components-6ee2bdaea542

Slide 57

Slide 57 text

@duffleit leitner.io @duffleit leitner.io All this in a nutshell

Slide 58

Slide 58 text

@duffleit leitner.io Micro Frontends in a nutshell Integration and Slicing Is your application big?* Frontend Monolith no Are UI/Domain Parts strongly independent? yes Applications integrated with Hyperlinks no Server Side Integration no Are Server-Roundtrips a problem? yes Runtime Integration yes * an application is big enough to justify using micro frontends, if slight UI/UX differences between the two most unrelated subpages are acceptable.

Slide 59

Slide 59 text

@duffleit leitner.io Mix and Match Landing Shop Ordering hyperlink hyperlink APP SHELL Header Footer

Slide 60

Slide 60 text

@duffleit leitner.io Lots of interactions and state-sharing between your micro frontends are an indicator that your micro frontends are too micro.

Slide 61

Slide 61 text

@duffleit leitner.io Think twice before creating a company wide component library.

Slide 62

Slide 62 text

@duffleit leitner.io Start with a monolith first approach not with micro frontends.

Slide 63

Slide 63 text

@duffleit leitner.io David Leitner Non-Hype-Train-Activist @duffleit