Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Micro Frontends
    Mastering Microservices ● Heise Onlinekonferenz ● März 2020
    Oberflächen schneiden
    & kleben
    Michael Geers

    View Slide

  2. Monolithen
    zerlegen

    View Slide

  3. in Microservices

    View Slide

  4. Der Frontend
    Monolith wird präsentiert von

    View Slide

  5. unabhängige
    Micro Frontends

    View Slide

  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

    View Slide

  7. Was ist das?
    Wieso macht man das?
    Wie geht das?
    Die Agenda



    Wichtige andere Dinge an die
    man auch noch denken muss …

    View Slide

  8. 1.Was sind Micro Frontends?

    View Slide

  9. kurze Rückblende ….

    View Slide

  10. Der Monolith
    Backend Frontend
    Zeitalter des
    Fullstack Entwicklers

    View Slide

  11. Backend Frontend
    Backend
    Frontend bye bye
    Fullstack

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  18. Unsere Erfahrungen
    mit Micro Frontends

    View Slide

  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

    View Slide

  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

    View Slide

  21. Wer macht das noch?
    … und viele mehr.

    View Slide

  22. 2.Wieso macht man das?

    View Slide

  23. schnellere Entwicklung

    View Slide

  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

    View Slide

  25. Kundenfokus
    direktes Feedback
    keine reinen API Teams

    View Slide

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

    View Slide

  27. Frontend Renovierung
    ohne alles neu zu schreiben

    View Slide

  28. 2005 2010 2015
    ®
    Polymer
    hyperapp
    ?
    Frontend Tools sind schnelllebig

    View Slide

  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

    View Slide

  30. 3.Wie macht man das?

    View Slide

  31. Zwei zentrale Konzepte:
    Seiten & Fragmente

    View Slide

  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

    View Slide

  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, …

    View Slide

  34. schneiden

    View Slide

  35. Teams sind entkoppelt
    Integration findet zur Laufzeit statt

    View Slide

  36. & kleben

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  41. client
    side
    server
    side
    rendering

    View Slide

  42. Team
    Entscheiden
    Team
    Entdecken
    Team Kaufen

    View Slide


  43. 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

    View Slide

  44. Team
    Entscheiden
    Team
    Entdecken
    Team Kaufen
    Interaktivität

    View Slide

  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
    *
    *
    *

    View Slide

  46. Web Components
    Custom Elements

    https://developers.google.com/web/fundamentals/getting-started/primers/customelements

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide







  50. Komposition via
    Custom Elements

    View Slide

  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

    View Slide







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

    View Slide

  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

    View Slide

  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

    View Slide

  55. 4.Wichtige andere Dinge

    an die man auch noch denken muss

    View Slide

  56. wie tief ist
    dein team?




    View Slide





  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

    View Slide

  58. konsistentes
    design

    View Slide

  59. gemeinsame
    Pattern
    Library




    design design dev dev
    dev ux

    View Slide

  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

    View Slide

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

    View Slide

  62. Podcast
    Empfehlung
    https://uiengineering.de/

    View Slide


  63. web performance

    View Slide

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

    View Slide

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

    View Slide

  66. Universal
    Rendering

    weitere emen …
    Testen &
    Qualität

    Entwicklung &
    Debugging

    Teams &
    Kultur


    Gemeinsame
    Infrastruktur?

    Ausliefern
    statischer Assets

    Legacy &
    Migration

    View Slide

  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

    View Slide

  68. Abhängigkeiten machen langsam

    View Slide

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

    View Slide

  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

    View Slide