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
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