Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend

The term Micro Frontends describes the idea of splitting your application into vertical slices, which are developed by autonomous cross functional teams. So beside caring about database and business logic, each team also develops their own part of the user interface. This talk will describe different strategies to integrate these user interfaces in the browser without locking them into a single shared frontend framework like React, Angular or Vue.js. When doing this, you also need to keep an eye on web performance and you should have a plan on how to ensure that the customer gets a consistent look and feel.

Furthermore there are a lot of benefits to a cross functional team compared to separate dedicated frontend and backend teams. It removes friction, enables you to iterate more quickly, reduces the need for formal documentation and helps you find better technical solutions.

Key takeaways:

Understand the ideas behind micro frontends and the benefits and drawbacks of this approach
Pick an appropriate frontend integration strategy
Learn what web components are and how they can help in providing an neutral interface
Identify topics where it is important to decide between team autonomy and uniformity
Have a broad overview of related topics like performance monitoring and design systems that need to be addressed
Understand the organizational benefits and challenges that come with this model

Transcript

1. Micro Frontends
   OR
   frontend, backend, ! happyend
   the nitty gritty details
   

   View Slide

2. Michael Geers
   Frontend Engineer
   naltatis
   on Twitter & GitHub
   micro-frontends.org
   Bremen, Germany
   e-commerce
   

   View Slide

3. Frontend
   Monolith
   Black Diamond
   Royal Library, Copenhagen
   

   View Slide

4. faster feature
   development
   

   View Slide

5. 1. what?
   2. why?
   3. how?
   4. nitty gritty details
   Micro Frontends
   "
   

   View Slide

6. Where do we come from?
   but before …
   

   View Slide

7. The Monolith
   Backend Frontend
   era of the
   full-stack developer
   

   View Slide

8. Backend Frontend
   Backend
   Frontend bye bye
   full stack #
   

   View Slide

9. Team
   Inspire
   Team
   Search
   Team
   Decide
   Team
   Checkout
   Frontend
   Teaser
   Service
   Product
   Service
   Price
   Service
   Availability
   Service
   Payment
   Service
   Basket
   Service
   Customer
   Service
   API Gateway (Rest, BFF, GraphQL)
   Microservice Architecture
   Backend Frontend
   specialists
   

   View Slide

10. Frontend
    Frontend
    The Monolith Front- & Backend Microservices
    Frontend Monoliths
    Backend Frontend
    Frontend
    Teaser
    Service
    Product
    Service
    Price
    Service
    Availability
    Service
    Payment
    Service
    Basket
    Service
    Customer
    Service
    API Gateway (Rest, BFF, GraphQL)
    growing complexity
    no scaling
    

    View Slide

11. Micro Frontends
    Team
    Inspire
    Team
    Search
    Team
    Decide
    Team
    Checkout
    Backend Frontend
    

    View Slide

12. 1.What are Micro Frontends?
    

    View Slide

13. Micro Frontends Definition
    ThoughtWorks Technology Radar
    https://www.thoughtworks.com/de/radar/techniques/micro-frontends
    Stages: Access (2016) > Trial (2017) > Adopt ⭐ (2019)
    … Our preferred (and proven) approach is to split the
    browser-based code into micro frontends. In this approach,
    the web application is broken down into its features, and
    each feature is owned, frontend to backend, by a different
    team. This ensures that every feature is developed, tested
    and deployed independently from other features. …
    

    View Slide

14. Autonomy
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    own
    tech stack
    independent
    deployments
    self
    contained
    

    View Slide

15. Team Missions
    „Make discovering and
    finding products easy.“
    „Support the customer’s
    buying decision.“
    „Make the actual buying
    process happen.“
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    

    View Slide

16. &
    organizational
    technical
    Implications
    

    View Slide

17. 2.Why Micro Frontends?
    

    View Slide

18. specialists team
    

    View Slide

19. cross functional team
    

    View Slide

20. Frontend
    Payment
    Service
    Content
    Service
    Operations
    Platform
    Business
    Attributes
    Service
    Specialist Teams
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Cross Functional Teams
    grouped around a use case or customer need
    grouped around a skill or technology
    

    View Slide

21. Frontend
    Payment
    Service
    Content
    Service
    Operations
    Platform
    Business
    Attributes
    Service
    Specialist Teams
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Cross Functional Teams
    grouped around a use case or customer need
    grouped around a skill or technology
    developing a new feature
    inter-team
    communication
    ⏳
    

    View Slide

22. & Development Speed
    

    View Slide

23. Customer Focus
    direct feedback loop
    no pure api teams
    

    View Slide

24. Reduced Scope
    everything fits

    into memory again ❤
    my
    

    View Slide

25. Frontend Renovation
    without throwing everything away
    

    View Slide

26. 2005 2010 2015
    ®
    Polymer
    hyperapp
    ?
    frontend tools change fast
    

    View Slide

27. Frontend
    Backend
    Database
    Ruby on
    Rails
    PostgreSQL
    Spring Boot
    Java
    MongoDB
    React Vue.js
    GraphQL
    Scala Play
    Scala Play
    Scala Play
    MySQL S3
    React → Elm
    Phoenix
    Elixir
    AWS Lambda
    Cassandra
    Marco Architecture Micro Architecture
    React
    Framework
    Switch
    be able to switch frameworks …
    

    View Slide

28. Frontend
    Backend
    Database
    Spring Boot
    Java
    PostgreSQL
    Spring Boot
    Java
    PostgreSQL
    Wonder.js
    v1.3
    Wonder.js
    v1.3
    Spring Boot
    Java
    PostgreSQL
    Spring Boot
    Java
    PostgreSQL
    Wonder.js
    v1.3 → v1.4
    Wonder.js
    v1.3
    Version
    Upgrade
    1.3
    1.4
    Page
    Fragment
    1.4
    … or upgrade at your own pace.
    

    View Slide

29. Who works like this?
    

    View Slide

30. What’s our experience?
    

    View Slide

31. 2 teams

    5-7 people/team
    5 teams

    6-10 people/team
    New e-commerce platforms
    5 teams

    6-8 people/team
    premium material goods
    print catalogs & 9 stores
    premium fashion
    11 department stores
    116 department stores
    in Germany & Belgium
    2014 2016 2016
    

    View Slide

32. Project: Next Level Commerce
    5 teams
    7-10 people/team
    from 3 dev-companies
    fashion for best ager
    15 brands in up to 12 countries
    ~ 65 online stores
    green field project
    after 2 month
    go-live with a
    newly created brand
    taschenherz.com
    6 month later
    first migration of a
    real brand
    mona.de
    2018
    

    View Slide

33. 3.How to implement?
    

    View Slide

34. A Page is Owned by one Team
    2
    33 $
    66 $
    99 $ buy
    2
    1
    66 $
    1
    1
    list
    home detail basket payment confirm
    $ $ %%
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Customer Journey
    

    View Slide

35. Including Fragments from other Teams
    Team
    Decide
    Team
    Inspire
    Team Checkout
    Fragment
    Fragment
    Page
    

    View Slide

36. Server Side
    Integration
    

    View Slide

37. via Links
    2
    33 $
    66 $
    99 $ buy
    2
    1
    66 $
    1
    1
    list
    home detail basket payment confirm
    $ $ %%
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Customer Journey
    

    View Slide

38. Team Decide
    owns the page
    Team Inspire
    provides a fragment
    Team Checkout

    provides two fragments
    

    View Slide

39. via iframes
    O RLY?
    - bad for SEO
    - load performance
    - layout constrains
    - poor accessibility
    Disadvantages
    - strong isolation
    - work everywhere
    Advantages
    

    View Slide

40. via iframes
    Spotify web player (until early 2019) & desktop app
    https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
    

    View Slide

41. SSI Server Side Includes*
    
    *or ESI Edge Side Includes - they have similar taste
    

    View Slide

42. Google Books
    2001
    The easiest way to import external content
    into a Web page is to use a server-side
    include.
    

    View Slide

43. Server Side Includes
    Server
    Team Decide
    nginx
    Server
    Team Checkout
    /red-tractor
    
    
    Tractor
    
    
    /checkout/basket
    /checkout/buy
    /red-tractor
    
    buy for 66 €
    
    0 items
    
    0 items
    Tractor
    buy for 66 €
    
    

    View Slide

44. Client Side Integration
    

    View Slide

45. Team Decide
    owns the page
    Team Inspire
    provides a fragment
    Team Checkout

    provides two fragments
    Interactivity
    

    View Slide

46. Each Fragment as a Mini Application
    Team
    Decide
    Team
    Inspire
    Team Checkout
    Fragment
    Fragment
    Page
    

    View Slide

47. Web Components
    Custom
    Elements
    Shadow
    DOM
    HTML
    Template
    

    View Slide

48. Custom Elements
    
    https://developers.google.com/web/fundamentals/getting-started/primers/customelements
    

    View Slide

49. class CheckoutBasket extends HTMLElement {
    connectedCallback() {
    this.innerHTML = 'mini basket ...';

    }

    }

    customElements.define('checkout-basket', CheckoutBasket);
    ())
    Choo
    Custom Elements
    

    View Slide

50. Element Lifecycle
    class CheckoutBasket extends HTMLElement {
    constructor() {...}

    connectedCallback() {...}

    attributeChangedCallback(attr, oldVal, newVal) {...}

    disconnectedCallback() {...}

    }
    is created
    attached to DOM
    removed from DOM, cleanup!
    someone changed an attribute
    

    View Slide

51. Custom Elements v1

    API stabilized end of 2016
    Browser Support
    in development
    

    View Slide

52. 

    https://github.com/webcomponents/custom-elements
    Browser Support
    with
    Polyfill (6KB)
    11
    

    View Slide

53. 

    
    

    
    

    
    

    View Slide

54. 

    
    

    
    

    
    t_green
    t_green
    

    View Slide

55. the DOM is the API
    Teams publish their Custom Elements documentation
    Element-Name, Attributes, Events
    

    View Slide

56. Page Transitions
    

    View Slide

57. Only Inside a Team
    Team A
    one router per team
    Hard
    Navigation
    

    Links
    Team B
    /product
    /list
    Soft

    Navigation
    Client
    Rendered
    /success
    /cart
    Soft

    Navigation
    Client
    Rendered
    

    View Slide

58. Across Teams
    meta router & router per team
    /product
    /list
    Soft

    Navigation
    Client
    Rendered
    /success
    /cart
    Soft

    Navigation
    Client
    Rendered
    Team A Team B
    App Shell
    increased complexity!
    shared runtime code
    harder debugging
    Soft
    Navigation
    

    Client
    Rendered
    

    View Slide

59. Short Integration Recap
    Pages Fragments
    Server Links SSI/ESI
    Client
    App-Shell
    Meta-Router
    Web
    Components
    

    View Slide

60. other Libraries & Meta Frameworks
    https://github.com/CanopyTax/single-spa
    https://github.com/zalando/tailor
    https://github.com/opencomponents/oc
    Podium
    https://podium-lib.io
    meta-spa-router
    https://github.com/manfredsteyer/meta-router
    https://github.com/onerzafer/microfe-client
    

    View Slide

61. 4.
    "
    nitty gritty details
    

    View Slide

62. *coherent
    ux & design
    

    View Slide

63. Have a Design System
    Tools: UIengine, Storybook, …
    Aspects
    Design
    Users Experience
    Performance
    Accessibility
    Dev Experience
    Contents
    Design Tokens (fonts, colors, …)
    Usable Components (buttons, …)
    Design System / Pattern Library
    

    View Slide

64. Shared
    Design System
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Distributed as Versioned Package
    v1.1
    v1.2
    v1.3
    v2-beta
    ...
    v2-beta v1.3
    v1.1 v1.3
    v2-beta
    v1.3
    v1.1
    

    View Slide

65. +
    web performance
    

    View Slide

66. Performance First
    measure regularly
    pick your metrics
    Tools
    Lighthouse
    Sitespeed.io
    WebpageTest
    Speedcurve
    …
    Metrics
    Lighthouse Scores
    Time to Interactive
    Visually Complete
    Page Weight
    …
    

    View Slide

67. integrate perf into you culture
    set a budget
    and enforce it
    Attribution is not always easy
    due to fragments & 3rd party.
    Page-owner is in the lead!
    Break the build!
    Discuss alternatives with
    team and product owner
    

    View Slide

68. make responsible tech choices
    large framework runtime
    hyperapp
    small runtimes
    

    View Slide

69. , quality & testing
    

    View Slide

70. testing in isolation
    dummy
    fragment
    product page works
    without fragments
    Team Decide owns & tests
    majority of
    the tests
    

    View Slide

71. testing in isolation
    header & footer are
    standalone fragments
    Team Search owns & tests
    dummy
    fragment
    product page works
    without fragments
    Team Decide owns & tests
    majority of
    the tests
    

    View Slide

72. testing accross boundaries
    cross team tests exist
    but are the exception
    Clicking here …
    In some
    cases
    … increments this.
    

    View Slide

73. - knowledge
    sharing
    -
    

    View Slide

74. regular rituals
    guildes
    arch
    frontend
    tracking
    security
    kubernetes
    …
    people from all teams
    talk on a specific topic
    mostly weekly
    

    View Slide

75. vertical depth
    .
    /
    0
    1
    

    View Slide

76. .
    /
    0
    1
    How Deep Should a Vertical Team be?
    Frontend
    Backend
    Operations
    Data Science
    Business &
    Stakeholder
    frontend only
    scaling development ✔
    easier rebuilds ✔
    full-stack team
    faster development ✔
    less coordination ✔
    full autonomy
    fast trial of ideas ✔ 

    adapt quickly ✔
    and these and these
    

    View Slide

77. Want to learn more?
    Extensive Link Collection
    by Elisabeth Engel @_lizzelo_
    micro-frontends.org
    by Me @naltatis
    Self-Contained Systems
    by INNOQ
    Microservice Websites
    by Gustav Nilsson Kotte @gustaf_nk
    Talk: Frontend Monolith
    by Stefan Tilkov @stilkov
    Micro Frontends at DAZN
    by Luca Mezzalira @lucamezzalira
    2
    

    View Slide

78. I’m writing a book
    MEAP - Manning Early Access Program
    this summer
    M A N N I N G
    Michael Geers
    follow @naltatis or @manningbooks for updates
    

    View Slide

79. Backend
    Frontend
    lets’ blur this line!
    

    View Slide

80. Backend
    Frontend
    let’s blur this line!
    

    View Slide

81. happyend Michael Geers
    @naltatis
    !
    Thanks for listening!
    

    View Slide

82. Burano Pixaline

    https://pixabay.com/images/id-2522251/
    Black Diamond (me)
    Holiday Snap 2: Tron Apionid

    https://flic.kr/p/r23SxR
    Drummers skeeze

    https://pixabay.com/images/id-642540/
    Tocotronic Stefan Müller

    https://flic.kr/p/JCTQXd
    People Icons freepik

    https://www.flaticon.com/family/special/lineal-color
    Action Bicycling Roman Pohorecki

    https://www.pexels.com/photo/action-bicycling-bike-
    biking-287398/
    Wooden Counter David Siglin

    https://www.pexels.com/photo/blur-blurry-bokeh-close-
    up-347139/
    The Tool Guy Tirachard Kumtanom

    https://unsplash.com/photos/UuW4psOb388
    Woodshop Igor Ovsyannykov

    https://unsplash.com/photos/iXV0i4Wo4yc
    HP C7000 BladeSystem pchow98

    https://flic.kr/p/7AVF23
    Close up Susanne Nilsson

    https://flic.kr/p/nppBcE
    Unicorn d97jro

    https://pixabay.com/images/id-671593/
    Browser Logos Cătălin Mariș

    https://github.com/alrra/browser-logos
    Lego Benny Cheezburger

    http://gph.is/1BCRCKh
    Tractors Manufactum

    https://www.manufactum.com/tin-toys-c193667/
    Credits
    built with Micro Frontends
    

    View Slide