@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
@duffleit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
@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
@duffleit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Integration
@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
@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
@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
@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
@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
@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
@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.
@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration
@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
@duffleit leitner.io supports Javascript-Isolation account fragment μService html script styles 1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM
@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
@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.
@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.
@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.
@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
@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.
@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.
squer
soudai
line_developers_tw
koudaiii
yukihiromori
n1ru4l
shimacos
tsujiba
bengo4com
edwardkenfox
miu_crescent
gl_tsukasa
picardparis
samanthasiow
bkeepers
hursman
tammielis
reverentgeek
paigeccino
eileencodes
jennybc
kastner
hannesfritz
chriscoyier
zakiyama