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>

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

• web performance

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