Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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.

Michael Geers

March 02, 2020
Tweet

More Decks by Michael Geers

Other Decks in Programming

Transcript

  1. 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
  2. Was ist das? Wieso macht man das? Wie geht das?

    Die Agenda Wichtige andere Dinge an die man auch noch denken muss …
  3. 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
  4. 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)
  5. 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
  6. Team Mission „Hilft beim Entdecken passender Produkte.“ „Unterstützt bei der

    Kaufentscheidung.“ „Führt den Kunden zum Bestellabschluss.“ Team Entdecken Team Entscheiden Team Kaufen
  7. 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
  8. 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
  9. 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 ⏳
  10. 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
  11. 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
  12. 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, …
  13. 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
  14. Komposition mit iframes O RLY? - schlecht für SEO -

    schlechte Performance - schränkt Layout ein - keine Barrierefreiheit Nachteile - Starke Isolation - Einfach & funktioniert Vorteile
  15. <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
  16. 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 * * *
  17. class KaufenBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini

    basket ...'; } } customElements.define('kaufen-basket', KaufenBasket); Custom Elements
  18. 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
  19. Custom Elements Spec v1 native Unterstützung in allen aktuellen Browsern

    Polyfill für alte Browser verfügbar ✓ Browser Support
  20. 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
  21. <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
  22. 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
  23. 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
  24. 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
  25. 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
  26. Universal Rendering weitere emen … Testen & Qualität Entwicklung &

    Debugging Teams & Kultur Gemeinsame Infrastruktur? Ausliefern statischer Assets Legacy & Migration
  27. 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
  28. 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