• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bachelorarbeit - Scrup Templatesystem
 

Bachelorarbeit - Scrup Templatesystem

on

  • 595 views

 

Statistics

Views

Total Views
595
Views on SlideShare
595
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Bachelorarbeit - Scrup Templatesystem Bachelorarbeit - Scrup Templatesystem Presentation Transcript

    • Einf¨hrung u Compiler Clientmodul R´sum´ e e Bachelorarbeit Entwicklung eines clientseitigen Webtemplatesystems mit generischer Datenanalyse Tobias Nentwig 18. Januar 2011 1 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eInhaltsverzeichnis 1 Einf¨hrung u 2 Compiler 3 Clientmodul 4 R´sum´ e e 2 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWebtemplates 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eServerseitiges Templatesystem Ablauf Eigenschaften Server bekommt Request + zentrale Berechnung Daten werden aufbereitet + leicht skalierbar Template wird gerendered – hohe Serverlast HTML-Code als Antwort 4 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eClientseitiges 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWarum 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWarum 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWarum 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eInhaltsverzeichnis 1 Einf¨hrung u 2 Compiler 3 Clientmodul 4 R´sum´ e e 9 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAblaufkonzept des Templatesystems 10 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eKonstrukte 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eKonstrukte 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAblaufkonzept des Templatesystems 13 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAufbau 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eParser blockweise Aufspaltung durch regul¨re Ausdr¨cke a u f¨gt Bl¨cke in spezielle, doppelt verketteten Skipliste u o 15 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAdressierer 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAdressierer - 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eGenerator 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eInhaltsverzeichnis 1 Einf¨hrung u 2 Compiler 3 Clientmodul 4 R´sum´ e e 19 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAblaufkonzept des Templatesystems 20 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eTemplatemodul 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eAblaufkonzept des Templatesystems 22 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eInitialisierung 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
    • Implementierung - Eventloopansatz Ablauf des Template-Renderloops Eventlistener wird vor Aufruf der Templatefunktion gesetzt nach Berechnung wird das Ergebnis als Event zur¨ckgegeben u
    • Implementierung - Eventloopansatz Evaluation des Ansatzes + erm¨glicht durch XMLHttpRequest verz¨gerte Templatebl¨cke o o o + ubersichtlich und leicht erweiterbar ¨ – keine parallele Berechnung vorgesehen
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eEventloopansatz - 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
    • 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eMergeloopansatz - 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eInhaltsverzeichnis 1 Einf¨hrung u 2 Compiler 3 Clientmodul 4 R´sum´ e e 29 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWarum 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eClientcaching 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eClientcaching - 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eClientcaching - 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eHTML5 - 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e ePraktische 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e ePraktische 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
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eWarum 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 fl¨ssige Navigation u – Rechenaufwand und Speicherbedarf 37 / 38
    • Einf¨hrung u Compiler Clientmodul R´sum´ e eDanke f¨r Ihre Aufmerksamkeit u Danke fur Ihre Aufmerksamkeit ¨ 38 / 38