Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MicroFrontends in the Wild

MicroFrontends in the Wild

GeeCon Prague

SQUER Solutions

October 18, 2019
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔

    Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
  2. @duffleit Disclaimer: That's fine in 80 % of the cases.

    SPA API Gateway Microservice Microservice Microservice DB DB DB
  3. @duffleit Microservice API Gateway SPA Microservice Microservice DB DB DB

    ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
  4. @duffleit ✔ 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 Connected Applications
  5. @duffleit Approach 1: Hyperlink Connected Applications μService Ordering μService DB

    μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting
  6. @duffleit Approach 1: Hyperlink Connected Applications 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
  7. @duffleit Approach 1: Hyperlink Connected Applications with GraphQL μService Ordering

    μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB GraphQL Presentation Process Flow Domain Logic Data
  8. @duffleit μService Ordering μService DB μService μService DB DB Catalogue

    Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB View Aggregation Layer Horizontal Layer Ripple Effect
  9. @duffleit Only works on a very coarse grained level. Ordering

    Catalogue Hyperlink Hyperlink Dashboard
  10. @duffleit Dashboard Profile Profile μService DB Catalogue μService DB Catalogue

    Ordering Ordering μService DB Dashboard μService DB
  11. @duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard

    Two Definitions of Micro Frontends One “Micro Frontend” per page. 2...n Micro Frontends per page.
  12. @duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard

    Two Definitions of Micro Frontends One “Micro Frontend” per page. 2...n Micro Frontends per page.
  13. @duffleit Repository Build & Deploy Server Browser Composed Application Micro

    Frontend Build Time Integration Server Side Integration Runtime Integration
  14. @duffleit Repository Build & Deploy Server Browser Mono Repo package.json

    Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Allows extensive code sharing and reuse. ✔ No Version Conflicts and burden with distributing libraries Angular Workspaces
  15. @duffleit 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
  16. @duffleit Product Product Product new Product Product Page Product Page

    Product Page Product Page Static Files Scully Rebuild
  17. @duffleit 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
  18. @duffleit Repository Build & Deploy Server Browser Composed Application Micro

    Frontend Server Side Integration e.g. Project Mosaic
  19. @duffleit 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
  20. @duffleit 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
  21. @duffleit Repository Build & Deploy Server Browser Composed Application Micro

    Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading Meta-SPA-Router
  22. @duffleit Meta Framework Isolation & Composition Routing Messaging & Shared

    State Web Platform Isolation & Composition Routing Frontend 1 Frontend N ... Frontend N Frontend 1 ...
  23. @duffleit index.html Meta Framework Isolation & Composition Routing Messaging &

    Shared State Web Platform Isolation & Composition Routing Messaging & Shared State Frontend N Frontend 1 ... Frontend N Frontend 1 ... Frontend N + 1
  24. @duffleit 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
  25. @duffleit Server Browser Runtime Integration Longliving App State in the

    frontend & verticals need to interact with each other. Server Side Integration Request Response Model Interactions between different Verticals are done on the Backend.
  26. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per

    Page Buildtime Integration Serverside Integration Runtime Integration
  27. @duffleit Complexities: • UI/UX Consistency • Shared State • Resilience

    • Tracing/Analytics • Offline-First • ... ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
  28. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per

    Page Buildtime Integration Serverside Integration Runtime Integration
  29. @duffleit Mix and Match Landing Shop Ordering hyperlink hyperlink <!–-

    SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer