Vue.js und µServices für myHermes Stephan Stapel, Kirsten Schneider, Jan Ciriack Hermes Germany GmbH Hamburg, 25.04.2017 

Inhalt 01 Willkommen bei Hermes 02 Der Weg zu Vue.js & µServices 03 Vue.js & µServices heute 04 Ausblick Fragen gerne jederzeit zwischendurch. 

Der Weg nach vorne für Hermes: Alles Commodity? Ort, Datum 01 Willkommen bei Hermes Germany 

Willkommen bei Hermes Germany! Wer sind wir? • Gegründet 1972 • Wir sind Teil des Otto-Konzerns • Eine von mehreren Hermes-Gesellschaften in Europa • Wir stellen derzeit 350 Millionen Pakete pro Jahr zu • Hermes Germany ist ein Unternehmen im Wandel – Ausrichtung auf digitale Geschäftsmodelle 4 

myHermes.de • Aktuelle Fassung basiert auf IBM WebSphere Portal Server • Zahlen: • 15 Millionen Sendungen/ Jahr • 300 Millionen Seitenaufrufe/ Jahr • Problem: Keine Flexibilität: • Für die Weiterentwicklung • In der Gestaltung der Oberfläche 5 

Grundprinzipien für die Neuentwicklung: • Kürzere Entwicklungszyklen • Intuitive Nutzbarkeit • Bereit für Wachstum des Geschäfts myHermes.de 6 

02 Der Weg zu Vue.js & µServices 

Ziele • Schnelle, überschaubare Auslieferungen von dynamischen und statischen Inhalten • Legacy-System Schritt für Schritt ablösen • Skalierung einzelner Komponenten • Nachhaltige Entwicklung, die Spaß macht 8 

Verwendete Technologien 9 Backend Services Spring Boot Logging ELK Monitoring Spring-Boot-Admin Prometheus/Grafana CMS FirstSpirit Deployment Jenkins Resilience Hystrix UI ? Infrastruktur Docker Konfiguration Spring Cloud Config 

Typische Seite 10 dynamischer Content dynamischer Content statischer Content statischer Content Footer Header 

Voraussetzungen - Layout 11 • UI Komponenten und Module im Pattern Lab bereitgestellt • Es existiert ein Prototyp auf Basis von Twitter Bootstrap und JQuery 

Voraussetzungen – CMS Aufgaben 12 CMS FirstSpirit 

Voraussetzungen – CMS Funktionsweise 13 Die Redakteure legen auf Basis der myHermes Vorlagen Seiten und Web Content an Content Repository Deployment CMS Content v1.0 CSS Images JS HTML HTML CMS - FirstSpirit Content Creator Site Architect myHermes Seitenvorlagen Absatzvorlagen CMS Content v2.0 HTML CSS Images JS HTML 

Erster Ansatz: serverseitiges Rendern 14 µService µService CMS CMS CMS CMS • statische Inhalte und das Seitengerüst werden durch das CMS generiert • ein µService ist für eine oder mehrere Seiten zuständig • ein µService kann auch HTML- Fragmente ausliefern • dynamische Inhalte werden über Thymeleaf Fragmente/Includes oder Server-Side- Includes eingebunden 

Docker Erster Ansatz - Übersicht CMS Content Repository Nginx-Container Reverse Proxy Nginx-Container CMS Content Spring Boot-Container TrackingService Spring Boot-Container UserService 2 4 1 3 15 CMS Content v1.0 CMS Content v2.0 

Erster Ansatz – Fazit Vorteile Nachteile • bekannte Technologie, zunächst schneller Fortschritt • µService liefert HTML-Seite aus • durch Thymeleaf Fragmente und SSI keine Vorschau im CMS • Jeder µService hat zur Laufzeit Abhängigkeit zum CMS Content • Namenskonventionen zwischen µService und CMS • JavaScript Code komplex und schwer zu testen • Konfigurierbarkeit eingeschränkt Lösung: clientseitiges Rendern der dynamischen Inhalte 16 

Javascript Frameworks – Github stars 17 Quelle: https://risingstars2016.js.org/#framework 

Warum Vue.js? • sehr leicht erlernbar • gute Dokumentation • leichtgewichtig • HTML-basierte Templates passen gut zu den Vorgaben im Pattern Lab • UI-Komponenten können einfach ins CMS eingebunden werden sehr gute Erfahrung am "Forschertag" Umsetzung der Kundenregistrierung an einem Tag 18 

Aktueller Ansatz 19 Vue.js Vue.js CMS CMS CMS CMS • Statische Inhalte und das Seitengerüst werden durch das CMS generiert • Dynamische Inhalte werden clientseitig über Vue.js Komponenten gerendert • ein µService beinhaltet Vue.js Komponenten und REST-Interface 

Docker Zweiter Ansatz - Übersicht Nginx-Container Reverse Proxy Nginx-Container CMS Content Spring Boot-Container tracking.js TrackingService Spring Boot-Container user.js UserService 2 3 3 1 20 CMS Content Repository CMS Content v1.0 CMS Content v2.0 3 

03 Vue.js & µServices heute 

Docker Heute - Überblick Nginx-Container Reverse Proxy Trackingservice UI REST tracking.js index.js template.html tracking.json Nginx-Container CMS Content Userservice UI REST user.js index.js template.html user.json index.html 

Vue.js • Clientseitiges JavaScript-Framework zum Erstellen von interaktiven Webanwendungen • Erstes Release Dez. 2013, v1.0.0 in 2015, aktuell v2.2.6 • Konzepte:  Deklaritives Rendern  Reactivity  Komponenten  Data Binding • Modulare Struktur • Umsetzung des MVVM-Patterns • Beispiele: https://vuejs.org/v2/guide/ 

Docker Heute - Überblick Nginx-Container Reverse Proxy Trackingservice UI REST tracking.js index.js template.html tracking.json Nginx-Container CMS Content Userservice UI REST user.js index.js template.html user.json index.html 

Vue.js - Sendungsverfolgung 25 Die statische Ergebnisseite 

Vue.js – Sendungsverfolgung Integration in die Ergebnisseite 

Docker Vue.js - Überblick Nginx-Container Reverse Proxy Trackingservice UI REST tracking.js index.js template.html tracking.json Nginx-Container CMS Content Userservice UI REST user.js index.js template.html user.json index.html 

Vue.js - Sendungsverfolgung 28 Das Ergebnisfragment setzt sich aus mehreren Teilbereichen zusammen. 

Vue.js – Sendungsverfolgung Verzeichnisstruktur und JavaScript der Suchergebnis- Komponente 

Vue.js – Sendungsverfolgung Template der Suchergebnis- Komponente: 

Vue.js – Sendungsverfolgung Template der Suchformular- Komponente 

Vue.js – Sendungsverfolgung JavaScript der Suchformular-Komponente 

Vue.js Bauen der Artefakte index.js template.html third-parties + dependencies tracking.js webpack frontend-maven-plugin mvn tracking.jar java 

Docker Heute - Überblick Nginx-Container Reverse Proxy Trackingservice UI REST tracking.js index.js template.html tracking.json Nginx-Container CMS Content Userservice UI REST user.js index.js template.html user.json index.html CMS 

Content Management System • Produkt: FirstSpirit • mächtiges System • Ziel: Hohe Flexibilität des Redakteurs 

Der Weg nach vorne für Hermes: Alles Commodity? Ort, Datum 04 Bewertung und Ausblick 

Bewertung und Ausblick • Clientseitige Integration sinnvoll • Vue.js gute Wahl • Integrationsansatz auf Code und Daten funktioniert bis jetzt gut, aber • Technologische Abhängigkeit zwischen Services • Release Management zwischen Services • Hybridlösung? • Vue SSR • Single Page Application vs. Multipage Page Application • CMS Integration? • Wie geht Seitensteuerung? (vue-router) • Wie geht SEO? • Redaktionelle Flexibilität vs. „CMS as a platform“ 

Bewertung und Ausblick • Schrittweise Migration eingeleitet • Continuous Delivery im Blick • Immer in Bewegung 

Vielen Dank!