Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Transklusion - Kitt für gut geschnittene Webanw...

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?

Franziska Dessart

December 13, 2017
Tweet

More Decks by Franziska Dessart

Other Decks in Technology

Transcript

  1. “…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
  2. 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
  3. Performance/Usability > Schnitt zwischen UIs > Caching von Fragmenten ermöglichen

    > Trennung von Hauptinhalten und sekundären Inhalten
  4. Wo?

  5. Wo?

  6. cachebare Inhalte > nicht user-spezifisch > Proxy > CDN >

    Webserver > user-spezifisch > clientseitig
  7. 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
  8. 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
  9. 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
  10. Assets > dürfen Fragmente Styles und Skripte mitliefern? > ja

    > Syntaxfehler crashed ganze Seite > ggf. Versionskonflikte von genutzten Bibliotheken > nein > nur Markup transkludieren
  11. Assets > zentrale Assets-Bibliothek (Pattern-Library/Living-Style-Guide) > push vs. pull >

    Versionierung > Abwärtskompatibilität > inkludiert zur > Laufzeit > Buildzeit > Feature Toggles
  12. 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
 …
  13. Fallbacks > letzter Fallback geht immer: 
 graceful degradation zu

    <a href="http://example.org/userinfo">Hier geht’s zur Userinfo</a>
  14. 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!
  15. Cookies, Header > in der Regel nur vom einbettenden System

    zu setzen > Setzen von Cookies ggf. über Redirects lösbar
  16. Tests > Integrationstest > Gutfall (alle Systeme da und fehlerfrei)

    > Schlechtfall > System ausgefallen/Netzwerkprobleme > System antwortet mit ungültiger/fehlerhafter Antwort > funktioniert der Fallback?
  17. > 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
  18. <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
  19. 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/
  20. 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 [email protected]