Modularisierte UIs für Microservices abseits von SPAs

Besonders aufgrund des aktuellen Trends zu Microservice-Architekturen bestehen aktuelle Systeme aus mehren Services. Häufig wird das User-Interface dabei als eigener Service realisiert und separat deployt oder es wird eine Single-Page-App genutzt. In dieser Session zeige ich Ihnen das es hierfür auch andere Möglichkeiten gibt. Neben den Vor- und Nachteilen werden dabei auch konkrete Technologien, wie z.B. Edge-Side-Includes oder Transklusion betrachtet.

Transcript

1. Modularisierte UIs für Microservices abseits von SPAs BED-Con 2017 21. September 2017
2. Michael Vitz michael.vitz@innoq.com Senior Consultant @ innoQ @michaelvitz
3. @michaelvitz Webanwendungen
4. @michaelvitz Webanwendungen Backend Browser Icons von: https://icons8.com/icon/new-icons/Dusk_Wired
5. @michaelvitz Schichten & Verteilung? Browser Backend Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Daten UI Logik
6. @michaelvitz “Klassische” Webanwendungen Browser Backend Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Daten UI Logik
7. @michaelvitz Single Page Anwendungen Browser Backend Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Daten UI Logik
8. @michaelvitz UI Integration
9. @michaelvitz UI Integration Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Browser Backend SPA Klassisch
10. @michaelvitz SPA Klassisch Monolith Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Browser Backend
11. @michaelvitz SPA Klassisch Modularisiert Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Browser Backend
12. @michaelvitz Klassisch Modularisiert Icons von: https://icons8.com/icon/new-icons/Dusk_Wired Browser Backend
13. @michaelvitz Techniken
14. @michaelvitz Hyperlinks System 1 System 2
15. @michaelvitz Redirects System 1 System 2
16. @michaelvitz Transklusion
17. @michaelvitz Transklusion
18. @michaelvitz Serverseitige Transklusion > Edge Side Includes (ESI) > Server Side Includes (SSI) > Zalando Tailor > …
19. @michaelvitz Edge Side Includes <esi:include src="/shopping-cart"/> https://github.com/ewolff/SCS-ESI
20. @michaelvitz Clientseitige Transklusion > iframe > h-include > “selbst implementiert”
21. @michaelvitz “selbst implementiert” https://github.com/ewolff/SCS-jQuery $("a[data-transclude]").each(function(i, link) { $("<div />").load(link.href, function(data, status, xhr) { $(link).replaceWith(this); }); }); <a href="/shopping-cart" data-transclude> Shopping cart </a> HTML JavaScript
22. @michaelvitz Beispiel https://crimson-portal.herokuapp.com/
23. @michaelvitz Fazit
24. @michaelvitz Fazit > Links & Redirects > Transklusion > Serverseitig für Hauptinhalte > Clientseitig für Optionales
25. Michael Vitz | @michaelvitz michael.vitz@innoq.com innoQ Deutschland GmbH Krischerstr. 100 40789 Monheim am Rhein www.innoq.com Ohlauer Straße 43 10999 Berlin Ludwigstraße 180 E 63067 Offenbach Kreuzstr. 16 80331 München https://www.innoq.com/de/talks/2017/09/bedcon-2017-modulare-microservice-uis/ Danke! Fragen? Kommentare?