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
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“
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
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.
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 ► 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 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.
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
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
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.
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
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 ► 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
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
sakawe_ee
ikura_hamu
quramy
nakamizu
chobishiba
simas
miccheng
sorah
takahirosunaga
siroemk
veronikapj
ktombow
rasmusluckow
kastner
gurzu
varn
pauljervisheath
tamaranovitovic
letsgokoyo
palkan
michielstock
bryan
addyosmani
khoart
![Vielen Dank! Erdal Demirtas, CGI [email protected] 20. November 2017 React](https://files.speakerdeck.com/presentations/3a64fdd54cc6436c88868e66cbf7ae77/slide_34.jpg){kind=link}