Transklusion - Kitt für gut geschnittene Webanwendungen

Slide 1

Slide 1 text

Transklusion Kitt für gut geschnittene Webanwendungen www.innoQ.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Was ist Transklusion? 7 6 5 4 3 2 1

Slide 4

Slide 4 text

“…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

Slide 5

Slide 5 text

Transklusion

Slide 6

Slide 6 text

Atomisierung

Slide 7

Slide 7 text

Atomisierung

Slide 8

Slide 8 text

Parametrisierung

Slide 9

Slide 9 text

Warum transkludieren? 7 6 5 4 3 1 2

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Frontend-Monolithen Server Server Browser Browser

Slide 13

Slide 13 text

SCS, µServices mit UI Server Browser

Slide 14

Slide 14 text

Integration über Links System 1 System 2

Slide 15

Slide 15 text

Transklusion System 1 System 2

Slide 16

Slide 16 text

Redirection System 1 System 2

Slide 17

Slide 17 text

„Enterprise“

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Wo?

Slide 21

Slide 21 text

Wo?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

sekundäre Inhalte > clientseitig > Proxy/CDN/Webserver:   wenn cachebar & nicht user-spezifisch

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Wie transkludieren? 7 6 5 1 2 3 4

Slide 27

Slide 27 text

clientseitig

Slide 28

Slide 28 text

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) > iframe

Slide 29

Slide 29 text

Origin Server

Slide 30

Slide 30 text

Origin Server current user > „selbst implementiert“ -   z.B. wie in https://github.com/FND/universal-web-transclusion (PoC)

Slide 31

Slide 31 text

Webserver

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

dediziertes System

Slide 34

Slide 34 text

dediziertes System   z.B. Zalando Tailor https://github.com/zalando/tailor

Slide 35

Slide 35 text

Caching Proxy/CDN

Slide 36

Slide 36 text

Caching Proxy/CDN > Edge Side Includes (ESI)   z.B. auf Varnish, squid, Akamai, Oracle Web Cache https://www.w3.org/TR/esi-lang

Slide 37

Slide 37 text

FAQ 7 6 1 2 3 4 5

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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  …

Slide 41

Slide 41 text

Fallbacks > letzter Fallback geht immer:   graceful degradation zu Hier geht’s zur Userinfo

Slide 42

Slide 42 text

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!

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Beispiel 7 1 2 3 4 5 6

Slide 46

Slide 46 text

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/

Slide 47

Slide 47 text

Verwandtes 1 2 3 4 5 6 7

Slide 48

Slide 48 text

> 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

Slide 49

Slide 49 text

chunked HTML - Tailor

Slide 50

Slide 50 text

… … _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

Slide 51

Slide 51 text

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/

Slide 52

Slide 52 text

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