Vue.js und Microservices für myHermes

Java User Group Hamburg 2017-04-25
Kirsten Schneider, Jan Ciriack, Stephan Stapel

Warum muss es eigentlich immer Angular2 oder React sein? Vue als leichtgewichtige Alternative bietet einen einfacheren Einstieg als die populären Konkurrenten. Wir haben uns für VueJS in der Neuentwicklung unserer Kundenplattform myhermes.de als primäres MVVM-Framework entschieden nachdem wir die Frameworks miteinander verglichen haben. Die Kundenplattform selbst basiert auf dem Einsatz von MicroServices. Neben dem VueJS-Framework selbst – und den Gründen für die Auswahl – wollen wir die Integration mit unserem CMS vorstellen und auf die Besonderheiten des MicroService-Kontextes eingehen. Das CMS nutzen wir, um eine möglichst einfache Konfigurierbarkeit des Systems zur Laufzeit zu erreichen. Welche Herausforderungen sich aus diesem Zusammenspiel ergeben und wie das Team damit umgeht ist Gegenstand des Vortrags.

Transcript

1. Vue.js und µServices für myHermes Stephan Stapel, Kirsten Schneider, Jan Ciriack Hermes Germany GmbH Hamburg, 25.04.2017
2. Inhalt 01 Willkommen bei Hermes 02 Der Weg zu Vue.js & µServices 03 Vue.js & µServices heute 04 Ausblick Fragen gerne jederzeit zwischendurch.
3. Der Weg nach vorne für Hermes: Alles Commodity? Ort, Datum 01 Willkommen bei Hermes Germany
4. 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
5. 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
6. Grundprinzipien für die Neuentwicklung: • Kürzere Entwicklungszyklen • Intuitive Nutzbarkeit • Bereit für Wachstum des Geschäfts myHermes.de 6
7. 02 Der Weg zu Vue.js & µServices
8. 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
9. 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
10. Typische Seite 10 dynamischer Content dynamischer Content statischer Content statischer Content Footer Header
11. Voraussetzungen - Layout 11 • UI Komponenten und Module im Pattern Lab bereitgestellt • Es existiert ein Prototyp auf Basis von Twitter Bootstrap und JQuery
12. Voraussetzungen – CMS Aufgaben 12 CMS FirstSpirit
13. 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
14. 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
15. 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
16. 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
17. Javascript Frameworks – Github stars 17 Quelle: https://risingstars2016.js.org/#framework
18. 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
19. 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
20. 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
21. 03 Vue.js & µServices heute
22. 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
23. 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/
24. 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
25. Vue.js - Sendungsverfolgung 25 Die statische Ergebnisseite
26. Vue.js – Sendungsverfolgung Integration in die Ergebnisseite
27. 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
28. Vue.js - Sendungsverfolgung 28 Das Ergebnisfragment setzt sich aus mehreren Teilbereichen zusammen.
29. Vue.js – Sendungsverfolgung Verzeichnisstruktur und JavaScript der Suchergebnis- Komponente
30. Vue.js – Sendungsverfolgung Template der Suchergebnis- Komponente:
31. Vue.js – Sendungsverfolgung Template der Suchformular- Komponente
32. Vue.js – Sendungsverfolgung JavaScript der Suchformular-Komponente
33. Vue.js Bauen der Artefakte index.js template.html third-parties + dependencies tracking.js webpack frontend-maven-plugin mvn tracking.jar java
34. 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
35. Content Management System • Produkt: FirstSpirit • mächtiges System • Ziel: Hohe Flexibilität des Redakteurs
36. Der Weg nach vorne für Hermes: Alles Commodity? Ort, Datum 04 Bewertung und Ausblick
37. 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“
38. Bewertung und Ausblick • Schrittweise Migration eingeleitet • Continuous Delivery im Blick • Immer in Bewegung
39. Vielen Dank!