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
   

   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