Micro Frontends - Oberflächen schneiden & kleben

Die Online-Konferenz von Heise
https://mastering-microservices.de

Das Frontend wird in vielen Projekten als wichtige aber untrennbare Einheit gesehen. Microservices finden in der Regel nur im Backend statt. Micro Frontends zeigen einen alternativen Ansatz, bei dem auch die Benutzeroberfläche in mehrere fachlich motivierte Teile zerlegt wird.

In diesem Vortrag erfährt das Publikum, was hinter diesem Konzept steckt und welche Probleme es adressiert. Michael Geers betrachtet, wie man ein Frontend zerschneidet und wie man die Frontends mehrerer Teams wieder so zusammensetzt, dass der Endkunde es nicht bemerkt. Dabei spielen Integrationstechniken, aber auch die Themen Web Performance und Design Systems eine zentrale Rolle.

Transcript

1. Micro Frontends Mastering Microservices • Heise Onlinekonferenz • März 2020 Oberflächen schneiden & kleben Michael Geers
2. Monolithen zerlegen
3. in Microservices
4. Der Frontend Monolith wird präsentiert von
5. unabhängige Micro Frontends
6. 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
7. Was ist das? Wieso macht man das? Wie geht das? Die Agenda Wichtige andere Dinge an die man auch noch denken muss …
8. 1.Was sind Micro Frontends?
9. kurze Rückblende ….
10. Der Monolith Backend Frontend Zeitalter des Fullstack Entwicklers
11. Backend Frontend Backend Frontend bye bye Fullstack
12. 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
13. Frontend Frontend Der Monolith Front- & Backend Microservices Frontend Monolithen Backend Frontend Frontend
14. Micro Frontends Team Entdecken Team Suchen Team Entscheiden Team Kaufen Backend Frontend
15. 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)
16. 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
17. Team Mission „Hilft beim Entdecken passender Produkte.“ „Unterstützt bei der Kaufentscheidung.“ „Führt den Kunden zum Bestellabschluss.“ Team Entdecken Team Entscheiden Team Kaufen
18. Unsere Erfahrungen mit Micro Frontends
19. 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
20. 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
21. Wer macht das noch? … und viele mehr.
22. 2.Wieso macht man das?
23. schnellere Entwicklung
24. 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 ⏳
25. Kundenfokus direktes Feedback keine reinen API Teams
26. Reduzierter Scope Man kann den Überblick über das ganze System haben. ❤
27. Frontend Renovierung ohne alles neu zu schreiben
28. 2005 2010 2015 ® Polymer hyperapp ? Frontend Tools sind schnelllebig
29. 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
30. 3.Wie macht man das?
31. Zwei zentrale Konzepte: Seiten & Fragmente
32. 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
33. 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, …
34. schneiden
35. Teams sind entkoppelt Integration findet zur Laufzeit statt
36. & kleben
37. 3 Formen von Integration Komposition Seitenübergänge B A C B A A A B A C Kommunikation
38. 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
39. Komposition mit iframes O RLY? - schlecht für SEO - schlechte Performance - schränkt Layout ein - keine Barrierefreiheit Nachteile - Starke Isolation - Einfach & funktioniert Vorteile
40. Spotify web player (bis Anfang 2019) & Desktop App https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/ Komposition mit iframes
41. client side server side rendering
42. Team Entscheiden Team Entdecken Team Kaufen
43. <button> buy for 66 € </button> <em>0 items</em> <html> <em>0 items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html> Server Team Entscheiden nginx Server Team Kaufen /red-tractor <html> <!--#include virtual=“/kaufen/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/kaufen/buy“ --> </html> /kaufen/basket /kaufen/buy /red-tractor Komposition mit SSI oder ESI Server Side Includes
44. Team Entscheiden Team Entdecken Team Kaufen Interaktivität
45. 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 * * *
46. Web Components Custom Elements <kaufen-basket></kaufen-basket> https://developers.google.com/web/fundamentals/getting-started/primers/customelements
47. class KaufenBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini basket ...'; } } customElements.define('kaufen-basket', KaufenBasket); Custom Elements
48. 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
49. Custom Elements Spec v1 native Unterstützung in allen aktuellen Browsern Polyfill für alte Browser verfügbar ✓ Browser Support
50. <entdecken-reco sku="t_red"> </entdecken-reco> <kaufen-basket> </kaufen-basket> <kaufen-buy sku="t_red"> </kaufen-buy> Komposition via Custom Elements
51. 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
52. <entdecken-reco sku="t_red"> </entdecken-reco> <kaufen-basket> </kaufen-basket> <kaufen-buy sku="t_red"> </kaufen-buy> t_green t_green Kommunikation Beispiel: Seite zu Fragment Seite aktualisiert sku-Attribut der Fragmente
53. 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
54. 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
55. 4.Wichtige andere Dinge an die man auch noch denken muss
56. wie tief ist dein team?
57. 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
58. konsistentes design
59. gemeinsame Pattern Library design design dev dev dev ux
60. 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
61. Leseempfehlung https://medium.com/@nathanacurtis Artikelserie zu Design Systems von Nathan Curtis
62. Podcast Empfehlung https://uiengineering.de/
63. web performance
64. Performance Kultur erst messen dann optimieren Welches Team ist verantwortlich? gemeinsame Metriken definieren
65. Wähle deine Waffen mit Bedacht! große Framework Runtime hyperapp k(l)eine Runtime
66. Universal Rendering weitere emen … Testen & Qualität Entwicklung & Debugging Teams & Kultur Gemeinsame Infrastruktur? Ausliefern statischer Assets Legacy & Migration
67. 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
68. Abhängigkeiten machen langsam
69. Danke fürs Zuhören Michael Geers / @naltatis neuland Büro für Informatik, Bremen micro-frontends.org
70. 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