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.

Transcript

1. eyeworkers.de
   eyeworkers Frontend Architecture: Micro Frontends
   Thorsten Suckow-Homberg
   thorsten.suckow-homberg@eyeworkers.de
   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