Die technische Basis des Web 2.0: Rich Internet Applications

Seit einigen Jahren ist das Begriff des Web 2.0 in aller Munde. Webdienste wie MySpace, Facebook, Twitter oder YouTube sind Prototypen des sozialen Netzwerkens, die gesellschaftlich vermutlich den größten Teil der Definition des Web 2.0 ausmachen. Technisch gesehen hat sich auf den ersten Blick in den letzten 15 Jahren wenig getan: Webseiten werden weiterhin in der Seitenbeschreibungssprache HTML dargestellt (mehr und mehr durch Cascading Style Sheets ergänzt), das Anwendungsprotokoll lautet immer noch HTTP und zur Anzeige von Websites werden weiterhin Webbrowser verwendet. Doch das Konzept von Webseiten hat sich geändert: Während im (informellen) Web 1.0 Inhalte lediglich dargestellt und präsentiert wurden, liegt der Fokus nun auf Interaktion und die Einbringung der Inhalte der Nutzer. Durch die Interaktion des Nutzers werden auch an die Webdienste höhere Anforderungen gestellt; sie dürfen Inhalte nicht mehr nur darstellen, sie müsse die Inhalte veränderbar machen. Websites dürfen sich also nicht mehr „gedrucktes Papier auf dem Monitor“, sondern interaktive Anwendungen sein. Diese müssen schnell (wenig Traffic), skalierbar (Stichwort: mobiles Internet) und dynamisch sein.

Der folgende Text ist ein Auszug aus einer Ausarbeitung, die ich für den Vertiefungskurs „Spezielle Techniken der Rechnerkommunikation“ an der Humboldt Universität zu Berlin geschrieben habe.

Rich Internet Applications

Rich Internet Applications stellen eine Möglichkeit dar, Webinhalte in Form von „Desktop-Anwendungen“ anzubieten. Dabei orientieren sich diese Websites häufig an dem für die Nutzer bekannten Bedienungsparadigma wie Dropdown-Menüs oder Tastenkürzel.  Rich Internet Applications sind lediglich von dem verwendeten Browser abhängig, müssen somit nicht installiert werden und sind unabhängig vom verwendeten Betriebssystem. Dadurch wird es dem Nutzer möglich, die Anwendung sowohl zu Hause an seinem Desktop-PC zu verwenden, die Arbeit unterwegs auf seinem Smartphone fortzusetzen und sie im Büro abzuschließen. Es ist sogar durch intelligente Programmierung möglich, dass eine RIA auch offline funktioniert und bei der nächsten Verbindung zum Netz synchronisiert wird. So kann auch während Funklöchern im mobilen Betrieb weiter gearbeitet werden. Der Client des Anwenders wird somit nicht mehr nur zur Darstellung von Inhalten verwendet, stellt nun auch durch entsprechende lokale Scriptsprachen einen Teil der Funktionalität zur Verfügung. Ferner kann durch Antizipieren der Anwendungsfolgen ein Prefetching der Inhalte durchgeführt und gewisse Dateien vorab geladen werden. Die Arbeitslast des Webservers wird dadurch reduziert, die Last des Clients aber erhöht.

Das Problem namens HTTP

Das Hypertext Transfer Protocol, der Standard für die Übertragung der Dateien im World Wide Web, wurde 1989 u.a. von Roy Fielding und Tim Berners-Lee entwickelt. 20 Jahre lang hat sich in der Entwicklung des Protokolls wenig getan – lediglich persistente Verbindungen werden seit 1999 durch HTTP 1.1 unterstützt. Dadurch können während einer Verbindung mehr als nur ein Objekt vom Server zum Client übertragen werden. HTTP war und ist weiterhin aber zustandslos, d.h. dass nach der Übertragung der Daten die Verbindung geschlossen wird. Ein Session-Management wird schwierig und ist nur durch Umwege zu realisieren. Drei Methoden werden in der Praxis häufig verwendet:

  • Versteckte Elemente in Formularen
    Die Navigation auf einer Website erfolgt lediglich durch HTML-Formulare. In das Formular wird als verstecktes Element die Session-ID eingebaut und durch Absenden des Formulars übermittelt.
  • Cookies
    Cookies sind kleine Textdokumente, die auf dem Client-Computer gespeichert werden. In diesen Textdokumenten wird die Session-ID gespeichert. Bei jedem Aufruf einer Datei auf einem Server wird im HTTP-Header die für den Server entsprechenden Cookies mitgeschickt. Der Server kann dadurch jede Anfrage einer Session zuteilen.
  • URL-Rewriting
    Verlinkungen auf der Website werden durch ein Serverskript entsprechend modifiziert, sodass diese eine eindeutige Session-ID übergeben. Aus http://server/file wird beispielsweise http://server/file?session=123.

Die drei vorgestellten Methoden haben alle entsprechende Vor- und Nachteile, auf die hier nicht weiter eingegangen wird.

Ein weiteres, für Rich Internet Applications gravierendes Problem ist die jeweils notwendige Neuübertragung von Inhalten. Soll auf einer Website nur ein Zeichen geändert werden, so muss das komplette HTML-Dokument erneut übertragen werden. Dadurch entsteht ein unnötiger Datentransfer, der sowohl Kosten für den Client als auch den Server impliziert. Neben des entstandenen Traffics wird vom Client auch ein Neu-Rendering der Seite gefordert, was besonders bei kleinen, mobilen Geräten zu unnötigen Verzögerung führt. Ein komplettes Neuladen einer Seite entspricht auch nicht dem klassischen Look & Feel von Anwendungssoftware; analog wäre der Klick auf einen Menüpunkt in einer Desktop-Software ein Neustart einer Applikation, die erst dann das gewünschte Untermenü anzeigen würde.

Javascript als Teil der Lösung

Javascript ist eine Scriptsprache, die seit Mitte/Ende der 1990er Jahre immer mehr Verbreitung im Internet fand. Als „LiveScript“ wurde Javascript das erste Mal im Netscape Navigator 2.0 im Jahr 1995 eingesetzt. Sie wird somit durch den Webbrowser auf dem Client interpretiert. Die Einbindung erfolgt direkt im HTML-Code durch das <script>-Tag. Zwar ist der Syntax ähnlich zu Java, dennoch existieren einige wichtige Unterschiede: Variablen werden dynamisch typisiert (eine Variable kann somit z.B. erst ein String, dann ein Integer sein), Strings können zur Laufzeit als Code ausgewertet werden (eval(„2+2“)) und Javascript bietet keine Objektorientierung im Sinne von Klassen (stattdessen werden Prototypen eingesetzt). Als Alternativen zu Javascript versuchte Microsoft Ende der 1990er erfolglos JScript und VBScript durchzusetzen.

Durch das Document Object Model (DOM) von HTML ist es Javascript möglich, auf Elemente in einem Dokument zuzugreifen und auch manipulieren zu können. Das folgende Beispiel zeigt die Änderung eines Textabschnittes.

<html>
<head>
<script type="text/javascript">
function aendern() {
document.getElementById('absatz').innerHTML = '<b>Neu!</b>';
}
</script>
</head>
<body>
<p id="absatz"><i>Alt.</i></p>
<p><a href="javascript:aendern()">Aus Alt mach Neu.</a></p>
</body>
</html>

Doch Javascript allein ist nicht ausreichend für den Einsatz von Rich Internet Applications. Die entsprechenden Funktionen können nicht auf Dateien auf dem Server zugreifen; auch Zugriffe auf Datenbanken sind nicht möglich und erfordern einen klassischen Neuaufruf der Website. Da sich Javascript im Browser deaktivieren lässt, ist dies das zentrale Problem beim Einsatz der Scripttechnologie. Provoziert wird das Ausschalten durch den Anwender durch den häufig störenden Haupteinsatz von Javascript: das Öffnen von Werbe-Popups. Auch die Performance des Clients kann nicht gewährleistet werden, ebenso gibt es weiterhin Kompatibilitätsprobleme bei verschiedenen Webbrowsern. Sicherheitsrisiken entstehen ebenso durch die künstliche Überlastung des Webbrowsers (Endlosschleifen) oder das sogenannte Spoofing. Dazu folgendes Beispiel, das den Aufruf einer Phishingseite verschleiert.

<a href="http://boese-phishing-seite.com"
onmouseover="window.status='http://www.deutsche-bank.de'">>Onlinebanking</a>

Die Lösung: AJAX?

Seit einigen Jahren ist der Trend für moderne Websites der Einsatz von AJAX. AJAX (Asynchronous JavaScript And XML) ist keine neue Technologie, sondern nur eine Kombination bereits existierender Technologien: HTML und CSS werden weiterhin zur Seitendarstellung benutzt, welches durch Javascript und das entsprechende DOM manipuliert werden kann.  Neu ist, dass per Javascript ein HTTP-Request durchgeführt wird, bei dem ein serverseitiges Script aufgerufen wird, dass per XML Daten zurück an Javascript liefert. Der Austausch muss nicht zwingend per XML erfolgen, einfacher Text oder ein beliebiges textbasiertes Format (CSV, JSON, …) sind ebenfalls möglich. Die Hauptidee von AJAX basiert darin, dass asynchrone Aufrufe von Javascript an den Webserver genutzt werden um Inhalte der aktuellen Seite dynamisch zu ändern. Dadurch werden nur die notwendigen Inhalte (Daten) geladen und unnötiger Traffic vermieten, da die komplette Seitenstruktur (Darstellung) bereits auf den Client geladen wurde. Folgerichtig sind auch Standard-GUI-Operationen wie Drag & Drop möglich – ein wichtiges Kriterium für Rich Internet Applications.

Folgende Schritte sind für eine AJAX-Implementierung per Javascript notwendig:

  1. Erzeuge ein XMLHttpRequest-Objekt (Browser-API).
  2. Rufe die Funktion open(METHODE, URL) des XMLHttpRequest-Objekts auf. Übergebe dabei die entsprechende Methode (Post/Get) und die URL des serverseitigen Scripts.
  3. Gib an onReadyStateChange des Objekts eine Event-Handler-Funktion an.
  4. Rufe send(DATEN) des Objekts auf und übergebe ggf. weitere Post-Daten (ansonsten: „null“)
  5. Es wird serverseitiges Script unter URL aufgerufen.
  6. Der o.g. Event-Handler wird beim Empfang aufgerufen.; readyState gibt Response Code an, über ResponseText lässt sich die Rückgabe auswerten und dann beispielsweise per DOM der Inhalt der Seite ändern.

Die Implementierung ist somit relativ einfach und ist auch Grund für die schnelle und weite Verbreitung der Technologiesammlung. Ob AJAX allerdings nur eine Modeerscheinung ist, bleibt abzuwarten. Aber AJAX bringt auch mögliche Probleme mit sich: da die Inhalte dynamisch geändert werden, ist das Setzen von Bookmarks im Webbrowser nicht trivial, ebenso der History-Support (Vor- und Zurückbutton) und die Indizierung durch Suchmaschinen. Auch die Webseitenanalyse (Pagehits/-impressions) ist schwieriger und die Barrierefreiheit möglicherweise nicht gewährleistet. Zentral ist auch bei AJAX: Javascript muss aktiviert sein!

Die Alternative Flash vs. HTML5

Vor allem durch den Siegeszug von YouTube ist Adobe Flash von Desktop-Computern nicht mehr wegzudenken, da es ein de-facto Standard für die Wiederabe von Videos auf Websites wurde. 97% der Desktopcomputer besitzen einen Browser mit Flash-Plugin und ist somit deutlich verbreiterte als die Alternativen Microsoft Silverlight oder JavaFX. Die proprietäre Entwicklungsumgebung, ursprünglich von der Firma Macromedia seit 1997 entwickelt, bietet eine multimediale Erweiterung für Webinhalte. Während es zu Beginn hauptsächlich für Animationen und „Intro-Filmchen“ benutzt wurde, wird es momentan als Umgebung für Rich Internet Applications benutzt, da es mit ActionScript eine mächtige Scriptsprache bietet.

Doch das Hauptargument der einfachen Videoeinbindung wird zunehmend entkräftet. HTML5, das noch nicht vollkommen offiziell verabschiedet wurde, bietet die direkte Einbindung von Video- und Audioelementen. Ebenso bietet das neue <canvas>-Tag im Zusammenhang mit Javascript viele Möglichkeiten, Animationen zu realisieren. Da Apple auf den mobilen Geräten iPhone, iPod Touch und iPad keine Flashunterstützung anbieten und sich die Geräte immer mehr verbreiten, ist der weitere Erfolg von Flash äußerst fragwürdig.

Quellen

/von