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. Agenda 20. November 2017 React bei dm-drogerie markt 2 ►

    Einführung ► Ausgangsbasis und Historie ► Ziele ► Auswahl ► Neue Frontend Architektur ► Ergebnis ► Zukunft ► Q&A
  2. 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
  3. dm.de Produktorganisation 20. November 2017 React bei dm-drogerie markt 6

    ► Homepage ► Produktkatalog ► Kundenkonto ► Warenkorb & Checkout ► Online-Marketing
  4. 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
  5. 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“
  6. 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
  7. 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
  8. 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.
  9. 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
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. 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
  15. 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
  16. Continuous Delivery Pipeline mit Docker 20. November 2017 React bei

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

    dm-drogerie markt 21 https://blog.docker.com/2016/04/cicd-with-docker-cloud/
  18. 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
  19. 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
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. Vielen Dank! Erdal Demirtas, CGI [email protected] 20. November 2017 React

    bei dm-drogerie markt 35 „React is a game changer“