1. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Bachelorarbeit
Entwicklung eines clientseitigen Webtemplatesystems mit
generischer Datenanalyse
Tobias Nentwig
18. Januar 2011
1 / 38

2. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Inhaltsverzeichnis
1 Einf¨hrung
u
2 Compiler
3 Clientmodul
4 R´sum´
e e
2 / 38

3. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Webtemplates
Templates sind Vorlagen f¨r Dokumente
u
speichern visuelle Logik
betten Daten & Logik in HTML-Struktur ein
generieren HTML-Code f¨r die Darstellung im Browser
u
3 / 38

4. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Serverseitiges Templatesystem
Ablauf Eigenschaften
Server bekommt Request + zentrale Berechnung
Daten werden aufbereitet + leicht skalierbar
Template wird gerendered – hohe Serverlast
HTML-Code als Antwort
4 / 38

5. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Clientseitiges Templatesystem
Ablauf
Daten und Templatedaten werden beim Server abgefragt
Sind beide Anfragen erfolgreich, wird das Template geparsed
Der daraus resultierende DOM-Baum wird in vorhandene
Strukturen eingebettet
5 / 38

6. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Warum clientseitige Templatesysteme?
Ziele meines Templatesystems . . .
Beschleunigung von Benutzerinteraktionen
durch Entkoppelung der Struktur von den Daten k¨nnen
o
Templates clientseitig gecached werden
automatisierte Nutzung von modernen HTML5
Browserfunktionen
Server endlasten
6 / 38

7. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Warum Datenanalyse im Templatesystem?
Datenanalyse zur Adressierung der Templatekonstrukte
Adressierung der Templatekonstrukte wird genutzt um . . .
Template rendern, ohne dass alle Daten vorhanden sind
Inhalte k¨nnen live aktualisiert werden
o
¨
Anderungen k¨nnen automatisch durch Animationen
o
visualisiert werden
– erh¨hter Speicherbedarf durch Adressierungsinformationen
o
7 / 38

8. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Warum Templates compilieren?
Ziele meines Compilers . . .
+ Datenanalyse zu aufw¨ndig f¨r Liveinterpreter
a u
+ nur datenabh¨ngige Berechnungen beim Rendern durchf¨hren
a u
+ Performancegewinn durch optimierte Templatestruktur
+ Unterst¨tzung f¨r Clients mit schwacher Rechenleistung
u u
(Smartphones)
– reultierende Templates unleserlich und manipuliert
8 / 38

9. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Inhaltsverzeichnis
1 Einf¨hrung
u
2 Compiler
3 Clientmodul
4 R´sum´
e e
9 / 38

10. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Ablaufkonzept des Templatesystems
10 / 38

11. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Konstrukte des original Templates
Templatesprache
basiert syntaktisch auf der Django Template Language
grundlegende Funktionen sind implementiert
Implementierte Konstrukte
Variablen
{{foo.bar}} durch doppelt geschweiften Klammern werden
Variablen in Javascript Object Notation aufgerufen
Funktionsbl¨cke
o
{% if %}{% else %}{% end %} logischer Block der nur bei
erf¨llter Bedingung generiert wird
u
11 / 38

12. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Konstrukte des original Templates
Weitere implementierte Konstrukte
Funktionsbl¨cke
o
{% for var in list %}{% end %} iteration uber Liste
¨
{% include template %} das Template wird eingebunden
{% extends template %} erweitert ubergebenes Template
¨
{% block %}{% end %} bindet Inhalt in Muttertemplate ein
Fehlende Funktionen
Filter f¨r Variablen z.B. HTML-Escape oder Datumsfilter
u
spezielle logische Bl¨cke f¨r For-Loops z.B. odd, even, first . . .
o u
12 / 38

13. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Ablaufkonzept des Templatesystems
13 / 38

14. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Aufbau des Compilers
Funktion des Compilers
generiert strukturiertes Template im JSON-Format
manipuliert Quellcode um Adressierung zu erm¨glichen
o
Drei Schritte zum JSON-Template
14 / 38

15. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Parser
blockweise Aufspaltung durch regul¨re Ausdr¨cke
a u
f¨gt Bl¨cke in spezielle, doppelt verketteten Skipliste
u o
15 / 38

16. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Adressierer
Aufgaben des Adressierers
Lokationsanalyse der Templatekonstrukte
Manipulation durch Adressinjektion
Speicherung der Adressierungsdetails in Skipliste
Beispiel - HTML-Code
<a h r e f =”/news /{{ news . i d }}”>{{news . t i t l e }}</a>
16 / 38

17. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Adressierer - Beispiel
Original HTML-Code
<a h r e f =”/news /{{ news . i d }}”>{{news . t i t l e }}</a>
HTML-Code nach Adressierer
<a t p l =”13 u 9 0 8 f 0 d ” h r e f =”/news /{{ news . i d }}”>{{news . t i t l e }}</a>
Adressierungsdetails
{ v a r news . i d : {
id : ”13 u 9 0 8 f 0 d ” ,
atr : ” href ” ,
s t r : ”/ news/%s ”
},
v a r news . t i t l e : {
id : ”13 u 9 0 8 f 0 d ” ,
a t r : ” innerHTML ”
}
}
17 / 38

18. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Generator
generiert f¨r jeden Block einen passenden Funktionsaufruf
u
schreibt alle gesammelten Informationen in eine JSON-Datei
Struktur der Zieldatei
{ 1 :
[
[ tpl t e x t (’< a t p l =”13 u 9 0 8 f 0 d ” h r e f =”/news / ’ , namespace ) ] ,
[ tpl v a r ( ’ news . i d ’ , data , namespace ) ,
{id : ”13 u 9 0 8 f 0 d ” , a t r : ” h r e f ” , s t r : ”/ news/%s ” } ] ,
[ tpl t e x t ( ’” > ’ , namespace ) ] ,
[ tpl v a r ( ’ news . t i t l e ’ , data , namespace ) , { A d r e s s e } ] ,
[ tpl t e x t (’</a > ’ , namespace ) ]
[ tpl i f (2 ,3 , data ) , {Adresse }]
],
2 : [ ... h i e r kommen F u n k t i o n e n d e s I f −B l o c k s . . . ] ,
3 : [ ... h i e r kommen F u n k t i o n e n d e s E l s e−B l o c k s . . . ]
}
18 / 38

19. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Inhaltsverzeichnis
1 Einf¨hrung
u
2 Compiler
3 Clientmodul
4 R´sum´
e e
19 / 38

20. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Ablaufkonzept des Templatesystems
20 / 38

21. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Templatemodul in Javascript
Funktionen des Templatemoduls
generiert HTML-Code aus Daten und Templates
ubernimmt interne Pagenavigation
¨
kommuniziert mit dem Server
nutzt erweiterte Browserfunktionen (History API,
Offlinecaching)
kennt den aktuellen Anzeigezustand
21 / 38

22. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Ablaufkonzept des Templatesystems
22 / 38

23. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Initialisierung des Templatemoduls
Templatesystem funktioniert hybrid (Server & Client)
¨
Ubergabe der n¨tigen Informationen und Zust¨nde bei
o a
Initialisierung
Initialisierungsablauf
aktuelle URL-Matching-Liste wird vom Server geladen
uberschreibt interne Linkevents mit Modulfunktionen
¨
wartet auf zu verarbeitende Events
k¨nnte w¨hrend des Warteprozesses schon m¨gliche zuk¨nftig
o a o u
ben¨tigte Inhalte vorladen
o
23 / 38

24. Implementierung - Eventloopansatz
Ablauf des Template-Renderloops
Eventlistener wird vor Aufruf der Templatefunktion gesetzt
nach Berechnung wird das Ergebnis als Event zur¨ckgegeben
u

25. Implementierung - Eventloopansatz
Evaluation des Ansatzes
+ erm¨glicht durch XMLHttpRequest verz¨gerte Templatebl¨cke
o o o
+ ubersichtlich und leicht erweiterbar
¨
– keine parallele Berechnung vorgesehen

26. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Eventloopansatz - Erfahrungen und Probleme
Probleme der Implementierung
hohe Abh¨ngigkeit zum Javascript Framework Mootools
a
Browserlimitierung “too much recursion” schon bei geringer
Anzahl von Iterationen
hoher Speicherbedarf durch Closures bei rekursivem Aufruf
Erfahrungen bei praktische Anwendung
Funktionsverlauf sehr leicht nachvollziehbar
Debugging durch Nutzung eines Frameworks umst¨ndlich
a
akzeptabele Performance bei Templategenerierung
26 / 38

27. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
¨
Mergeloopansatz - Uberblick
Ziele des Mergeloopansatzes
wenig Abh¨ngigkeiten f¨r einfache hybride Implementierung
a u
und Vergr¨ßerung der potentiellen Zielgruppe der Anwender
o
keine Rekursion und nur n¨tige Abwicklung uber Events
o ¨
erh¨hte Performance durch “return what you got”
o
Merge nach dem Loop
effiziente Nutzung der Rechenzeit w¨hrend Wartevorgang
a
Spielraum f¨r weitere Optimierungen z.B. DOM-Baum
u
vorparsen, Templates datenlos generieren
27 / 38

28. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Mergeloopansatz - Implementierung
Ablauf der Implementierung
ein Puffer in Form eines Arrays wird angelegt
es wird uber das zu berechnende Template iteriert
¨
Templatefunktionen geben generierten Text oder
Informationen uber den Kontrollfluss zur¨ck
¨ u
fertig generierte Teile werden in den Puffer geschrieben
fehlende Daten bekommen einen Platzhalter, werden beim
Server angefragt und werden in Warteschlange gestellt
abschließende Funktion f¨gt Ergebnisse zusammen, bis
u
Warteschlange leer ist und f¨gt das Ergebnis dann in den
u
DOM-Baum ein
28 / 38

29. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Inhaltsverzeichnis
1 Einf¨hrung
u
2 Compiler
3 Clientmodul
4 R´sum´
e e
29 / 38

30. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Warum clientseitige Templatesysteme?
Ziele meines Templatesystems . . .
Beschleunigung von Benutzerinteraktionen
durch Entkoppelung der Struktur von den Daten k¨nnen
o
Templates clientseitig gecached werden
automatisierte Nutzung von modernen HTML5
Browserfunktionen
Server endlasten
30 / 38

31. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Clientcaching
Motivation
redundante Daten¨bertragung m¨glichst ausschließen
u o
geringere Serverlast und h¨here Clientperformance
o
weniger Bandbreite wird verwendet z.B. wichtig f¨r
u
Smartphones
Umsetzung durch ETags
Dateien und Templates werden dauerhaft gecached
Daten m¨ssen auf validit¨t uberpr¨ft werden
u a ¨ u
31 / 38

32. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Clientcaching - ETag in URL
Permanentes Caching via ETag in URL
Templates werden im HTML5 “local storage” gespeichert
ETags von Dateien werden seperat vom Server geladen
Validierendes Caching via ETag im HTTP-Header
Beispiel Templateurl mit ETag:
/ b l o g / e n t r y −> / b l o g / e n t r y ? f a s j d f 9 0 1 2 h
32 / 38

33. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Clientcaching - ETag in HTTP-Header
Validierendes Caching via ETag im HTTP-Header
Daten beim Server auf validit¨t uberpr¨ft
a ¨ u
Daten¨bertragung kann gespart werden
u
ETags werden bei jeder Anfrage im Header mitgeschickt
Templatemodul kann genutzt werden um vorhandene Daten
schon ohne Validierung zu berechnen um Antwortzeit zu
verk¨rzen
u
33 / 38

34. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
HTML5 - History API
History API erm¨glicht Manipulation der Browserhistory
o
Zust¨nde k¨nnen problemlos per URL abgebildet werden
a o
Durch zustandsbewusstes Templatemodul Vor- und
Zur¨cknavigation
u
¨
Anderungen k¨nnen durch Animationen dargestellt werden
o
Beispiel Vergleich fr¨her zu heute
u
fr¨her:
u
/ b l o g/#page=e n t r y&i d=t e m p l a t e s y s t e m e −s i n d −s u p e r
heute mit HTML5 History API
/ b l o g / e n t r y / t e m p l a t e s y s t e m e −s i n d −s u p e r
34 / 38

35. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Praktische Implementierung - Ist-Zustand
Templatecompiler
Adressierung durch generische Datenanalyse
generiert JSON-Template in vorgegebener Struktur
Clientmodul
generiert HTML-Code aus Daten und Templates
Speichert Daten lokal und fragt fehlende beim Server an
HTML5 History API wird komplett unterst¨tzt
u
managed lokale Navigation uber Klickevents
¨
35 / 38

36. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Praktische Implementierung
Was ist noch m¨glich?
o
¨
visualisierung der Anderungen durch Animationen oder
Hervorhebungen
Cacheinvalidierung durch ETags
Nutzung der Adressinformation zur optimierung der
Templategenerierung
beschleunigte Kommunikation durch Implementierung von
Websockets zum Datenmanagement
Liveaktualisierung der Inhalte durch Adressierung einzelner
Variablen und serverseitiger Zustandsverwaltung
36 / 38

37. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Warum ist so ein Templatesystem sinnvoll?
Aus Sicht des Entwicklers
+ gewohnte Abl¨ufe bei der Applikationsentwicklung
a
+ automatische Optimierung des clientseitigen Cachings
+ geringere Serverlast
+ spart Großteil des clientseitigen Programmieraufwands
– wenig Raum f¨r individualisierung
u
– starke Systemabh¨ngigkeit
a
Aus Sicht des Benutzer
+ geringe Wartezeit und ߬ssige Navigation
u
– Rechenaufwand und Speicherbedarf
37 / 38

38. Einf¨hrung
u Compiler Clientmodul R´sum´
e e
Danke f¨r Ihre Aufmerksamkeit
u
Danke fur Ihre Aufmerksamkeit
¨
38 / 38