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

React bei dm-drogerie markt

React bei dm-drogerie markt

Erdal Demirtaş

November 21, 2017
Tweet

Other Decks in Programming

Transcript

  1. 20. November 2017
    Erdal Demirtas
    React bei dm-drogerie markt

    View full-size slide

  2. Agenda
    20. November 2017
    React bei dm-drogerie markt
    2
    ► Einführung
    ► Ausgangsbasis und Historie
    ► Ziele
    ► Auswahl
    ► Neue Frontend Architektur
    ► Ergebnis
    ► Zukunft
    ► Q&A

    View full-size slide

  3. dm-drogerie markt
    20. November 2017
    React bei dm-drogerie markt
    3
    dm-drogerie markt ist
    ein deutscher Drogeriekonzern
    Mit 3364 Filialen und 59.046 Mitarbeitern,
    ist dm der größte Drogeriekonzern in Europa
    Gründung 1973
    Sitz Karlsruhe

    View full-size slide

  4. dm-drogerie markt
    20. November 2017
    React bei dm-drogerie markt
    4

    View full-size slide

  5. dm.de
    20. November 2017
    React bei dm-drogerie markt
    5

    View full-size slide

  6. dm.de Produktorganisation
    20. November 2017
    React bei dm-drogerie markt
    6
    ► Homepage
    ► Produktkatalog
    ► Kundenkonto
    ► Warenkorb & Checkout
    ► Online-Marketing

    View full-size slide

  7. Monolithische versus Microservices-Architektur
    20. November 2017
    React bei dm-drogerie markt
    7
    https://gotocon.com/cph-2016/presentations/show_talk.jsp?oid=7776
    Monolith Microservices

    View full-size slide

  8. dm.de Architektur
    20. November 2017
    React bei dm-drogerie markt
    8
    Modularisierung des Frontends ist eine konsequente Weiterentwicklung
    der Microservices-Architektur
    Monolithische Architektur
    CMS als Platform mit
    ShopSystem
    Microservices Architektur
    Spring mit Netflix OSS
    Frontend: Monolith
    Backend: Monolith
    Agile
    Frontend: Monolith
    Backend: Microservices
    Agile mit „cross-functional teams“

    View full-size slide

  9. Timeline der Javascript UI-Technologien
    20. November 2017
    React bei dm-drogerie markt
    9
    dm.de, 2015: plain JavaScript (ES3 + ES5), jQuery, jQuery UI, Backbone.js
    https://twitter.com/modernwebui/status/633649037858607105

    View full-size slide

  10. Nachteile der klassischen Architektur
    20. November 2017
    React bei dm-drogerie markt
    10
    ► keine Standard-API
    ► Wartbarkeit wird immer schwieriger
    ► Performance ist teilweise problematisch
    ► nicht immer hohe Qualität
    ► jQuery „spice“ on browser
    ► „Composition is a Gamble“
    ► kein Server-seitiges Rendering der UI-Komponenten
    ► Technologiebruch zwischen Front- und Backend
    ► Wachsende, monolithische Architektur
    ► Fehlende „Developer Happiness“ L

    View full-size slide

  11. Ziele
    20. November 2017
    React bei dm-drogerie markt
    11
    ► Technologie-Auswahl für den neuen dm.de Frontend-Stack
    ► Die Wartbarkeit des bestehenden Codes zu erhöhen.
    ► Neue Anforderungen schneller und robuster umsetzen zu
    können.
    ► Das Framework soll dabei in die bestehende Applikation
    integriert werden können.
    ► Die neue Lösung soll eine einfache und günstige Skalierbarkeit
    ermöglichen.

    View full-size slide

  12. Auswahlkriterien
    20. November 2017
    React bei dm-drogerie markt
    12
    ► Wartbarkeit
    ► Flexibilität
    ► Erweiterbarkeit
    ► Skalierbarkeit
    ► Performance
    ► Initial Pageload-Time
    ► Client-Applikation
    ► Request Anzahl & Traffic
    ► Mobile
    ► Testbarkeit
    ► Effizienz
    ► Serverseitiges Rendering
    ► Applikationsstruktur
    ► Modularisierung
    ► Komponentenweise Entwicklung
    ► Integrierbarkeit mit 3rd Party Libraries
    ► Integrierbarkeit mit bestehenden Code
    ► Ausgereiftheit
    ► Zukunftsfähigkeit
    ► Stabilität
    ► Community
    ► Open Source Software
    ► Dokumentation
    ► Tools
    ► COOLness
    ► Developer Happiness

    View full-size slide

  13. Vorauswahl der Frameworks
    20. November 2017
    React bei dm-drogerie markt
    13
    Der Frontend-Stack soll nicht "opinionated" sein, sodass die Flexibilität nicht eingeschränkt oder
    die Integrierbarkeit erschwert wird.
    Server-seitiges Rendering soll weiterhin möglich sein, aber auf dem Server und Client soll die
    gleiche View-Technologie verwendet werden.
    Die neuen Technologien sollen die Auswahlkriterien erfüllen.
    ► Backbone.js
    ► React.js
    ► Angular.js
    ► Ember.js
    Angular.js und Ember.js sind aufgrund ihrer monolithischen Struktur und der Ausrichtung auf
    Single-Page-Applikationen nicht für die Integration in die “dm.de“ geeignet. Diese sind besser
    für „Grüne-Wiese“-Lösungen geeignet.

    View full-size slide

  14. Vorauswahl der Frameworks
    20. November 2017
    React bei dm-drogerie markt
    14
    ► Backbone.js basiert: Rendr (airbnb), LazoJs (walmartlabs), o.ä.
    ► React.js + Flux
    Eine Backbone-basierte Lösung wurde für die zukünftige Architektur aus
    folgenden Gründen ausgeschlossen:
    ► Erfüllt nicht die Anforderung an Komponenten-basierte Entwicklung
    ► Unbedingte Notwendigkeit von Node.js als Backend-Komponente
    ► Recherche zeigt, dass viele Firmen von Backbone zu anderen
    Technologien migrieren

    View full-size slide

  15. Gewinner für „Proof-of-Concept“
    20. November 2017
    React bei dm-drogerie markt
    15
    React ist eine JavaScript Library von Facebook, um UI-Komponente zu entwickeln.
    A declarative, efficient, and flexible JavaScript library for building user interfaces.
    Flux ist eine Architektur, um React strukturiert in Anwendungen einzusetzen.
    Redux is a predictable state container for JavaScript apps.

    View full-size slide

  16. Paradigmenwechsel
    20. November 2017
    React bei dm-drogerie markt
    16
    https://tech.io/playgrounds/9923/the-state-of-css-specificity-part-2

    View full-size slide

  17. Feontens
    Neue Frontend Architektur
    20. November 2017
    React bei dm-drogerie markt
    17
    UI Layer
    React
    HTTPS
    Front-End
    Back-End
    Browser
    Coremedia CAE Server
    UI Layer
    Business Logic
    JSP

    View full-size slide

  18. Feontens
    Neue Frontend Architektur - Aktuell
    20. November 2017
    React bei dm-drogerie markt
    18
    UI Layer
    React
    Coremedia CAE Server
    UI Layer
    Business Logic
    JSP
    Microservice
    ProductData
    Service
    ShoppingList
    Service
    Cart
    Service
    Headless CMS
    ContentView
    Service
    Microservice
    HTTPS Ajax Ajax
    static ui
    resources
    server side
    rendering
    Rest
    Front-End
    Back-End
    Browser
    ProductView
    Service

    View full-size slide

  19. Feontens
    Neue Frontend Architektur - Zukunft
    20. November 2017
    React bei dm-drogerie markt
    19
    UI Layer
    React
    ProductData
    Service
    ShoppingList
    Service
    Cart
    Service
    Headless CMS
    ContentView
    Service
    HTTPS
    Ajax Ajax
    Rest
    Front-End
    Back-End
    Browser
    ProductView
    Service
    Business Logic
    Coremedia CAE Server
    SearchView
    Service
    ShopView
    Service
    UI
    Composer
    static ui
    resources

    View full-size slide

  20. Continuous Delivery Pipeline mit Docker
    20. November 2017
    React bei dm-drogerie markt
    20
    https://blog.docker.com/2016/04/cicd-with-docker-cloud/

    View full-size slide

  21. Build, Release & Deployment Flow
    20. November 2017
    React bei dm-drogerie markt
    21
    https://blog.docker.com/2016/04/cicd-with-docker-cloud/

    View full-size slide

  22. Demo
    20. November 2017
    React bei dm-drogerie markt
    22

    View full-size slide

  23. Ergebnis: Auswahlkriterien
    20. November 2017
    React bei dm-drogerie markt
    23
    ► Wartbarkeit
    ► Flexibilität
    ► Erweiterbarkeit
    ► Skalierbarkeit
    ► Performance
    ► Initial Pageload-Time
    ► Client-Applikation
    ► Request Anzahl & Traffic
    ► Mobile
    ► Testbarkeit
    ► Effizienz
    ► Serverseitiges Rendering
    ► Applikationsstruktur
    ► Modularisierung
    ► Komponentenweise Entwicklung
    ► Integrierbarkeit mit 3rd Party Libraries
    ► Integrierbarkeit mit bestehenden Code
    ► Ausgereiftheit
    ► Zukunftsfähigkeit
    ► Stabilität
    ► Community
    ► Open Source Software
    ► Dokumentation
    ► Tools
    ► COOLness
    ► Developer Happiness J

    View full-size slide

  24. Ergebnis: weitere Vorteile von React
    20. November 2017
    React bei dm-drogerie markt
    24
    ► Komponentenbasierte Entwicklung
    („loose coupling“, „high cohesion“)
    ► Einfach zum Starten
    ► Geschwindigkeit (Virtual DOM)
    ► Einfache und günstige Skalierbarkeit
    ► Erprobt von großen Websites
    (Facebook, Netflix, Uber, Zalando,
    Walmart, Airbnb, NY Times, Khan
    Academy, WhatsApp, Slack, Nike,
    YahooMail, PayPal, DropBox ...)
    ► ES 2016, ...
    ► Kleinere Codebasis
    ► Deklarative & Funktional
    ► Schritt-für-Schritt Migration ist
    möglich
    ► Happy Developers J

    View full-size slide

  25. Ergebnis: weitere Vorteile von React
    20. November 2017
    React bei dm-drogerie markt
    25
    Neue Produktübersichtsseiten (technologisch)
    alt: bei jedem Klick muss die PÜS von dem CMS-
    Server gerendert werden
    neu: clientseitiges Rendering mit der neuen
    Frontend-Technologie
    (react + microservice)
    Entlastung der Server
    sowohl die Anzahl der Requests für PÜS-Seiten
    sind um ca. 20-30% zurückgegangen,
    als auch die Last auf den Servern hat sich um
    ca. 20-30% reduziert
    UX-Verbesserung
    Weiterhin ist es für die Kunden um einiges
    performanter geworden, da jeder Klick auf die
    Filter in einer PÜS-Seite nur noch wenige KBs
    neu nachlädt, und der Browser den Inhalt direkt
    sehr schnell neu rendert, ohne wieder die
    komplette Seite neu laden zu müssen.

    View full-size slide

  26. Befürchtungen
    20. November 2017
    React bei dm-drogerie markt
    26
    ► API kann sich noch ändern
    ► Server-Side Rendering kann abhängig von der Server-Technologie
    langsam sein (relevanz sehr gering wegen Skalierbarkeit und Varnish-
    Cache)
    ► Vermischung von HTML/CSS/JavaScript kann gewöhnungsbedürftig sein
    ► Keine Erfahrung bezüglich des Upgradepfads
    ► React ist nur eine View-Technologie, kein MV*-Framework
    ► Sehr starke, aber auch noch junge Community, möglicherweise
    existieren nicht für alle Fälle fertige Lösungen

    View full-size slide

  27. Befürchtungen
    20. November 2017
    React bei dm-drogerie markt
    27
    ► API kann sich noch ändern
    ► Server-Side Rendering kann abhängig von der Server-Technologie
    langsam sein (relevanz sehr gering wegen Skalierbarkeit und Varnish-
    Cache)
    ► Vermischung von HTML/CSS/JavaScript kann gewöhnungsbedürftig sein
    ► Keine Erfahrung bezüglich des Upgradepfads
    ► React ist nur eine View-Technologie, kein MV*-Framework
    ► Sehr starke, aber auch noch junge Community, möglicherweise
    existieren nicht für alle Fälle fertige Lösungen

    View full-size slide

  28. Herausforderungen / Stolpersteine
    20. November 2017
    React bei dm-drogerie markt
    28
    ► Bereitschaft und Begeisterung für eine zukunftsfähige Frontend-
    Architektur.
    ► Ein verstärkter Einsatz von React und JavaScript als Technologie
    fordert die entsprechenden Skills bei den Entwicklern.
    ► Aktuelle Frontendtechnologien setzen alle auf npm bzw. npm-
    basierte Libraries. Der Einsatz von npm in den Firmennetzwerken ist
    derzeit nicht, bzw. nur sehr schwer, möglich wegen Netzwerk- und
    Proxy- und Entwickler-Hardware-Einschränkungen.
    ► Koordination/Abstimmung der Entwicklung mit 2-3 Entwickler (ein
    Team) mit einem Repository vs. 10-15 Entwickler (mehrere Teams) mit
    mehreren Repositories

    View full-size slide

  29. Zusammenfassung
    20. November 2017
    React bei dm-drogerie markt
    29
    Persistence
    ORM
    Business Logic
    View Logic
    UI (dynamic)
    HTML
    CSS
    JS
    Ajax calls
    jQuery, HTML, CSS
    JSP
    Java

    View full-size slide

  30. Zusammenfassung
    20. November 2017
    React bei dm-drogerie markt
    30
    Persistence
    ORM
    Business Logic
    REST API
    View Logic
    JSON
    Ajax calls
    UI Components React
    React
    Java
    Java

    View full-size slide

  31. Zusammenfassung
    20. November 2017
    React bei dm-drogerie markt
    31
    Persistence
    ORM
    Business Logic
    REST API
    Store
    JSON
    Ajax calls
    View Logic
    UI Components React
    React
    Redux
    Java, JavaScript
    Java

    View full-size slide

  32. Zukunft
    20. November 2017
    React bei dm-drogerie markt
    32
    ORM
    Business Logic
    Single Endpoint API
    Store
    JSON
    View Logic
    UI Components
    OGM (Relay/Apollo)
    Ajax query
    React
    React
    Redux
    GraphQL client
    GraphQL
    Java, JavaScript

    View full-size slide

  33. Zukunft
    20. November 2017
    React bei dm-drogerie markt
    33
    ► UI-Composer: viel bessere Skalierung
    ► React Native
    ► Für die zukünftigen iOS und Android Apps wird React Native erprobt.
    ► Aktuelles Konzept: Native App mit React Native Komponenten
    ► GraphQL: Erprobung auf einem View-Service

    View full-size slide

  34. 20. November 2017
    React bei dm-drogerie markt
    34

    View full-size slide

  35. Vielen Dank!
    Erdal Demirtas, CGI
    [email protected]
    20. November 2017
    React bei dm-drogerie markt
    35
    „React is a game changer“

    View full-size slide