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
   

   View Slide

2. Franziska Dessart
   franziska.dessart@innoq.com
   Senior Consultant @ innoQ
   @lapaqui
   

   View Slide

3. Was ist Transklusion?
   7
   6
   5
   4
   3
   2
   1
   

   View Slide

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
   

   View Slide

5. Transklusion
   

   View Slide

6. Atomisierung
   

   View Slide

7. Atomisierung
   

   View Slide

8. Parametrisierung
   

   View Slide

9. Warum transkludieren?
   7
   6
   5
   4
   3
   1
   2
   

   View Slide

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
    

    View Slide

11. “Monolithen sind super. Deswegen sollten wir unsere großen
    Systeme aus ganz vielen davon bauen.”
    — Stefan Tilkov
    

    View Slide

12. Frontend-Monolithen
    Server
    Server
    Browser Browser
    

    View Slide

13. SCS, µServices mit UI
    Server
    Browser
    

    View Slide

14. Integration über Links
    System 1 System 2
    

    View Slide

15. Transklusion
    System 1 System 2
    

    View Slide

16. Redirection
    System 1 System 2
    

    View Slide

17. „Enterprise“
    

    View Slide

18. Performance/Usability
    > Schnitt zwischen UIs
    > Caching von Fragmenten ermöglichen
    > Trennung von Hauptinhalten und sekundären Inhalten
    

    View Slide

19. Wo und was transkludieren?
    7
    6
    5
    4
    1
    2
    3
    

    View Slide

20. Wo?
    

    View Slide

21. Wo?
    

    View Slide

22. Hauptinhalte
    > überall, außer clientseitig
    > Origin-Server, dedizierte Komponente
    > Webserver
    > Proxy/CDN (insbesondere, wenn cachebar)
    

    View Slide

23. sekundäre Inhalte
    > clientseitig
    > Proxy/CDN/Webserver: 

    wenn cachebar & nicht user-spezifisch
    

    View Slide

24. SEO-relevante Inhalte
    > überall, außer clientseitig
    > Origin-Server, dedizierte Komponente
    > Webserver
    > Proxy/CDN
    

    View Slide

25. cachebare Inhalte
    > nicht user-spezifisch
    > Proxy
    > CDN
    > Webserver
    > user-spezifisch
    > clientseitig
    

    View Slide

26. Wie transkludieren?
    7
    6
    5
    1
    2
    3
    4
    

    View Slide

27. clientseitig
    

    View Slide

28. clientseitig
    current user
    
    > h-include - https://github.com/gustafnk/h-include
    > „selbst implementiert“ - 

    z.B. wie in https://github.com/FND/universal-web-transclusion (PoC)
    frameborder="0" style="border:0">
    > iframe
    

    View Slide

29. Origin Server
    

    View Slide

30. Origin Server
    current user
    > „selbst implementiert“ - 

    z.B. wie in https://github.com/FND/universal-web-transclusion (PoC)
    

    View Slide

31. Webserver
    

    View Slide

32. Webserver
    
    > Server Side Includes (SSI) - z.B. auf Apache HTTP Server, nginx
    

    View Slide

33. dediziertes System
    

    View Slide

34. dediziertes System 

    z.B. Zalando Tailor
    fallback-src="http://localhost:8081" primary>
    
    timeout="1000">
    https://github.com/zalando/tailor
    

    View Slide

35. Caching Proxy/CDN
    

    View Slide

36. Caching Proxy/CDN
    > Edge Side Includes (ESI) 

    z.B. auf Varnish, squid, Akamai, Oracle Web Cache
    alt="http://bak.example.com/2.html" onerror="continue"/>
    https://www.w3.org/TR/esi-lang
    

    View Slide

37. FAQ
    7
    6
    1
    2
    3
    4
    5
    

    View Slide

38. Assets
    > dürfen Fragmente Styles und Skripte mitliefern?
    > ja
    > Syntaxfehler crashed ganze Seite
    > ggf. Versionskonflikte von genutzten Bibliotheken
    > nein
    > nur Markup transkludieren
    

    View Slide

39. Assets
    > zentrale Assets-Bibliothek (Pattern-Library/Living-Style-Guide)
    > push vs. pull
    > Versionierung
    > Abwärtskompatibilität
    > inkludiert zur
    > Laufzeit
    > Buildzeit
    > Feature Toggles
    

    View Slide

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

    …
    

    View Slide

41. Fallbacks
    > letzter Fallback geht immer: 

    graceful degradation zu
    Hier geht’s zur Userinfo
    

    View Slide

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!
    

    View Slide

43. Cookies, Header
    > in der Regel nur vom einbettenden System zu setzen
    > Setzen von Cookies ggf. über Redirects lösbar
    

    View Slide

44. Tests
    > Integrationstest
    > Gutfall (alle Systeme da und fehlerfrei)
    > Schlechtfall
    > System ausgefallen/Netzwerkprobleme
    > System antwortet mit ungültiger/fehlerhafter Antwort
    > funktioniert der Fallback?
    

    View Slide

45. Beispiel
    7
    1
    2
    3
    4
    5
    6
    

    View Slide

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/
    

    View Slide

47. Verwandtes
    1
    2
    3
    4
    5
    6
    7
    

    View Slide

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
    

    View Slide

49. chunked HTML - Tailor
    
    

    View Slide

50. 
    …
    
    …
    _p941.placeholder(2)
    …
    _p941.loadCSS("http://localhost:8082/fragment.css")
    _p941.start(2, "http://localhost:8082/fragment.js")
    
    Fragment world
    
    _p941.end(2, "http://localhost:8082/fragment.js", "2")
    
    
    chunked HTML - Tailor
    

    View Slide

51. HTTP/2 Server Push
    Link: ; rel=preload; as=style,
    ; rel=preload; as=script,
    ; rel=preload; as=image,
    ; rel=preload; as=fetch
    > Server schickt Push-Ressourcen, bevor diese vom Client
    angefordert werden
    > gesteuert über Link Header
    https://w3c.github.io/preload/
    

    View Slide

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
    

    View Slide