Den Browser entlasten: Responsive Web Design mit serverseitigen Komponenten (RESS)

Responsive Web Design (RWD) – endlich in den Unternehmen angekommen und als Begriff etabliert ist die Technologie auch schon wieder überholt. RESS ist das neue Schlagwort mit dem man sich auseinandersetzen muss, will man seine Webseite nutzerfreundlich über alle verschiedenen Kanäle ausspielen. RESS, genauer gesagt Responsive Web design with server side components – was ist das? Was sind die Vorteile sowie die etwaigen Nachteile? Diese Fragen wollen wir in einer kleinen Serie von Blogeinträgen beantworten, indem der vergleichsweise junge Ansatz RESS mit dem klassischen RWD verglichen wird.

Im ersten Schritt möchten wir die beiden Konzepte definieren und die jeweilige Architektur dahinter vorstellen:

Definition Responsive Web Design (RWD)

Responsive Web Design bezeichnet ein Konzept, bzw. Vorgehensmodell, das die Ansätze wie liquid Design, Adaptive Images und Media Queries kombiniert, um abhängig vom Endgerät bzw. Browser die Darstellung der Webseite anzupassen.

Ziel ist es, eine Web-Ausgabe für alle Endgeräte zu realisieren. Die Web-Ausgabe wird dabei möglichst generisch gehalten – das heißt, dass es keine unterschiedlichen Prozesse auf den Endgeräten gibt und diese immer den vollen Inhaltsumfang erhalten. Der Browser des Endgeräts ermittelt und entscheidet „eigenständig“ welche Inhalte dargestellt werden. Diese werden via HTML5, Media Queries, JavaScript und CSS3 auf dem Client verarbeitet.

Architekturüberblick:

Bei der klassischen RWD Architektur wird aus den Backendsystemen ein einheitliches Frontend erzeugt, welches als Datenpaket einheitlich an die Endgeräte ausgeliefert wird. Es wird vollständig übertragen und auf dem Endgerät „ausgepackt“ und verarbeitet. Bei einer generischen Ausgabe werden die Prozesse aus dem Backend übernommen und endgeräteübergreifend dargestellt. Eine Adaption kann nur auf dem Endgerät erfolgen und setzt somit eine umfangreiche Applikationslogik im Frontend voraus. Hieraus ergeben sich Abhängigkeiten, die sich auf die Performance und Stabilität negativ auswirken.

Definition Responsive Web Design + server side components (RESS)

Bei RESS handelt es sich um eine Weiterentwicklung des klassischen RWD-Konzeptes hin zu einer RWD-Lösung mit serverseitigen Komponenten. Hier werden bestimmte Prozesse vom Server übernommen und damit der Browser entlastet, dazu gehören eine Clienterkennung, Aufbereitung und Modifikation von Bildern und die Anpassung der Inhalte. Durch diese serverseitigen Komponenten wird eine Client-Server-Kommunikation abgebildet, welche die spezifischen Eigenschaften des Endgeräts mit Hilfe einer Device Database ermittelt und mit dem Server austauscht. Somit ist der Server in der Lage die angefragten Inhalte endgerätespezifisch auszuliefern. Frontend- und Backendprozesse können sauber gekapselt werden – wodurch eine kontextabhängige Auslieferung an das Endgerät ermöglicht wird.

Bei der RESS Architektur wird in der Regel ein Progressive Enhancement Ansatz gewählt, um eine Basisversion für alle Endgeräte zu definieren. Aufbauend auf dieser Version wird mittels der Device und Feature Detection der Delivery Context ermittelt. Der Delivery Context setzt sich aus den folgenden Parametern zusammen: Hardwarehersteller, Betriebssystem und Browser inkl. der entsprechenden Version. Ausgehend vom jeweiligen Delivery Context kann der Server alle Features für das Endgerät unterstützen.

RESS_Chart_IllustrationB

Architekturüberblick:

Bei der RESS Architektur wird mittels der Device Database der Delivery Context aufgebaut, um Inhalte möglichst optimal für das jeweilige Endgerät aufzubereiten und auszuliefern. Durch die exakte Kenntnis der Eigenschaften des jeweiligen Clients werden nur die Elemente ausgeliefert, die vom Gerät dargestellt werden können. Dazu gehören zum Beispiel Bilder, die bereits auf dem Server passend skaliert wurden.

Damit wird nicht nur die Anzahl der übertragenen Daten deutlich reduziert sondern auch die Performance signifikant erhöht. Zudem müssen auf dem Gerät keine aufwendigen Prozesse gestartet werden – die rechenintensiven Operationen erfolgen ausschließlich auf dem Server. Dies führt zu einer schnelleren Übertragung, weniger Rechenleistung auf dem Endgerät und somit auch zu einem niedrigeren Stromverbrauch.