React bei dm-drogerie markt

React Meetup #1, React Karlsruhe
https://www.meetup.com/de-DE/react_ka/

erdal.demirtas@cgi.com

Transcript

1. 20. November 2017 Erdal Demirtas React bei dm-drogerie markt
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
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
4. dm-drogerie markt 20. November 2017 React bei dm-drogerie markt 4
5. dm.de 20. November 2017 React bei dm-drogerie markt 5
6. dm.de Produktorganisation 20. November 2017 React bei dm-drogerie markt 6 ► Homepage ► Produktkatalog ► Kundenkonto ► Warenkorb & Checkout ► Online-Marketing
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
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“
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
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
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.
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
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.
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
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.
16. Paradigmenwechsel 20. November 2017 React bei dm-drogerie markt 16 https://tech.io/playgrounds/9923/the-state-of-css-specificity-part-2
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
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
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
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/
21. Build, Release & Deployment Flow 20. November 2017 React bei dm-drogerie markt 21 https://blog.docker.com/2016/04/cicd-with-docker-cloud/
22. Demo 20. November 2017 React bei dm-drogerie markt 22
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
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
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.
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
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
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
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
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
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
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
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
34. 20. November 2017 React bei dm-drogerie markt 34
35. Vielen Dank! Erdal Demirtas, CGI erdal.demirtas@cgi.com 20. November 2017 React bei dm-drogerie markt 35 „React is a game changer“