Save 37% off PRO during our Black Friday Sale! »

Scaling Frontend Architectures with Micro Frontends

Scaling Frontend Architectures with Micro Frontends

London Software Craftsmanship Community

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

June 19, 2020
Tweet

Transcript

  1. @duffleit Scaling Architectures with Micro Frontends London Software Craftsmanship Community

    David Leitner - @duffleit
  2. @duffleit @duffleit @duffleit david@squer.at David Leitner Lead Engineer

  3. @duffleit “microservices are small and focused on one thing to

    be autonomous.”
  4. @duffleit

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

    Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
  6. @duffleit Microservice Microservice Microservice DB DB DB Microservice Microservice Microservice

    DB DB DB
  7. @duffleit Disclaimer: That's fine in 80 % of the cases.

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

    ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
  9. @duffleit Microservice API Gateway SPA Microservice Microservice DB DB DB

    SPA API Gateway Micro Frontends
  10. @duffleit μService Ordering μService DB μService μService DB DB Catalogue

    Profile μService DB DB Hyperlink Hyperlink
  11. @duffleit

  12. @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
  13. @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
  14. @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
  15. @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
  16. @duffleit But,

  17. @duffleit Hyperlink Integration breaks your SPA.

  18. @duffleit We introduce a horizontal layer.

  19. @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
  20. @duffleit Only works on a very coarse grained level. Ordering

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

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

    All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
  23. @duffleit

  24. @duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard

    All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
  25. @duffleit How to integrate them? @duffleit

  26. @duffleit Repository Build & Deploy Server Browser Composed Application Micro

    Frontend Build Time Integration Server Side Integration Runtime Integration
  27. @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
  28. @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
  29. @duffleit Build Time Integration allows Static Site Generation

  30. @duffleit Product Product Product new Product Product Page Product Page

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

    Frontend Server Side Integration e.g. Project Mosaic
  33. @duffleit Based on the concept of Server Side Includes or

    Edge Side Includes
  34. @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
  35. @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
  36. @duffleit @duffleit Round Trips

  37. @duffleit Repository Build & Deploy Server Browser Composed Application Micro

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

    State Frontend 1 Frontend N ...
  39. @duffleit A Meta Framework to handle Frameworks.

  40. @duffleit Decomposing Meta Frameworks in real world use cases

  41. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend

    1 Frontend N ... Option 1: One shared Framework Option 2: Independent “Framework”
  42. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend

    1 Frontend N ... Module Federation with Webpack 5 (in beta.17) Option 1: E-Commerce One shared Framework
  43. @duffleit Remote Remote Host Container Module Module Module Container Module

    Module Module Container Module Module Module fetch from `company.com/remote1` fetch from `company.com/remote2`
  44. @duffleit webpack.remote.config.js

  45. @duffleit webpack.host.config.js

  46. @duffleit shell.js index.html

  47. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend

    1 Frontend N ... Option 2: Banking Independent “Framework” Compiler Why “Framework”?
  48. @duffleit @duffleit

  49. @duffleit @duffleit

  50. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend

    1 Frontend N ... Option 2: Banking Independent “Framework” Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 1: E-Commerce One shared Framework
  51. @duffleit our environment is the index.html immutablewebapps.org index.html https://12factor.net/

  52. @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
  53. @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.
  54. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per

    Page Buildtime Integration Server Side Integration Runtime Integration
  55. @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
  56. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per

    Page Buildtime Integration Serverside Integration Runtime Integration
  57. @duffleit

  58. @duffleit Mix and Match Landing Shop Ordering hyperlink hyperlink <!–-

    SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer
  59. @duffleit Micro-Frontends are Distributed Systems. The Final Secret:

  60. @duffleit Everything that can go wrong will go wrong. The

    Final Secret: Murphy’s law
  61. @duffleit Maybe start with a monolithic first approach.

  62. @duffleit by: twitter.com/swardley

  63. @duffleit @duffleit @duffleit squer.at/slides David Leitner Lead Engineer