A presentation at MicroCPH in in Copenhagen, Denmark by Michael Geers
Micro Frontends the nitty gritty details OR frontend, backend, ! happyend
Michael Geers Frontend Engineer naltatis on Twitter & GitHub micro-frontends.org e-commerce Bremen, Germany
Frontend Monolith Black Diamond Royal Library, Copenhagen
faster feature development
Micro Frontends 1. what? 2. why? 3. how? 4. nitty gritty details “
but before … Where do we come from?
Frontend Backend The Monolith era of the full-stack developer
Frontend Backend Frontend Backend bye bye full stack
Frontend Backend specialists Team Inspire API Gateway (Rest, BFF, GraphQL) Product Service Teaser Service Team Search Team Decide Availability Service Price Service Team Checkout Basket Service Payment Service Customer Service Microservice Architecture Frontend
growing complexity no scaling Frontend Frontend Monoliths Frontend Frontend Frontend Backend API Gateway (Rest, BFF, GraphQL) Product Service Teaser Service The Monolith Front- & Backend Availability Service Price Service Basket Service Payment Service Microservices Customer Service
Backend Frontend Micro Frontends Team Inspire Team Search Team Decide Team Checkout
What are Micro Frontends?
Micro Frontends Definition … 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. … ThoughtWorks Technology Radar https://www.thoughtworks.com/de/radar/techniques/micro-frontends Stages: Access (2016) > Trial (2017) > Adopt ⭐ (2019)
Autonomy own tech stack Team Inspire Team Decide self Team contained Checkout independent deployments
Team Missions „Make discovering and finding products easy.“ Team Inspire „Support the customer’s buying decision.“ Team Decide „Make the actual buying process happen.“ Team Checkout
technical organizational & Implications
Why Micro Frontends?
specialists team
cross functional team
Specialist Teams Cross Functional Teams Frontend Content Service Attributes Service Payment Service Team Inspire Business Team Decide Team Checkout Operations Platform grouped around a skill or technology grouped around a use case or customer need
Specialist Teams Cross Functional Teams Frontend Content Service Attributes Service Payment Service Team Inspire Business Team Decide Team Checkout Operations Platform grouped around a skill or technology grouped around a use case or customer need ⏳ inter-team developing a new feature communication
& Development Speed
Customer Focus direct feedback loop no pure api teams
Reduced Scope everything fits into memory again ❤ my
Frontend Renovation without throwing everything away
frontend tools change fast
Frontend be able to switch frameworks … React Vue.js React React → Elm Framework Switch MongoDB MySQL S3 Marco Architecture Phoenix Elixir AWS Lambda PostgreSQL Scala Play Spring Boot Java Scala Play Ruby on Rails Scala Play Database Backend GraphQL Cassandra Micro Architecture
… or upgrade at your own pace. Page 1.3 1.4 Database Backend Frontend 1.4 Fragment Wonder.js Wonder.js Wonder.js Wonder.js v1.3 v1.3 v1.3 v1.3 → v1.4 Spring Boot Java Spring Boot Java Spring Boot Java Spring Boot Java PostgreSQL PostgreSQL PostgreSQL PostgreSQL Version Upgrade
Who works like this?
What’s our experience?
New e-commerce platforms 116 department stores in Germany & Belgium 2014 5 teams 6-8 people/team premium material goods print catalogs & 9 stores 2016 2 teams 5-7 people/team premium fashion 11 department stores 2016 5 teams 6-10 people/team
Project: Next Level Commerce green field project fashion for best ager 15 brands in up to 12 countries ~ 65 online stores 2018 5 teams 7-10 people/team from 3 dev-companies after 2 month go-live with a newly created brand taschenherz.com 6 month later first migration of a real brand mona.de
How to implement?
A Page is Owned by one Team Customer Journey 1 1 1 2 2 33 $ 66 $ $$ 66 $ %% 99 $ home list Team Inspire detail Team Decide buy basket Team Checkout payment confirm
Including Fragments from other Teams Team Decide Team Inspire Fragment Page Team Checkout Fragment
Server Side Integration
via Links Customer Journey 1 1 1 2 2 33 $ 66 $ $$ 66 $ %% 99 $ home list Team Inspire detail Team Decide buy basket Team Checkout payment confirm
Team Decide owns the page Team Inspire provides a fragment Team Checkout provides two fragments
via iframes Advantages - strong isolation work everywhere Disadvantages - bad for SEO load performance layout constrains poor accessibility ? Y L R O
via iframes Spotify web player (until early 2019) & desktop app https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
SSI Server Side Includes* <!—#include virtual=”/some-url” —> *or ESI Edge Side Includes - they have similar taste
The easiest way to import external content into a Web page is to use a server-side include. 2001 Google Books
Server Team Decide <button> buy for 66 € </button> /checkout/buy <em>0 items</em>
<html> <!—#include virtual=“/checkout/basket“ —> <h1>Tractor</h1> <!—#include virtual=“/checkout/buy“ —> </html> /checkout/basket /red-tractor nginx Server Team Checkout Server Side Includes /red-tractor <html> <em>0 items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html>Client Side Integration
Team Decide Interactivity owns the page Team Inspire provides a fragment Team Checkout provides two fragments
Each Fragment as a Mini Application Team Decide Team Inspire Fragment Page Team Checkout Fragment
Web Components Custom Elements Shadow DOM HTML Template
Custom Elements <checkout-basket></checkout-basket> https://developers.google.com/web/fundamentals/getting-started/primers/customelements
Custom Elements class CheckoutBasket extends HTMLElement { connectedCallback() { this.innerHTML = ‘mini basket …’; } } ()) Choo customElements.define(‘checkout-basket’, CheckoutBasket);
Element Lifecycle class CheckoutBasket extends HTMLElement { constructor() {…} is created connectedCallback() {…} attached to DOM attributeChangedCallback(attr, oldVal, newVal) {…} disconnectedCallback() {…} } removed from DOM, cleanup! someone changed an attribute
Browser Support in Custom Elements v1 API stabilized end of 2016 t n e m p o l e v e d
Browser Support 11 with Polyfill (6KB) https://github.com/webcomponents/custom-elements
<checkout-basket> </checkout-basket> <inspire-reco sku=”t_red”> </inspire-reco> <checkout-buy sku=”t_red”> </checkout-buy>
<checkout-basket> </checkout-basket> n e e r g t_ <inspire-reco sku=”t_red”> </inspire-reco> n e e r g _ t <checkout-buy sku=”t_red”> </checkout-buy>
the DOM is the API Teams publish their Custom Elements documentation Element-Name, Attributes, Events
Page Transitions
Only Inside a Team one router per team Team B Team A Soft Navigation /list Client Rendered /product Hard Navigation Links Soft Navigation /cart Client Rendered /success
App Shell Across Teams meta router & router per team increased complexity! shared runtime code harder debugging Team B Team A Soft Navigation Client Rendered Soft Navigation /list Client Rendered /product Soft Navigation /cart Client Rendered /success
Short Integration Recap Pages Fragments Server Links SSI/ESI Client App-Shell Meta-Router Web Components
other Libraries & Meta Frameworks Podium https://github.com/CanopyTax/single-spa https://github.com/opencomponents/oc https://podium-lib.io https://github.com/onerzafer/microfe-client meta-spa-router https://github.com/zalando/tailor https://github.com/manfredsteyer/meta-router
nitty gritty details “
coherent ux & design
Have a Design System Design System / Pattern Library Contents Design Tokens (fonts, colors, …) Usable Components (buttons, …) Aspects Design Users Experience Performance Accessibility Dev Experience Tools: UIengine, Storybook, …
Distributed as Versioned Package v1.3 Shared Design System v1.1 v1.2 v1.3 v2-beta … v1.1 v2-beta Team Inspire v1.3 Team Checkout v1.1 Team Decide v1.3 v2-beta
Performance First measure regularly pick your metrics Tools Lighthouse Sitespeed.io WebpageTest Speedcurve … Metrics Lighthouse Scores Time to Interactive Visually Complete Page Weight …
integrate perf into you culture Break the build! set a budget and enforce it Discuss alternatives with team and product owner Attribution is not always easy due to fragments & 3rd party. Page-owner is in the lead!
make responsible tech choices large framework runtime hyperapp small runtimes
, quality & testing
testing in isolation dummy fragment product page works without fragments Team Decide owns & tests major ity of the te sts
testing in isolation dummy fragment header & footer are standalone fragments Team Search owns & tests product page works without fragments Team Decide owns & tests major ity of the te sts
testing accross boundaries … increments this. cross team tests exist but are the exception Clicking here … In som e cases
— knowledge sharing
regular rituals mostly weekly people from all teams talk on a specific topic guildes arch frontend tracking security kubernetes …
1 . 0 / vertical depth
How Deep Should a Vertical Team be? frontend only scaling development ✔ easier rebuilds ✔ 1 . 0 / Frontend Backend Operations Data Science Business & Stakeholder full-stack team faster development ✔ less coordination ✔ and these full autonomy fast trial of ideas ✔ adapt quickly ✔ and these
Want to learn more? Extensive Link Collection by Elisabeth Engel @lizzelo Microservice Websites by Gustav Nilsson Kotte @gustaf_nk Micro Frontends at DAZN by Luca Mezzalira @lucamezzalira micro-frontends.org by Me @naltatis 2 Self-Contained Systems by INNOQ Talk: Frontend Monolith by Stefan Tilkov @stilkov
I’m writing a book Michael Geers MEAP - Manning Early Access Program this summer follow @naltatis or @manningbooks for updates MANNING
Frontend lets’ blur this line! Backend
Frontend let’s blur this line! Backend
Thanks for listening! ! happyend Michael Geers @naltatis
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.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.