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

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

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

May 15, 2019
Tweet

Transcript

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

    details
  2. Michael Geers Frontend Engineer naltatis on Twitter & GitHub micro-frontends.org

    Bremen, Germany e-commerce
  3. Frontend Monolith Black Diamond Royal Library, Copenhagen

  4. faster feature development

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

    Micro Frontends "
  6. Where do we come from? but before …

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

  8. Backend Frontend Backend Frontend bye bye full stack #

  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
  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
  11. Micro Frontends Team Inspire Team Search Team Decide Team Checkout

    Backend Frontend
  12. 1.What are Micro Frontends?

  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. …
  14. Autonomy Team Inspire Team Decide Team Checkout own tech stack

    independent deployments self contained
  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
  16. & organizational technical Implications

  17. 2.Why Micro Frontends?

  18. specialists team

  19. cross functional team

  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
  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 ⏳
  22. & Development Speed

  23. Customer Focus direct feedback loop no pure api teams

  24. Reduced Scope everything fits
 into memory again ❤ my

  25. Frontend Renovation without throwing everything away

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

    fast
  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 …
  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.
  29. Who works like this?

  30. What’s our experience?

  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
  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
  33. 3.How to implement?

  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
  35. Including Fragments from other Teams Team Decide Team Inspire Team

    Checkout Fragment Fragment Page
  36. Server Side Integration

  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
  38. Team Decide owns the page Team Inspire provides a fragment

    Team Checkout
 provides two fragments
  39. via iframes O RLY? - bad for SEO - load

    performance - layout constrains - poor accessibility Disadvantages - strong isolation - work everywhere Advantages
  40. via iframes Spotify web player (until early 2019) & desktop

    app https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
  41. SSI Server Side Includes* <!--#include virtual="/some-url" --> *or ESI Edge

    Side Includes - they have similar taste
  42. Google Books 2001 The easiest way to import external content

    into a Web page is to use a server-side include.
  43. Server Side Includes Server Team Decide nginx Server Team Checkout

    /red-tractor <html> <!--#include virtual=“/checkout/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/checkout/buy“ --> </html> /checkout/basket /checkout/buy /red-tractor <button> buy for 66 € </button> <em>0 items</em> <html> <em>0 items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html>
  44. Client Side Integration

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

    Team Checkout
 provides two fragments Interactivity
  46. Each Fragment as a Mini Application Team Decide Team Inspire

    Team Checkout Fragment Fragment Page
  47. Web Components Custom Elements Shadow DOM HTML Template

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

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

    basket ...';
 }
 }
 customElements.define('checkout-basket', CheckoutBasket); ()) Choo Custom Elements
  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
  51. Custom Elements v1
 API stabilized end of 2016 Browser Support

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

  53. <inspire-reco sku="t_red">
 </inspire-reco> <checkout-basket>
 </checkout-basket> <checkout-buy sku="t_red">
 </checkout-buy>

  54. <inspire-reco sku="t_red">
 </inspire-reco> <checkout-basket>
 </checkout-basket> <checkout-buy sku="t_red">
 </checkout-buy> t_green t_green

  55. the DOM is the API Teams publish their Custom Elements

    documentation Element-Name, Attributes, Events
  56. Page Transitions

  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
  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
  59. Short Integration Recap Pages Fragments Server Links SSI/ESI Client App-Shell

    Meta-Router Web Components
  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
  61. 4. " nitty gritty details

  62. *coherent ux & design

  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
  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
  65. + web performance

  66. Performance First measure regularly pick your metrics Tools Lighthouse Sitespeed.io

    WebpageTest Speedcurve … Metrics Lighthouse Scores Time to Interactive Visually Complete Page Weight …
  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
  68. make responsible tech choices large framework runtime hyperapp small runtimes

  69. , quality & testing

  70. testing in isolation dummy fragment product page works without fragments

    Team Decide owns & tests majority of the tests
  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
  72. testing accross boundaries cross team tests exist but are the

    exception Clicking here … In some cases … increments this.
  73. - knowledge sharing -

  74. regular rituals guildes arch frontend tracking security kubernetes … people

    from all teams talk on a specific topic mostly weekly
  75. vertical depth . / 0 1

  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
  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
  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
  79. Backend Frontend lets’ blur this line!

  80. Backend Frontend let’s blur this line!

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

  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