Die Renaissance des Web-Clients

Bernhard Steppan ist Leading Consultant bei der SYRACOM Consulting AG.
Seit dem Erfolg von Web 2.0 interessiert Entwickler vor allem, wie sie die Attraktivität ihrer Internet-Anwendungen steigern können. Doch wo liegt der Königsweg im Dschungel der Sprachen und Bibliotheken?
Frameworks wie Java Server Faces sind nach dem Prinzip "Model View Controller" aufgebaut und trennen eine Anwendung in einen Oberflächenanteil (Controller und View) sowie in die Geschäftslogik (Model).
Frameworks wie Java Server Faces sind nach dem Prinzip "Model View Controller" aufgebaut und trennen eine Anwendung in einen Oberflächenanteil (Controller und View) sowie in die Geschäftslogik (Model).

Die Revolution des Web 2.0 kam nicht über Nacht. Schon vor Jahren prophezeiten Auguren, dass Desktop-Anwendungen durch so genannte Rich-Internet-Anwendungen (RIA) abgelöst werden. Doch bis sich die entsprechende Technik durchsetzte, sollte noch einige Zeit vergehen. Zwar ist HTML schon seit langem in der Lage, sehr komplexe Oberflächen darzustellen. Bei stark dynamischen GUIs gab es anfangs allerdings zwei Hemmschuhe: Zum einen lässt sich der Technologie-Mix aus HTML-Oberflächen und prozeduralen Skriptprogrammen verglichen mit homogenen objektorientierten Desktop-GUIs viel schlechter entwickeln und warten. Der zweite Stolperstein bei der Umsetzung reichhaltiger Web-Oberflächen war, dass reine HTML-Seiten bei jeder noch so kleinen Änderung vollständig aufgebaut werden müssen. Je komplexer die HTML-Oberflächen wurden, desto zäher ließen sich die Anwendungen bedienen.

RIA: Vor- und Nachteile

-- Agile Anwendungen mit kurzen Reaktionszeiten;

- funktional reiche Web-Anwendungen;

- keine Installation notwendig;

- läuft in nahezu allen aktuellen Browsern.

- Unkonsolidierter Markt von Bibliotheken;

- Mehraufwand bei der Programmierung.

Zusammenspiel der Bibliotheken

Client- und Server-seitige Bibliotheken beziehungsweise Funktionen sind nach dem Teil der Client-Server-Anwendung benannt, von dem aus die Bibliotheksfunktionen ausgeführt werden. Im Fall von Client-seitigen Bibliotheken (oder ganz einfachem Javascript) wird das Leistungsspektrum des Web-Browsers (Client) erweitert, während Server-seitige Bibliotheken den Web-Server erweitern.

Beispiel Java Server Faces

Eine Server-seitige Bibliothek wie zum Beispiel Java Server Faces (JSF) erweitert den Web-Server um die Fähigkeit, die Web-Seiten eines Web-Clients dynamisch zu erzeugen. Das geschieht wie folgt: Aufgrund einer Anforderung (Browser-Request) erzeugt der Server mit Hilfe von Java-Klassen und JSP-Vorlagen eine entsprechende Web-Seite. Als Antwort (Response) wird diese Web-Seite vom Server auf den Client-Computer des Anwenders übertragen und danach vom Web-Browser konventionell interpretiert. Je nach Konfiguration des Web-Servers kann das JSF-Framework einen Web-Client erzeugen, dessen Seiten aus reinem HTML oder aus einem Gemisch aus HTML und Skripten bestehen. Das lässt sich nach Bedarf einstellen, zum Beispiel durch Zusatzbibliotheken (Tag-Libraries), die eine JSF-Anwendung um Ajax-Fähigkeiten aufwerten.

Der große Vorteil dieser Server-seitigen Technik ist, dass es dem Entwickler egal sein kann, wie der Web-Client letztendlich erzeugt wird, solange es zu keinen Darstellungsproblemen kommt. Er programmiert seine Web-Anwendung auf ähnlich komfortable Art und Weise wie eine Desktop-Anwendung und überlässt die Konfiguration der Anwendung dem Webmaster. Der Nachteil solcher Bibliotheken ist, dass der Web-Server hierzu funktional erweitert werden muss und daher eine Server-seitige Installation einer Bibliothek voraussetzt.

Würde man hingegen ausschließlich Client-seitige Bibliotheken oder Funktionen verwenden, wäre eine Installation von Bibliotheken auf der Server-Seite überflüssig. Das Verfahren ist in diesem Fall einfacher, da der Web-Server durch die Browser-Anforderung eine bereits bestehende Web-Seite überträgt. Der Web-Client liegt also schon in Form verschiedener Web-Seiten auf dem Server vor und muss nicht erst von einer Bibliothek ad hoc erzeugt werden. Die Bibliotheksaufrufe werden stattdessen in die HTML-Seiten des Web-Clients integriert und auf den Computer des Anwenders übertragen. Dort wird der Code wieder durch den Browser interpretiert und die HTML-Oberfläche des Web-Clients dargestellt (Rendering).

Mischung aus Client- und Server-Techniken

In der Praxis kommt es aber oft zu einer Mischung aus Client- und Server-seitigen Bibliotheken oder Funktionen. Erst im Zusammenspiel zwischen beiden Techniken lässt sich das gesamte Leistungsspektrum von Web-Browsern und Web-Servern ausreizen. Hierbei erzeugt eine Server-seitige Bibliothek wie Java Server Faces einen Web-Client, der eine Client-seitige Javascript-Bibliothek oder ganz einfach Javascript-Funktionen verwendet. Diese rufen wieder Server-seitige Funktionen auf.

Open Ajax Initiative

IBM und eine Reihe von anderen Unternehmen haben sich Anfang 2006 zur "Open Ajax Initiative" zusammengeschlossen. Mittlerweile gehören rund 30 Hersteller wie Dojo Foundation, Eclipse Foundation, Google, Mozilla (Firefox), Oracle, Red Hat, Zimbra und neuerdings auch Innoopract sowie Sun Microsystems der Initiative an. Ziel ist es, den mittlerweile unüberschaubaren Markt der Ajax-Bibliotheken zu konsolidieren und die Ajax-Unterstützung der Entwicklungswerkzeuge und Web-Browser zu verbessern.

Mehr zum Thema

www.computerwoche.de/

578598: Ajax-Entwicklung erobert Eclipse;

578675: Apache erleichtert die Web-Entwicklung

573517: Ajax verleiht Web-Anwendungen Flügel.

Weitere Links

Ajax-Javascript-Frameworks:

http://ajaxpatterns.org/Java script_Multipurpose_Frame works;

Ajax-Frameworks:

http://ajaxpatterns.org/Ajax_ Frameworks;

Java Server Faces und Dojo: http://java.sun.com/javaee/ javaserverfaces/ajax/tutorial. jsp;

Ajax-Frameworks für ASP.NET: http://ajaxpatterns.org/ DotNet_Ajax_Frameworks;

Atlas-Framework:

http://atlas.asp.net.

Netscape legte Grundstein

Als die Internet-Blase platzte, geriet auch das Thema Rich-Internet-Anwendungen in Vergessenheit. Dennoch reiften in dieser Zeit eine Reihe von neuen Web-Technologien. Im vergangenen Jahr haben sie schließlich einen Reifegrad erreicht, so dass sich die RIA-Entwicklung stark vereinfachte und in der Folge die Zahl derartiger Anwendungen sprunghaft anwuchs. Den Grundstein dieser Entwicklung legte Netscape bereits 1995 mit der Einführung von Javascript. Diese Client-seitige Programmiersprache sollte die Bedienung von Web-Anwendungen komfortabler gestalten und Server-Anfragen mit nicht ausreichend validierten Daten im Ansatz verhindern. Die Idee war einfach: Ein Miniprogramm in Form eines Skripts, das in einem HTML-Formular eingebettet ist, prüft im Browser die Benutzereingaben, bevor dieser die Anfrage zum Server weiterleitet.

Moderner Datentransport

Eine weitere Erfolgsgeschichte stammt von der erweiterbaren Auszeichnungssprache XML. Aus der komplizierten Sprache SGML hervorgegangen, schaffte es das einfach aufgebaute HTML-Derivat auf Anhieb, die Web-Gemeinde zu überzeugen, um als generelles Austauschformat zum Datentransport fast überall akzeptiert zu werden. Wichtig in diesem Zusammenhang ist die Programmierschnittstelle Document Object Model. Sie erlaubt es unabhängig von Programmiersprachen und Plattformen, das Dokument, das der Internet-Browser anzeigt, auf objektorientierte Weise zu verändern. So lassen sich Struktur und Inhalt der Web-Seite verändern - eine Grundvoraussetzung für den modernen Datentransport. Im Zusammenhang mit dem Document Object Model bilden Javascript und XML die Grundlage für ein innovatives Kommunikationsverfahren zwischen Web-Client und Web-Server.

Dieses Verfahren nennt sich Ajax (Asynchronous Javascript and XML) und ist eine der Basistechniken des Web 2.0. Sie kombiniert Javascript mit XML und geht weit über die Fähigkeiten einfacher Javascript-Funktionen hinaus, indem sie sich nicht nur auf simple Validierungen beschränkt. Der Clou an Ajax ist, dass nur die Teile einer HTML-Seite ausgetauscht werden, die notwendigerweise auch aktualisiert werden müssen. Dadurch, dass nicht permanent eine vollständige Seite aufgebaut werden muss, erreichen Web-Anwendungen ohne zusätzliche Browser-Plug-ins erstmals die Agilität von Desktop-Anwendungen.

Bibliotheken kapseln Funktionen

Um den Einbau von Ajax-Funktionen komfortabel zu gestalten, haben sich in kürzester Zeit eine Reihe von Ajax-Javascript-Bibliotheken etabliert, die auf der Client-Seite zum Einsatz kommen (siehe Kasten "Zusammenspiel der Bibliotheken"). Sie kapseln häufig benötigte Javascript-Funktionen, liefern Oberflächenbausteine, ja sogar komplette Dialoge und gleichen die Eigenheiten unterschiedlicher Browser aus. Ohne Eingriff in die Installation des Web-Servers funktioniert zum Beispiel das bekannte, von vielen namhaften Herstellern unterstützte Dojo-Toolkit. Diese quelloffene, extrem leistungsfähige Javascript-Sammlung liegt zwar erst in der Version 0.3.1 vor, ist aber den Kinderschuhen längst entwachsen.

Das Dojo- und Ajax-Toolkit

Dojo ist, wie von Java-Bibliotheken bekannt, übersichtlich in Paketen organisiert. Das Widget-Toolkit enthält unter anderem eine Sammlung von Oberflächenbausteinen wie sortierbare Tabellen, Registermappen (Tab Container), Bäume (Tree Widget), Datumsfelder, Menüs, Menüleisten und neuerdings sogar Schiebe- und Drehregler (Spinner). Ebenfalls verfügbar sind Standardvalidatoren, mit denen sich zum Beispiel die korrekte Syntax einer E-Mail-Adresse prüfen lässt. Die Javascript-Bibliothek wird fast allen Wünschen gerecht und deckt auch gehobene Anforderungen bei der Entwicklung von Rich-Internet-Anwendungen wie "Drag and Drop" und Internationalisierung ab.

Ein weiterer bekannter Vertreter von Script-Bibliotheken ist das "Ajax Toolkit", kurz AjaxTK genannt. Es stammt von Zimbra, das für seine gleichnamige Groupware und eine Reihe von Bibliotheken zur RIA-Programmierung bekannt ist. Das AjaxTK läuft ebenfalls vollständig im Browser. Die Skript-Sammlung gliedert sich in fünf Quelltext-Pakete: Config, Core, Debug, DWT, Events, Net, Soap, Util und XML. Das Paket DHTML Widget Toolkit (DWT) enthält Schaltflächen, Standarddialoge, Registermappen, komplexere mehrseitige Dialoge, Kalender-Widgets und sogar einen einfachen HTML-Editor. Das AjaxTK unterstützt verschiedene Web-Browser, Drag and Drop, XML-Datenmanipulation und bringt ein eigenes Event-Model mit.

Server-seitige Techniken

Neben den Client-seitigen Bibliotheken ist eine Reihe von Server-seitigen Techniken ebenfalls vorzüglich zur Entwicklung von Rich-Internet-Anwendungen geeignet. Die Bandbreite reicht von C++ über Coldfusion, .NET und Java bis zu Skriptsprachen wie Perl, PHP und Ruby. Aufgrund der leichten Erlernbarkeit gilt die Server-seitige Skriptsprache PHP als Favorit unter den Web-Entwicklern. Auch hier gibt es mittlerweile eine Vielzahl von Ajax-Bibliotheken. Xoad zum Beispiel ist eine objektorientierte PHP-Bibliothek. Sie ist momentan in der Version 0.6 für PHP 4 und 5 erhältlich, bietet Unterstützung von selbst entwickelten Widgets (Custom Controls) und allen gängigen Web-Browsern. Zum einfacheren Datenaustausch setzt Xoad auf die XML-Alternative JSON.

Wer eine etwas modernere Alternative zu PHP oder Schwergewichten wie J2EE sucht und die Mühen üblicher Web-Entwicklung überspringen möchte, sollte einen Blick auf die objektorientierte Skriptsprache Ruby werfen. Für den PHP-Herausforderer gibt es inzwischen ein leistungsfähiges Framework mit dem Namen Ruby on Rails (RoR). RoR folgt dem MVC-Pattern und unterstützt somit eine sehr saubere Schichtentrennung, was für eine leichte Wartung der Anwendungen spricht. Das Framework ist weit mehr als eine reine Web-Bibliothek, enthält es doch einen eigenen Web-Server und Funktionen für den Datenbankzugriff. Damit nicht genug, auch Ajax-Funktionen sind bereits integriert. Das bedeutet für den Entwickler, dass er Drag and Drop, weiche Überblendungen, Vergößern, Verkleinern und Ausblenden von Widgets sowie agile Validierungen schnell umsetzen kann.

Java mit Struts, JSF und Ajax

Wem Skriptsprachen wie Javascript, PHP oder Ruby suspekt sind, oder wer ohnehin schon eine Web-Seite mit Java-Technik betreibt, dem stehen jetzt endlich auch eine Reihe von leistungsfähigen Java-Bibliotheken zur Verfügung. Zwar ist Java durch die einstmals populären Applets eng mit dem Internet verknüpft, aber die schwachen Servlets und Java Server Faces vermochten es lange nicht, sich gegen einfach programmierte, skriptgestützte Web-Anwendungen durchzusetzen. Das hat sich grundlegend geändert.

Den Durchbruch als Programmiersprache für Web-2.0-Anwendungen verdankt Java vor allem Server-seitigen Bibliotheken wie Struts. Dieses mächtige Open-Source-Framework war eine Frischzellenkur für die betagten Servlets und Java Server Pages. Das Framework ebnete zudem den eng verwandten Java Server Faces den Weg. Mit Hilfe von einer der beiden Bibliotheken ist es für den Java-Entwickler um einiges leichter, anspruchsvolle Rich-Internet-Anwendungen zu entwerfen. Das liegt an dem sauberen Aufbau nach dem MVC-Muster und den vielen Oberflächenelementen, die dem Entwickler zur Verfügung stehen.

Mit Hilfe spezialisierter Entwicklungsumgebungen wie"Java Studio Creator" lässt sich diese Oberfläche visuell programmieren und so ausstatten, dass der Unterschied zur Desktop-Anwendung verschwimmt. Komplexe dynamische Elemente wie Baumstrukturen, Symbolleisten und Tabellen programmiert der Entwickler hierbei nicht zu Fuß mit einem HTML-Editor, sondern greift zu entsprechenden Java-Klassen. Für den Entwickler bedeutet dies, dass das Framework den korrekten HTML-Code für den Client selbst dynamisch erzeugt. Um Ajax-Funktionen hinzuzufügen, können Entwickler hierbei auf eine Vielzahl von Bibliotheken zurückgreifen.

Noch einen Schritt weiter geht die relativ neue Java-Bibliothek namens "Rich Ajax Platform" (RAP). Sie ist nicht dazu gedacht, nachträglich Struts- oder Faces-Anwendungen aufzupeppen, sondern von Grund auf neue Web-Anwendungen zu entwickeln. Diese sehen dann aus wie Desktop-Anwendungen, verhalten sich so und sind intern auch so aufgebaut. Die Entwickler des Frameworks haben mit der klassischen Web-Entwicklung fast vollständig gebrochen und sich an das RCP-Programmiermodell (Rich Client Platform) von Eclipse angelehnt. Der Web-Entwickler arbeitet an seiner Rich-Ajax-Anwendung also nur mehr mit Klassen und Objekten - Tag-Bibliotheken und HMTL-Codierung sind passé.

Die Google-Bibliothek

Das "Google Web Toolkit" (GWT) ist eine weitere Alternative für Java-Entwickler, ihre Web-Anwendungen konform zu den gestiegenen Erwartungen der Benutzer zu gestalten. Die Google-Bibliothek weist einige Parallelen zur Rich Ajax Platform von Innoopract auf und ist ebenso nicht dazu gedacht, vorhandene Java-Web-Anwendungen aufzupeppen. Die Oberfläche der Web-Anwendung wird auf der Server-Seite entwickelt und besteht vollständig aus Java-Klassen. Diese erzeugen die einzelnen HTML-Seiten des Web-Clients. Die Web-Seiten bestehen zwar aus HTML und Javascript, mit diesem Code kommt der GWT-Entwickler jedoch nicht in Berührung.

Microsofts Weg

Zwar ist ASP.NET von der breiten Unterstützung, die Java oder PHP erfährt, noch meilenweit entfernt, mittlerweile stehen aber auch Microsoft-Anwendern eine Reihe von zusätzlichen Ajax-Bibliotheken zur Verfügung. Am interessantesten dürfte das von Microsoft selbst vorangetriebene Atlas-Projekt sein. Atlas besteht aus Client- und Server-seitigen Komponenten. Die Client-seitigen Skripte steuern die grafische Oberfläche und rufen Server-basierende Komponenten auf oder umgekehrt: Die Server-seitigen Komponenten erzeugen Web-Seiten mit eingebetteten Client-seitigen Skripten.

Die Client-seitigen Atlas-Bibliotheken enthalten eine Reihe von Komponenten für die Unterstützung von Drag and Drop, Textfelder mit Autokomplettierung, datensensitive Listenfelder sowie Navigationshilfen. Auf der Server-Seite liefert Atlas Schaltflächen, Kontrollfelder und Validierer. Sie dienen dazu, die manuelle Programmierung auf der Client-Seite zu vermeiden, indem HTML-Code automatisch erzeugt wird. (ue)