Micro Frontends - Oberflächen schneiden & kleben

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.

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

March 02, 2020
Tweet

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