Save 37% off PRO during our Black Friday Sale! »

Transklusion - Kitt für gut geschnittene Webanwendungen

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?

A9e1057195ae2e602acdd908b5cca2e1?s=128

Franziska Dessart

December 13, 2017
Tweet

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