Micro Frontends Mastering Microservices ● Heise Onlinekonferenz ● März 2020 Oberflächen schneiden & kleben Michael Geers

Monolithen zerlegen

in Microservices

Der Frontend Monolith wird präsentiert von

unabhängige Micro Frontends

Michael Geers Frontend Entwickler naltatis auf Twitter & GitHub Autor des Buches Micro Frontends in Action und der Webseite micro-frontends.org Bremer Software Manufaktur mit Fokus auf E-Commerce

Was ist das? Wieso macht man das? Wie geht das? Die Agenda Wichtige andere Dinge an die man auch noch denken muss …

1.Was sind Micro Frontends?

kurze Rückblende ….

Der Monolith Backend Frontend Zeitalter des Fullstack Entwicklers

Backend Frontend Backend Frontend bye bye Fullstack

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 Architektur Backend Frontend Spezialisten

Frontend Frontend Der Monolith Front- & Backend Microservices Frontend Monolithen Backend Frontend Frontend

Micro Frontends Team Entdecken Team Suchen Team Entscheiden Team Kaufen Backend Frontend

Micro Frontends Definition ThoughtWorks Technology Radar https://www.thoughtworks.com/de/radar/techniques/micro-frontends 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. … Stages: Access (2016) > Trial (2017) > Adopt ⭐ (2019)

Anatomie eines Teams Team Entdecken Team Entscheiden Team Kaufen hat eigenen Tech-Stack kann jederzeit deployen ist unabhängig von anderen Teams Self-contained System

Team Mission „Hilft beim Entdecken passender Produkte.“ „Unterstützt bei der Kaufentscheidung.“ „Führt den Kunden zum Bestellabschluss.“ Team Entdecken Team Entscheiden Team Kaufen

Unsere Erfahrungen mit Micro Frontends

2 Teams 5-7 Entwickler/Team 5 Teams 6-10 Entwickler/Team Neue E-Commerce Plattformen 5 Teams 6-8 Entwickler/Team hochwertige Manufakturprodukte Katalog & 14 Warenhäuser Premium Mode 12 Warenhäuser Warenhauskette heute Galeria Karstadt Kaufhof 2014 2016 2016

Projekt: Next Level Commerce 5 Teams 7-10 Entwickler/Team von 4 Softwarefirmen Primär Mode für Best Ager 15 Marken in bis zu 12 Ländern ~ 65 Online Shops Neuentwicklung Erster Livegang nach 2 Monaten Entwicklung mit fiktiver neuer Marke taschenherz.com 6 Monate später Migration der ersten echten Marke mona.de 2018

Wer macht das noch? … und viele mehr.

2.Wieso macht man das?

schnellere Entwicklung

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 Entwicklung eines Features Meetings viel Wartezeit ⏳

Kundenfokus direktes Feedback keine reinen API Teams

Reduzierter Scope Man kann den Überblick über das ganze System haben. ❤

Frontend Renovierung ohne alles neu zu schreiben

2005 2010 2015 ® Polymer hyperapp ? Frontend Tools sind schnelllebig

Wann sind Micro Frontends keine gute Idee? Native Apps?! Integration ist einfacher im Web AppStore Review vs. Continuous Delivery kleine Projekte Hauptvorteil ist Skalierung Schnitte bringen Overhead Unbekannte Domäne Schnitte sind schwer zu ändern ‎ maybe Monolith-first

3.Wie macht man das?

Zwei zentrale Konzepte: Seiten & Fragmente

Ein Team verantwortet mehrere Seiten 2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Team Kaufen Team Entscheiden Team Entdecken

Teams können Fragmente* anbieten Team Decide Team Inspire Team Checkout Fragment Fragment Page Team Kaufen Team Entdecken Team Entscheiden Seite * aka Includable Micro Frontend, Podlet, Parcel, Pilet, …

schneiden

Teams sind entkoppelt Integration findet zur Laufzeit statt

& kleben

3 Formen von Integration Komposition Seitenübergänge B A C B A A A B A C Kommunikation

2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Seitenübergänge mit Links

Komposition mit iframes O RLY? - schlecht für SEO - schlechte Performance - schränkt Layout ein - keine Barrierefreiheit Nachteile - Starke Isolation - Einfach & funktioniert Vorteile

Spotify web player (bis Anfang 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/ Komposition mit iframes

client side server side rendering

Team Entscheiden Team Entdecken Team Kaufen

buy for 66 € 0 items 0 items

Tractor

buy for 66 € Server Team Entscheiden nginx Server Team Kaufen /red-tractor

Tractor

/kaufen/basket /kaufen/buy /red-tractor Komposition mit SSI oder ESI Server Side Includes

Team Entscheiden Team Entdecken Team Kaufen Interaktivität

Jedes Fragment ist eine Mini-Applikation Team Decide Team Inspire Team Checkout Fragment Fragment Page * Technologie-Serviervorschlag würde man „in echt“ nie so machen * * *

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

class KaufenBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini basket ...'; } } customElements.define('kaufen-basket', KaufenBasket); Custom Elements

Element Lifecycle class KaufenBasket extends HTMLElement { constructor() {...} connectedCallback() {...} attributeChangedCallback(attr, oldVal, newVal) {...} disconnectedCallback() {...} } is created attached to DOM removed from DOM, cleanup! someone changed an attribute

Custom Elements Spec v1 native Unterstützung in allen aktuellen Browsern Polyfill für alte Browser verfügbar ✓ Browser Support

Komposition via Custom Elements

Seite zu Fragment: Attribute Fragment zu Seite: Events (Bubbling) Fragment zu Fragment: Events (Broadcast) Kommunikation zwischen Micro Frontends props down, events up Standard DOM anstatt seLbStGebAuTEr Js APis Seite zu Seite: URL

t_green t_green Kommunikation Beispiel: Seite zu Fragment Seite aktualisiert sku-Attribut der Fragmente

Seitenübergänge zwischen SPAs hard soft soft SPA SPA Shared Application Shell (Meta Framework) soft soft soft SPA SPA Verlinkte Single Page Apps Unified Single Page App

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 Piral https://piral.io Ara https://github.com/ara-framework puzzle.js https://github.com/puzzle-js https://github.com/SAP/luigi Luigi

4.Wichtige andere Dinge an die man auch noch denken muss

wie tief ist dein team?

Wie tief reicht ein vertikales Team? Frontend Backend Operations Data Science Experten & Business Nur Frontend ✔ Skalierung ✔ Technologische Freiheit Full-Stack Team ✔ Schnellere Entwicklung ✔ Weniger Warten Komplett Autonom ✔ Erprobung von Ideen ✔ Schnelle Reaktion auf Markt

konsistentes design

gemeinsame Pattern Library design design dev dev dev ux

1 66 $ Runtime Integration aka Bootstrap Model Versioned Package Pattern Library Product Team Product Team Product Team CSS & JS production 1 66 $ Pattern Library Product Team Product Team Product Team v2.0 v2.1 v2.1 v2.1 v2.0 JS CSS Template HTML JS CSS HTML 1 66 $ Runtime Integration aka Bootstrap Model Versioned Package Pattern Library Product Team Product Team Product Team CSS & JS production 1 66 $ Pattern Library Product Team Product Team Product Team v2.0 v2.1 v2.1 v2.1 v2.0 JS CSS Template HTML JS CSS HTML zur Laufzeit Integration als versioniertes Paket

Leseempfehlung https://medium.com/@nathanacurtis Artikelserie zu Design Systems von Nathan Curtis

Podcast Empfehlung https://uiengineering.de/

web performance

Performance Kultur erst messen dann optimieren Welches Team ist verantwortlich? gemeinsame Metriken definieren

Wähle deine Waffen mit Bedacht! große Framework Runtime hyperapp k(l)eine Runtime

Universal Rendering weitere emen … Testen & Qualität Entwicklung & Debugging Teams & Kultur Gemeinsame Infrastruktur? Ausliefern statischer Assets Legacy & Migration

Ich schreibe ein Buch … jetzt verfügbar in MEAP Manning Early Access Program 40% Rabatt mit Code ctwmaster20 auf alle Bücher bei manning.com M A N N I N G Michael Geers

Abhängigkeiten machen langsam

Danke fürs Zuhören Michael Geers / @naltatis neuland Büro für Informatik, Bremen micro-frontends.org

Flower Origami Faris Mohammed https://unsplash.com/photos/z0UfETjRl0g High-rise Building Tomas Robertson https://unsplash.com/photos/DUwuJaKE3FI Containers Frank Mckenna https://unsplash.com/photos/tjX_sniNzgQ Gray Tiles Osman Rana https://unsplash.com/photos/JcSsu-NF3qo Buildings Juhasz Imre https://www.pexels.com/photo/apartment-architecture-buildings- business-425047/ Action Bicycling Roman Pohorecki https://www.pexels.com/photo/action-bicycling-bike-biking-287398/ People Icons freak https://www.flaticon.com/family/special/lineal-color The Tool Guy Tirachard Kumtanom https://unsplash.com/photos/UuW4psOb388 Wooden Counter David Siglin https://www.pexels.com/photo/blur-blurry-bokeh-close-up-347139/ Woodshop Igor Ovsyannykov https://unsplash.com/photos/iXV0i4Wo4yc Traffic Lights Harshal Desai https://unsplash.com/photos/0hCIrw8dVfE Scissors Matt Artz https://unsplash.com/photos/SmocKx2oDZc Flinke Flasche (ich) HP C7000 BladeSystem pchow98 https://flic.kr/p/7AVF23 Close up Susanne Nilsson https://flic.kr/p/nppBcE Lego Benny Cheezburger http://gph.is/1BCRCKh Browser Logos Cătălin Mariș https://github.com/alrra/browser-logos Rotary Telephone Mike Meyers https://unsplash.com/photos/-haAxbjiHds Schuhbänder (ich) Tractors Manufactum https://www.manufactum.com/tin-toys-c193667/ Bildquellen mit Micro Frontends gebaut