Static compiled Frontends

Vorgestellt: https://www.meetup.com/de-DE/Softwerkskammer-Koln/events/263477537/

E2E-Tests blinken rotgrün vor sich hin? Releases enthalten regelmäßig kritische Bugs, obwohl die CI-Pipelines grün waren? Eine Ursachenanalyse der Bugs ist schwer, da viele Teams in einem Brei herumrühren? Microfrontends waren bis jetzt nicht die Lösung?
Dann ist dieser Vortragsabend genau das Richtige für Dich!

Alwin Mark wird anhand von mehrerer (Micro)Frontendarchitekturen von großen E-Commerce Unternehmen (Otto, Zalando, Rewe Digital) zeigen, welches Problem diese gemeinsam haben und anschließend alle Probleme mit einer Zielarchitektur lösen, welche hochgradig auf moderne DevOps Prinzipien setzt.

Transcript

1. STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED STATIC COMPILED FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS FRONTENDS WARUM FRONTENDS NICHT IN MICROSERVICES WARUM FRONTENDS NICHT IN MICROSERVICES GEHÖREN GEHÖREN
2. ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ÜBER MICH ALWIN MARK ALWIN MARK 31 Jahre alt 2 Kinder eine menge Haustiere arbeitet bei Crosscan GmbH 90% remote 5. Entwickler bei REWE digital 2 Jahre dort gearbeitet
3. WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE WER KENNT DEN REWE DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK DIGITAL TALK "MICRO-FRONTENDS IM REWE ONLINE SHOP"? "MICRO-FRONTENDS IM REWE ONLINE SHOP"?
4. NILS ROEHRIG HATTE ÜBER DIE "EVOLUTION DES NILS ROEHRIG HATTE ÜBER DIE "EVOLUTION DES HEADERS" GESPROCHEN... HEADERS" GESPROCHEN... Folien gibt es hier: Folien gibt es hier: https://speakerdeck.com/drunknzombiecow/micro- https://speakerdeck.com/drunknzombiecow/micro- frontends-im-rewe-shop-evolution-eines-headers-1 frontends-im-rewe-shop-evolution-eines-headers-1
5. FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS
6. FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS Nils Roerig selber war bei der Evolution nicht dabei: Andere Zeitzeugen nichtmehr bei REWE digital Recherche auf Hörensagen Survivor Bias Ursprünglicher REWE Digital Talk zu dem Thema: Javaland 2016 UI_Composition_fuer_Microservices von Arkadiusz Czarnik und Alwin Mark Folien: https://bit.ly/2lFKyNT
7. FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS BACKGROUND BACKGROUND Kauf auf Rechnung => Katastrophe Kauf auf Rechnung => Katastrophe Header => UI Service Header => UI Service Product Discovery Features => Zombie UI Service Product Discovery Features => Zombie UI Service Frontend Composition: Catalan VS Duc Frontend Composition: Catalan VS Duc Schmutzige Details in Gesprächen nach dem Talk Schmutzige Details in Gesprächen nach dem Talk
8. FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS FAKE FACTS CATALAN CATALAN GESCHEITERT AN GESCHEITERT AN ENTWICKLERAKZEPTANZ ENTWICKLERAKZEPTANZ 4 Evaluationsrunden mit allen FE Entwicklern: Alle für Catalan Entscheidung von Head of IT nach Aussagen von einem P&D Entwickler
9. SUMMARY DUC SUMMARY DUC DUC PRO/CONTRA LISTE DUC PRO/CONTRA LISTE
10. CATALAN CATALAN Nur eine Folie Keine Architektur Keine Pro-/Contraliste Keine Evaluation von anderen mitevaluierten Technologien Deswegen dieser Talk!
11. ... und weil die Catalan Architektur viel geiler ist :-) ... und weil die Catalan Architektur viel geiler ist :-)
12. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN
13. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN Catalan basiert auf vielen "Best Practices" Konzepte kommen aus allen Entwicklungsbereichen Frontend Backend Architektur CI/CD QA
14. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN AGILE AGILE Agile != Scrum && Agile != Kanban WIRKLICH!!! Entscheidungen herauszögern schnell scheitern lernen richtig machen
15. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN DEVOPS DEVOPS Keine Jobbezeichnung Mischung aus Operations und Development Crossfunktionale Teams Automatisierung von operativen Aufgaben If it hurts, do it more often
16. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN DEVOPS TOOLING DEVOPS TOOLING Desired State Con guration: Consul, Routen API Endpoint Behaviour/Test Driven Development: Geb, Jasmine CI/CD: Bamboo
17. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN SEITENEFFEKTE SEITENEFFEKTE In computer science, an operation, function or expression is said to have a side e ect if it modi es some state variable value(s) outside its local environment, that is to say has an observable e ect besides returning a value (the main e ect) to the invoker of the operation
18. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN SEITENEFFEKTE SEITENEFFEKTE Für wen sind Seitene ekte am schlimmsten? Für wen sind Seitene ekte am schlimmsten? Entwickler QA Admin
19. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN SEITENEFFEKTE SEITENEFFEKTE Für wen sind Seitene ekte am schlimmsten? Für wen sind Seitene ekte am schlimmsten? 1. -->QA<-- 2. Entwickler 3. Admin
20. SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE
21. SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE SEITENEFFEKTE
22. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN CSS CSS Cascading Style Sheet Bewusste Seitene ekte Schwierige Browserunterstützung
23. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN ATOMIC DESIGN ATOMIC DESIGN
24. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN FE + QA = GALEN FE + QA = GALEN Layout Testingframework Layout Seitene ekte durch Constraints sichtbar URL: URL: http://galenframework.com/ http://galenframework.com/
25. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GALEN EXAMPLE GALEN EXAMPLE
26. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN CDCT CDCT Consumer Driven Contract Testing https://martinfowler.com/articles/consumerDrivenCo https://docs.pact.io/
27. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN CDCT CDCT Like o ne Integration Tests. Means it can be done locally without a full infrastructure
28. GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN GRUNDLAGEN DYNAMIC PARSED VS. STATIC DYNAMIC PARSED VS. STATIC COMPILED COMPILED
29. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES
30. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES MVC Frontend Layer Single Page Application: Frontend Layer Verticals Duc: Verticals Mosaic: Frontend Layer Catalan: Frontend Layer
31. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) (INFRASTRUCTURE) ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES MVC Frontend Layer Single Page Application: Frontend Layer Bekannt??? Bekannt???
32. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES FRONTEND LAYER FRONTEND LAYER
33. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES SINGLE PAGE APPLIATION SINGLE PAGE APPLIATION
34. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES VERTICALS VERTICALS Otto hatte dies bereits 2014 und beschrieb es in Otto hatte dies bereits 2014 und beschrieb es in mehreren Blog Posts: mehreren Blog Posts: https://www.otto.de/jobs/technology/techblog/artik with-microservices-and-vertical-decomposition_2014 29.php https://www.informatik- aktuell.de/entwicklung/methoden/von-monolithen-un microservices.html
35. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES VERTICALS VERTICALS
36. VERTICALS VERTICALS <!-- original request --> <html> ... <esi:include src=“/san/...“ /> ... </html> <!-- Include Response --> <div class="navi"> ... </div> <!-- Varnish Response --> <html> ... <div class="navi"> ... </div> ... </html>
37. Otto.de hatte eine Menge Probleme mit dieser Achitektur! Instabile Umgebung Durch Rekursionen langsam Frameworks konnten nicht verwendet werden
38. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES DUC DUC Die selbe Architektur wie Otto ... aber Erzählt das nicht weiter Schwachstellen vor der Catalanentwicklung bekannt Ein paar zusätzliche Features bezüglich Asset Reihenfolge und Headers
39. CATALAN CATALAN
40. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES CATALAN CATALAN
41. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES CATALAN CATALAN
42. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES ARCHITECTURES CATALAN CATALAN Catalan Entwicklung 2016 gestoppt Mosaic kann nun auch isomorphe statische Templates In Catalan wurden Pages nicht Fragmente kompiliert Built-in Contract Testing Wem das Konzept gefällt sollte Mosaic versuchen
43. FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND FRONTEND ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE ARCHITECTURE MOSAIC MOSAIC viele Komponenten alle Ausschließlich für UI verantwortlich sehr intelligenter Routing Mechanismus möglich in Live zu entwickeln ohne Test-Umgebung haben sich evtl. von Catalan beein ussen lassen #tesselate URL: URL: https://www.mosaic9.org/ https://www.mosaic9.org/
45. ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG
46. ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG Lösung FE BE OPS QA SPA / Duc Mosaic
47. ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG ZUSAMMENFASSUNG Duc ist die "Weiterentwicklung" von ESI Includes Mosaic enthält fast alle Konzepte von Catalan Kleine Teams sollten auf weniger komplexe Konzepte setzen: MVC Frontend Layer Single Page Applications
48. PROBLEME VON DUC PROBLEME VON DUC FE Entwickler müssen Backendservices starten können und DB xtures generieren Duc ist schwer zu testen Kommunikationsaufwand im Team bei Duc zu hoch Keine einheitliche UX mit Duc möglich oder sehr teuer Duc hat zu viele Seitene ekte UI/Template Tests können nur auf der Integration zuverlässig gemacht werden Nicht OpenSource und kleines internes Entwicklerteam
49. ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS ABSCHLUSS E2E-Tests blinken rotgrün vor sich hin? E2E-Tests blinken rotgrün vor sich hin? Releases enthalten regelmäßig Releases enthalten regelmäßig kritische Bugs, obwohl die CI-Pipelines kritische Bugs, obwohl die CI-Pipelines grün waren? Eine Ursachenanalyse der grün waren? Eine Ursachenanalyse der Bugs ist schwer, da viele Teams in Bugs ist schwer, da viele Teams in einem Brei herumrühren? einem Brei herumrühren? Microfrontends waren bis jetzt nicht Microfrontends waren bis jetzt nicht die Lösung? die Lösung?