Rendern von Seiten-Komponenten

Montag, 1. August 2011

Rendern von Seiten-Komponenten

Möchte man nur Teile einer Seite neu rendern, ohne den Rest der Seite zu verändern, bedient man sich häufig der DOM-Manipulation mit JavaScript. Sind an diesem Prozess dynamische Daten beteiligt, die auf dem Server gehalten werden, kommt auch noch XHR und JSON zum Austausch der Daten hinzu. Konkret ergeben sich daraus folgende Schritte, die für gewöhnlich als AJAX bezeichnet werden:

1. Ein XHR-Request erfragt Daten vom Server, die dieser in einer Session hält
2. Der Server sendet die angeforderten Daten im JSON-Format und der Client wandelt diese in JavaScript-Objekte
3. Basierend auf den so entstandenen Objekten werden mit JavaScript Manipulationen am bestehenden HTML-Dokument vorgenommen

Einige Nachteile dieses Vorgehens

• Der Ansatz funktioniert nur mit JavaScript - ohne JavaScript findet keine Veränderung des Dokuments statt
• Eigens für die DOM-Manipulation muss JavaScript-Code geschrieben werden - auf eventuell bestehenden Code des Templatesystems auf dem Server kann nicht zurückgegriffen werden
• Durch Punkt 2 besteht die Tendenz zum Duplizieren von Code in verschiedenen Sprachen auf Server- und Clientseite
• Setzt man sehr massiv auf den oben beschriebenen Ansatz, sind für Suchmaschinen kaum verwertbare Inhalte verfügbar

Wie können diese Nachteile umgangen werden?

Die meisten Templatesysteme setzen das HTML-Dokument aus einer Kombination verschiedener Seiten-Komponenten zusammen - typisch hierfür sind ein Header-, Content- und Footer-Bereich - aber auch Navigation, Sidebar etc. bilden solche Komponenten. Oft werden dynamische Daten genutzt, um z. B. eine Navigation zu erzeugen, die Links zu neu erzeugten Seiten generiert, ohne weitere Veränderungen am Code vorzunehmen zu müssen.

Am Beispiel einer Kostenübersicht möchte ich demonstrieren, wie solch eine Komponente mit XHR nach jeder Veränderung des Warenkorbs ohne Neuladen der Seite aktualisiert werden kann. Der folgende Wireframe zeigt den schematisch Aufbau der Seite - links die zu aktualisierende Kostenübersicht, rechts der Bereich, über den Veränderungen am Warenkorb vorgenommen werden können.



Schritt 1 - Der initial Request

Der initiale Request ruft die Seite das erste Mal vom Server ab. Angenommen, es befinden sich zu diesem Zeitpunkt bereits zwei Artikel im Warenkorb, dann würde die Kostenübersicht von einer Komponente erzeugt werden, die für jeden der zwei Artikel eine neue Tabellenzeile mit den zugehörigen Daten generiert. Zusammen mit den übrigen Teilen der Seite entsteht ein komplettes HTML-Dokument, welches über HTTP an den Browser ausgeliefert wird.



Soweit ist dies der klassische Ansatz, wie er von den meisten Frameworks verfolgt wird.

Schritt 2 - Ein Artikel wird hinzugefügt

Für das hinzufügen eines Artikels existiert ein Anker-Tag, welches einem Server-Script den neuen Artikel als GET-Paramter übergibt. Um das Neuladen der Seite zu verhindern, wird das Verhalten des Anker-Tags mit JavaScript unterbunden und statt dessen der Artikel über einen Webservice-Call mit XHR an den Server kommuniziert. Somit haben wir ein korrektes Verhalten für aktiviertes und deaktivertes JavaScript sichergestellt.

In beiden Fällen wird dem Warenkorbsystem auf dem Server der ausgewählte Artikel hinzugefügt. Bei deaktiviertem JavaScript würde erneut ein HTML-Dokument mit dem neuen Artikel in der Kostenübersicht erzeugt und über HTTP an den Browser ausgeliefert werden. Das interessante Verhalten ergibt sich bei aktiviertem JavaScript. Nachdem der Webserivce-Call erfolgreich verarbeitet wurde, gilt es die Kostenübersicht zu aktualisieren. Beim klassischen AJAX-Ansatz würde die Response die neuen Warenkorb-Artikel enthalten und per DOM-Manipulation würde die Tabelle der Kostenübersicht um eine weitere Zeile ergänzt werden. Dies kann bei komplexeren Problemen schnell sehr aufwändig werden. Eine elegantere Lösung besteht darin, das HTML-Fragment der Kostenübersicht auf dem Server neu erzeugen zu lassen und anschließend das bestehende Fragment mit JavaScript durch das neu erzeugte zu ersetzten. Die folgende Grafik soll diese Lösung veranschaulichen.



Welche Probleme gibt es hierbei zu lösen

Es muss eine Verbindung vom alten zum neuen HTML-Fragment hergestellt werden können. Am einfachsten ist dies mit einer Element-ID möglich, über welche das Fragment identifiziert und durch das neue ersetzt werden kann. Weiterhin muss das serverseitige Templatesystem/Framework eine entsprechende Funktionalität zum selektiven Neurendern von Seitenkomponenten bereitstellen. Komponentenbasierte Frameworks bieten hier die besten Chancen für einen solchen Support. Eine weitere Herausforderung stellt das Erzeugen und Entfernen von Event-Listenern auf Elemente des Fragments dar - auch hier sollte das Framework eine entsprechende Unterstützung bieten.

Geschrieben von Nico Steiner um 21:55 | Kommentar (1) | Trackbacks (0)