$30 off During Our Annual Pro Sale. View Details »

Frontend Architecture: Micro Frontends

Frontend Architecture: Micro Frontends

Versionswechsel, Systeme im Wartungsmodus, Kompatibilitätsprobleme: JavaScript Frontends unterliegen einem steten Fluss von Änderungen. Organisationen, die bereits bei ihrer Backend-Architektur erfolgreich die umzusetzenden Fachlichkeiten geschnitten haben, wünschen sich auch bei den Modulen ihrer SPA schärfere Grenzen, um von einem höheren Grad an Individualität und Unabhängigkeit bei Implementierung und Deployment zu profitieren.

In diesem Vortrag stelle ich den Architekturansatz Micro Frontends vor, und gebe einen Überblick über Herausforderungen und Vorteile für Organisation und Entwicklung sowie mögliche Integration-Patterns.

Das Thema wurde auf einen von der eyeworkers GmbH veranstalteten Kundentag am 08 November 2022 in München von mir vorgestellt und in einem Live Stream unter https://www.youtube.com/watch?v=mvtz1arSQkk nochmal präsentiert.

Thorsten Suckow-Homberg

November 16, 2022
Tweet

More Decks by Thorsten Suckow-Homberg

Other Decks in Programming

Transcript

  1. eyeworkers.de
    eyeworkers Frontend Architecture: Micro Frontends
    Thorsten Suckow-Homberg
    [email protected]
    linktr.ee/thorstensuckow
    Senchadays, Munich, November 2022
    Implications on Organisation and Development

    View Slide

  2. Frontend Architecture: Micro Frontends
    Agenda
    1. Problem
    2. Motivation
    3. Challenge
    4. Integration
    eyeworkers
    eyeworkers

    View Slide

  3. Frontend Architecture: Micro Frontends
    Motivation
    eyeworkers

    View Slide

  4. Frontend Architecture: Micro Frontends
    Motivation
    Application Layer
    Domain Layer
    Infrastructure Layer
    Presentation Layer
    SPA
    • One Team
    • Monorepo
    • Strong Coupling
    • Vendor Lock
    • One Release Cycle
    • Single tech Stack
    Monolith
    eyeworkers

    View Slide

  5. Project
    Frontend Frontend
    Backend
    Service A
    Frontend
    Application Layer
    Service B
    Service C
    Backend Frontend
    Infrastructure
    Michael Geers, https://micro-frontends.org
    eyeworkers
    Frontend Architecture: Micro Frontends
    The Monolith: A Problem (?)

    View Slide

  6. Frontend
    Support
    User
    Profile
    Articles
    eyeworkers
    Frontend Architecture: Micro Frontends
    The Monolith: A Problem (?)

    View Slide

  7. Frontend Dev
    Invoicing
    Order
    Customer Care
    Purchasing
    Frontend
    Invoicing Team
    µFrontend
    Order Team
    µFrontend
    Shop Team
    µFrontend
    Customer Care Team
    µFrontend
    Vertical Teams
    Frontend Architecture: Micro Frontends
    The Monolith: A Problem (?)
    Support
    User
    Profile
    Articles
    eyeworkers

    View Slide

  8. Service A
    Project
    Frontend Frontend
    Backend
    Application Layer
    Service B
    Service C
    Backend Frontend
    Infrastructure
    (Conway'sLaw)
    Frontend
    eyeworkers
    Frontend Architecture: Micro Frontends
    The Monolith: A Problem (?)

    View Slide

  9. Frontend Dev
    Invoicing
    Order
    Customer Care
    Purchasing
    Frontend
    Invoicing Team
    µFrontend
    Order Team
    µFrontend
    Shop Team
    µFrontend
    Customer Care Team
    µFrontend
    Vertical Teams
    Frontend Architecture: Micro Frontends
    The Monolith: A Problem (?)
    Support
    User
    Profile
    Articles
    Conway's Law:
    “Organizations which design systems […] are constrained to produce
    designs which are copies of the communication structures of these
    organizations.”
    (Melvin E. Conway, How do committeesinvent?, 1968)
    Organizational Patterns of Agile Software Development (Coplien, Harrison, 2004):
    Problematic: When parts of the organization are not aligned close to the
    essential parts of the product, and the communication within the organization
    does not represent the relationships between parts of the product.
    eyeworkers
    Q: What if teams are not aligned to the domains that should be modelled in a software?

    View Slide

  10. Frontend Architecture: Micro Frontends
    Motivation
    Frontend
    • Why do we want to discard the monolith?
    maintainability
    resilience
    vertical slicing
    knowledgetransfer
    ownership
    avoid vendor locks
    domain boundaries
    • What benefits does a Micro Frontend
    Architecture give us?
    • How can we improve?
    simple refactorings
    lower coupling
    individual release cycles
    eyeworkers

    View Slide

  11. Technical Aspects
    Economically Aspects
    Social Aspects
    • future-proof
    • negative pull effects of single
    vendors does not affect
    the organization on a large
    scale
    • less technical debts
    • morescalability of the costs
    of the infrastructure
    • adopting/ (re-)modelling
    of internal processes
    cheaper
    • legacy Systems: Maintenance
    mode
    • modern technologies can be
    adopted early
    • chooseparadigms and
    tools depending on domains,
    not the other way around
    • team can grow with
    technology used
    • bonding through Knowledge
    Crunching
    • exchangeof experience
    between vertical teams
    • not stuck with old technology
    Frontend Architecture: Micro Frontends
    Motivation
    eyeworkers

    View Slide

  12. Frontend Architecture: Micro Frontends
    The Online-Shop
    Backend
    MicroServices
    SOA
    Shop
    Shopping
    Cart User
    Profile
    Shopping
    Cart
    User Profile
    Frontend
    Shop
    Frontend
    Frontend
    eyeworkers
    Support
    User
    Profile
    Articles

    View Slide

  13. Backend
    Frontend
    MicroServices
    SOA
    Shop
    Shopping
    Cart User
    Profile
    Shopping
    Cart
    User Profile
    Frontend
    Shop
    Frontend
    Shopping Cart
    • list cart contents
    • edit shopping carts
    User Profile
    • show order history
    • edit paymentoptions
    • manage shipping addresses
    Shop Frontend
    • search articles
    • list articles & categories
    • show recommendations
    Frontend Architecture: Micro Frontends
    The Online-Shop
    eyeworkers

    View Slide

  14. Shopping
    Cart
    Shop
    Frontend
    Frontend Architecture: Micro Frontends
    The Online-Shop
    User Profile
    Frontend
    eyeworkers

    View Slide

  15. Frontend Architecture: Micro Frontends
    Challenges for the µs
    Challenges
    • Data redundancy/-consistency
    • Communication
    • Latency
    Challenges
    • Communication
    • Composition
    • UI, UX, LaF
    Backend
    Shopping
    Cart
    User
    Profile
    MicroServices
    Shop
    Frontend
    Shopping
    Cart
    User Profile
    Frontend
    Shop
    Frontend
    Micro Frontends
    eyeworkers

    View Slide

  16. Backend Frontend
    Domain Modelling: UI:
    Formatting
    Styling UX
    Frontend Architecture: Micro Frontends
    Challenges for the µs
    • Value Objects
    • Entities
    • Services
    • Data Rendering
    eyeworkers

    View Slide

  17. Frontend Architecture: Micro Frontends
    Prerequisites µFrontend
    Backend
    Frontend
    • Individual development of
    Backend and Frontend
    • Backend Mocks arepossible
    • Public API
    • "API first" can help
    • Modularization
    • Modern Tooling, Dependency
    Management
    • Multiple Domain Models:
    Test withSplit & Deploy as Micro
    Frontends
    eyeworkers

    View Slide

  18. Frontend Architecture: Micro Frontends
    Integration – Build-Time
    Lockstep Release Process
    extjs-app-profile angular-shop
    Frontend
    @shopme/frontend
    react-cart
    (DeploymentMonolith)
    eyeworkers

    View Slide

  19. Frontend Architecture: Micro Frontends
    Integration – Build-Time
    Lockstep Release Process
    extjs-app-profile angular-shop
    Frontend
    @shopme/frontend
    react-cart
    Deployment Monolith
    The Monolith: A Problem?
    User
    Profile
    Shopping
    Cart
    Articles Invoicing
    Support
    ... ...
    Support
    User
    Profile
    Articles
    Monolith
    Modulith
    https://deviq.com/antipatterns/big-ball-of-mud eyeworkers

    View Slide

  20. Frontend Architecture: Micro Frontends
    Integration – Build-Time
    Lockstep Release Process
    extjs-app-profile angular-shop
    Frontend
    @shopme/frontend
    react-cart
    Deployment Monolith
    User
    Profile
    Shopping
    Cart
    Articles Invoicing
    Support
    ... ...
    Modulith
    Modules
    • high cohesion
    • low coupling
    • clear boundaries
    but the Modulith lacks
    • independent deployability
    eyeworkers
    • information hiding

    View Slide

  21. Container Pull
    Frontend
    extjs-app-profile angular-shop
    @shopme/frontend
    extjs-app-profile angular-shop
    node.appendChild(reactCartCmp);
    Frontend
    fetch("react-cart.manifest.json");
    react-cart
    react-cart
    Frontend Architecture: Micro Frontends
    Integration – Build-Time
    eyeworkers

    View Slide

  22. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    Iframes
    Shopping
    Cart
    Shop
    Frontend
    User Profile
    Frontend
    eyeworkers

    View Slide

  23. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    Web Components
    Shop
    Frontend
    Shopping
    Cart
    User Profile
    Frontend
    eyeworkers

    View Slide

  24. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    SPA MPA
    Shop
    Frontend
    Shopping
    Cart
    User Profile
    Frontend
    https://shopme.deploy:8080/index.html
    https://shopme.deploy:8080/cart-frontend
    https://shopme.deploy:8080/shop-frontend
    https://shopme.deploy:8080/account-frontend
    eyeworkers

    View Slide

  25. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    App Shell
    Shell
    Shell
    Shell
    Shop
    Frontend
    Shopping
    Cart
    User Profile
    Frontend
    eyeworkers
    • Orchestrator
    • has some knowledge about the
    frontends used
    • provides routing, authentication

    View Slide

  26. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    Micro Frontend Anarchy
    https://www.thoughtworks.com
    eyeworkers

    View Slide

  27. Frontend Architecture: Micro Frontends
    Integration – Run-Time
    Micro Frontend Anarchy
    ExtJS
    Angular
    React
    2
    4
    3
    5
    B{
    6
    7
    C{
    8
    9
    D{
    12
    11
    F {
    14
    13
    15
    G {
    10
    E {
    1
    A { blocks B, C, D, E, F, G
    blocks C, D, E, F, G
    blocks D, E, F, G
    blocks F, G
    blocks G
    Call Stack
    Time
    eyeworkers

    View Slide

  28. Frontend Architecture: Micro Frontends
    What's next?
    Micro Frontends
    https://www.thoughtworks.com
    eyeworkers

    View Slide

  29. Frontend Architecture: Micro Frontends
    What's next?
    • autonomous teams:
    • decide on the Tech
    Stack
    • cross-functionalteams
    model the frontends
    • differentFrontends
    • One CSS to rule them all
    • Shared UI libraries
    • data flow
    • integration necessitates
    how frontend fragments
    communicate
    • shared data
    • data gathered via RPC/REST
    demands unified rendering
    mechanism
    ?
    Separate Ways
    eyeworkers

    View Slide

  30. Frontend Architecture: Micro Frontends
    What's next?
    Architectural requirements
    1. make yourself familiar with them
    2. prioritize them
    3. evaluate them
    !
    Shared State/
    Navigation between apps?
    Hyperlinks
    less
    Legacy Apps or strong
    isolation required?
    a lot
    Iframes
    yes
    Individual deployment/
    mix of technologies?
    no
    Bootstrap multiple SPAs
    yes
    Deployment Monolith
    no
    Manfred Steyer, ObjektSpektrum 02/2019
    eyeworkers

    View Slide

  31. Frontend Architecture: Micro Frontends
    What's next?
    State of Frontend 2022
    eyeworkers

    View Slide

  32. Frontend Architecture: Micro Frontends
    What's next?
    Join Us!
    https://www.youtube.com/watch?v=4KVOuQDIfmw
    https://medium.com/dazn-tech
    https://www.youtube.com/watch?v=BuRB3djraeM
    https://micro-frontends.org/
    eyeworkers

    View Slide