Micro Frontends Beyond the Buzzword!

Micro Frontends Beyond the Buzzword!

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

April 18, 2019
Tweet

Transcript

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

    Vienna
  2. @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
  3. @duffleit leitner.io “the idea of micro frontends is to extend

    the concept of micro services to the frontend world.”
  4. @duffleit leitner.io Disclaimer 1: That's fine in 80 % of

    the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB
  5. @duffleit leitner.io Monolith API Gateway SPA DB Disclaimer 2: That's

    fine in 60 % of the cases.
  6. @duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB

    DB
  7. @duffleit leitner.io Sam Newman “microservices are small and focused on

    one thing to be autonomous.”
  8. @duffleit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations

    ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
  9. @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
  10. @duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB

    DB SPA API Gateway Micro Frontends
  11. @duffleit leitner.io Web Components

  12. @duffleit leitner.io Microservice SPA Microservice Microservice DB DB DB SPA

    API Gateway
  13. @duffleit leitner.io @duffleit leitner.io How to slice?

  14. @duffleit leitner.io μService Ordering μService DB μService μService DB DB

    Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Integration
  15. @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
  16. @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
  17. @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
  18. @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
  19. @duffleit leitner.io The more coarse-grained you can go, the more

    coarse-grained you should go.
  20. @duffleit leitner.io But,

  21. @duffleit leitner.io Hyperlink Integration breaks your SPA.

  22. @duffleit leitner.io

  23. @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
  24. @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
  25. @duffleit leitner.io Dashboard Profile Profile μService DB Catalogue μService DB

    Catalogue Ordering Ordering μService DB Dashboard μService DB
  26. @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.
  27. @duffleit leitner.io @duffleit leitner.io How to integrate them?

  28. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Build Time Integration Server Side Integration Runtime Integration
  29. @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
  30. @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
  31. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Server Side Integration Project Mosaic
  32. @duffleit leitner.io Based on the concept of Server Side Includes

    or Edge Side Includes ⛔ JS and CSS global scoped ⛔ Round-Trips are needed
  33. @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
  34. @duffleit leitner.io supports Javascript-Isolation init(fragment-dom){ ... } How about account

    fragment μService html script styles 1...n
  35. @duffleit leitner.io supports Javascript-Isolation account fragment μService html script styles

    1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM
  36. @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
  37. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading
  38. @duffleit leitner.io the aggregation is done on a single point.

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

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

    single point. immutablewebapps.org index.html https://12factor.net/
  41. @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
  42. @duffleit leitner.io Ok, which one to use?

  43. @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.
  44. @duffleit leitner.io @duffleit leitner.io How to share state?

  45. @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.
  46. @duffleit leitner.io immutable observables decouple communication via event-bus using a

    global redux store
  47. @duffleit leitner.io

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

  49. @duffleit leitner.io what designers expect us to do how it

    finally looks like what customers would like to see
  50. @duffleit leitner.io CDN - for static files CMS - for

    static content Component Library
  51. @duffleit leitner.io A Component Library Within a Project Within a

    Company Monorepo
  52. @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.
  53. @duffleit leitner.io A little copying is better than a little

    dependency. Rob Pike
  54. @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
  55. @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.
  56. @duffleit leitner.io https://codeburst.io/building-efficient-components-6ee2bdaea542

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

  58. @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.
  59. @duffleit leitner.io Mix and Match Landing Shop Ordering hyperlink hyperlink

    <!–- SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer
  60. @duffleit leitner.io Lots of interactions and state-sharing between your micro

    frontends are an indicator that your micro frontends are too micro.
  61. @duffleit leitner.io Think twice before creating a company wide component

    library.
  62. @duffleit leitner.io Start with a monolith first approach not with

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