Transklusion - Kitt für gut geschnittene Webanwendungen

Selbst kleinere Webanwendungen stammen heutzutage nur noch selten aus einer Quelle. Daten und Inhalte aus Drittsystemen oder Content aus dem CMS wollen integriert oder gar ein Altsystem schrittweise abgelöst werden. Auch Microservices oder Self contained Systems stellen Teile eines Frontends isoliert zur Verfügung, um den Frontend-Monolithen zu vermeiden. Schön entkoppelt, aus Sicht der Architektur.

Doch wie und wo bringe ich am Ende alle Einzelteile zusammen? Mit einer selbstgestrickten Lösung in meinem Backend? Alles clientseitig integriert? Welche Möglichkeiten es gibt und für welche Anwendungsfälle sie sich am besten eignen, soll das Thema dieses Vortrags sein.

Was ist Transklusion, und für was brauche ich sie?
Welche Ziele verfolge ich beim Schneiden von Webanwendungen?
Wie schneide ich “an der richtigen Stelle”?
Wo transkludiere ich und mit welcher Methode?
Gibt es verwandte Konzepte, die hilfreich sein könnten?

Transcript

1. Transklusion Kitt für gut geschnittene Webanwendungen www.innoQ.com
2. Franziska Dessart franziska.dessart@innoq.com Senior Consultant @ innoQ @lapaqui
3. Was ist Transklusion? 7 6 5 4 3 2 1
4. “…die Übernahme von einem elektronischen Dokument oder Teilen davon in ein oder mehrere andere Dokumente durch einen Hypertext-Verweis.” — https://de.wikipedia.org/wiki/Transklusion
5. Transklusion
6. Atomisierung
7. Atomisierung
8. Parametrisierung
9. Warum transkludieren? 7 6 5 4 3 1 2
10. Ziele > Architektur > Wartbarkeit > Änderbarkeit > kürzere Entwicklungszeiten durch Einsatz von Produkten > Ablösung von Altsystemen (Legacy) ohne BigBang > Performance/Usability > kürzere Time to First Meaningful Paint > kürzere Time to First Interaction
11. “Monolithen sind super. Deswegen sollten wir unsere großen Systeme aus ganz vielen davon bauen.” — Stefan Tilkov
12. Frontend-Monolithen Server Server Browser Browser
13. SCS, µServices mit UI Server Browser
14. Integration über Links System 1 System 2
15. Transklusion System 1 System 2
16. Redirection System 1 System 2
17. „Enterprise“
18. Performance/Usability > Schnitt zwischen UIs > Caching von Fragmenten ermöglichen > Trennung von Hauptinhalten und sekundären Inhalten
19. Wo und was transkludieren? 7 6 5 4 1 2 3
20. Wo?
21. Wo?
22. Hauptinhalte > überall, außer clientseitig > Origin-Server, dedizierte Komponente > Webserver > Proxy/CDN (insbesondere, wenn cachebar)
23. sekundäre Inhalte > clientseitig > Proxy/CDN/Webserver: 
 wenn cachebar & nicht user-spezifisch
24. SEO-relevante Inhalte > überall, außer clientseitig > Origin-Server, dedizierte Komponente > Webserver > Proxy/CDN
25. cachebare Inhalte > nicht user-spezifisch > Proxy > CDN > Webserver > user-spezifisch > clientseitig
26. Wie transkludieren? 7 6 5 1 2 3 4
27. clientseitig
28. clientseitig <a is="embeddable-link" href="http://localhost:8000/user">current user</a> <h-include src="/other/document/here.html"></h-include> > h-include - https://github.com/gustafnk/h-include > „selbst implementiert“ - 
 z.B. wie in https://github.com/FND/universal-web-transclusion (PoC) <iframe src="https://www.google.com/maps/embed?pb=…" width="100%" height="200"
 frameborder="0" style="border:0"></iframe> > iframe
29. Origin Server
30. Origin Server <a is="embeddable-link" href="http://localhost:8000/user">current user</a> > „selbst implementiert“ - 
 z.B. wie in https://github.com/FND/universal-web-transclusion (PoC)
31. Webserver
32. Webserver <!--#include virtual="path/to/a/resource" --> > Server Side Includes (SSI) - z.B. auf Apache HTTP Server, nginx
33. dediziertes System
34. dediziertes System 
 z.B. Zalando Tailor <fragment src="http://localhost:8088" 
 fallback-src="http://localhost:8081" primary></fragment> <fragment src="http://localhost:8082" async></fragment> <fragment slot="body-start" src="http://localhost:8083" 
 timeout="1000"></fragment> https://github.com/zalando/tailor
35. Caching Proxy/CDN
36. Caching Proxy/CDN > Edge Side Includes (ESI) 
 z.B. auf Varnish, squid, Akamai, Oracle Web Cache <esi:include src="http://example.com/1.html" 
 alt="http://bak.example.com/2.html" onerror="continue"/> https://www.w3.org/TR/esi-lang
37. FAQ 7 6 1 2 3 4 5
38. Assets > dürfen Fragmente Styles und Skripte mitliefern? > ja > Syntaxfehler crashed ganze Seite > ggf. Versionskonflikte von genutzten Bibliotheken > nein > nur Markup transkludieren
39. Assets > zentrale Assets-Bibliothek (Pattern-Library/Living-Style-Guide) > push vs. pull > Versionierung > Abwärtskompatibilität > inkludiert zur > Laufzeit > Buildzeit > Feature Toggles
40. Caching > Cache-Control Header setzen > Proxy/CDN: Surrogate Keys nutzen und bei Änderungen von Ressourcen aktiv invalidieren (zuvor endlos cachen) HTTP/1.1 200 OK
 Surrogate-Key: 1234566789 192837465 987654321
 Content-Type: text/html
 … PURGE 192837465
 …
41. Fallbacks > letzter Fallback geht immer: 
 graceful degradation zu <a href="http://example.org/userinfo">Hier geht’s zur Userinfo</a>
42. rekursives Laden > geladenes Dokument enthält wiederum Referenzen > grundsätzlich überall möglich:
 ESI, SSI, h-include, Eigenlösung > Ausnahme: Tailor 
 nur Verschachteln von Base- und Page-Templates > Achtung: Performance!
43. Cookies, Header > in der Regel nur vom einbettenden System zu setzen > Setzen von Cookies ggf. über Redirects lösbar
44. Tests > Integrationstest > Gutfall (alle Systeme da und fehlerfrei) > Schlechtfall > System ausgefallen/Netzwerkprobleme > System antwortet mit ungültiger/fehlerhafter Antwort > funktioniert der Fallback?
45. Beispiel 7 1 2 3 4 5 6
46. Beispiel > Crimson Insurance https://crimson-portal.herokuapp.com/ (deployt) https://github.com/innoq/lvm-roca-prototype (Einzelprojekte) https://github.com/ewolff/crimson-assurance-demo (mit Docker) http://roca-style.org/
47. Verwandtes 1 2 3 4 5 6 7
48. > Header > Konzept: sekundäre, aufwendige Inhalte nachgelagert ausliefern > Hauptinhalte werden sofort geflusht > am Ende des HTML bodys sekundäre Inhalte anhängen und 
 im Client an die eigentliche Stelle kopieren > https://en.wikipedia.org/wiki/Chunked_transfer_encoding > https://de-de.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/ > https://github.com/zalando/tailor > http://www.bigpipe.io chunked HTML Transfer-Encoding: chunked
49. chunked HTML - Tailor <fragment src=„http://localhost:8088" async></fragment>
50. <html> … <body> … <script data-pipe>_p941.placeholder(2)</script> … <script>_p941.loadCSS("http://localhost:8082/fragment.css")</script> <script data-pipe>_p941.start(2, "http://localhost:8082/fragment.js")</script> <div class="fragment-world"> Fragment world </div> <script data-pipe>_p941.end(2, "http://localhost:8082/fragment.js", "2")</script> </body> </html> chunked HTML - Tailor
51. HTTP/2 Server Push Link: </css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image, </app/transclude/resource>; rel=preload; as=fetch > Server schickt Push-Ressourcen, bevor diese vom Client angefordert werden > gesteuert über Link Header https://w3c.github.io/preload/
52. Dankeschön! Fragen? Anmerkungen? innoQ Deutschland GmbH Krischerstr. 100 D-40789 Monheim am Rhein Germany Phone: +49 2173 3366-0 innoQ Schweiz GmbH Gewerbestr. 11 CH-6330 Cham Switzerland Phone: +41 41 743 0116 www.innoq.com Ohlauer Straße 43 D-10999 Berlin Germany Phone: +49 2173 3366-0 Ludwigstr. 180 E D-63067 Offenbach Germany Phone: +49 2173 3366-0 Kreuzstr. 16 D-80331 München Germany Telefon +49 2173 3366-0 https://www.innoq.com/de/talks/ Franziska Dessart | @lapaqui franziska.dessart@innoq.com