Seminararbeit am Lst. Medieninformatik mit dem Thema Web 2.0 - serverseitige Ajax Frameworks
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Seminararbeit am Lst. Medieninformatik mit dem Thema Web 2.0 - serverseitige Ajax Frameworks Michael Fischer 31. März 2008
Inhaltsverzeichnis Inhaltsverzeichnis 1 Einleitung 4 2 Motivation 4 2.1 Probleme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.1.1 Browserinkonsistenzen . . . . . . . . . . . . . . . . . . . . . . . . 5 2.1.2 Verwaltungsaufwand . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.1.3 Fachkenntnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2 Lösungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.2.1 Richtlinien und Entwurfsmuster . . . . . . . . . . . . . . . . . . . 6 2.2.2 Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3 serverseitige Frameworks 9 3.1 Direct Web Remote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.1 Allgemeine Beschreibung . . . . . . . . . . . . . . . . . . . . . . 9 3.1.2 Technische Beschreibung . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.3 Vor- und Nachteile . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3.1.4 Anwendungsbeispiele . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.2 Google Webtoolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.2.1 Allgemeine Bescheibung . . . . . . . . . . . . . . . . . . . . . . . 12 3.2.2 Technische Beschreibung . . . . . . . . . . . . . . . . . . . . . . . 13 3.2.3 Vor- und Nachteile . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.2.4 Anwendungsbeispiele . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.3 Xajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 3.3.1 Allgemeine Beschreibung . . . . . . . . . . . . . . . . . . . . . . 15 3.3.2 Technische Beschreibung . . . . . . . . . . . . . . . . . . . . . . . 15 3.3.3 Vor- und Nachteile . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.3.4 Anwendungsbeispiele . . . . . . . . . . . . . . . . . . . . . . . . . 17 4 Schlusswort 18 4.1 weitere nützliche Frameworks . . . . . . . . . . . . . . . . . . . . . . . . 18 4.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2
Inhaltsverzeichnis Abkürzungsverzeichnis Ajax Asynchronous JavaScript and XML API Application Programming Interface ASP Active Server Pages CSS Cascading Style Sheets DOM Document Object Model DWR Direct Web Remote GWT Google Webtoolkit HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol Id Identification MVC Model View Controller PHP Hypertext Preprocessor, ursprünglich Personal Home Page SaaS Software as a Service Sajax Simple Ajax SWT Standard Widget Toolkit XHTML Extensible Hypertext Markup Language XML Extensible Markup Language XSRF Cross Site Request Forgery XSS Cross Site Scripting 3
1 Einleitung 1 Einleitung Über den Begriff Web 2.0 gibt es viele unterschiedliche Ansichten und Meinungen. Für Tim O’Reilly, Inhaber des O’Reilly Verlags, ist Web 2.01 das Internet der Plattformen, bei dem eine kollektive Intelligenz entsteht und die Daten immer mehr an Bedeutung zunehmen. Das Web 2.0 wird als eine neue revolutionäre Sache beschrieben. Auf der technologischen Ebene dagegen gibt es keine ergreifend neue Technologien, sondern durch die richtige Mischung der bereits bestehenden Techniken können die Aspekte des Web 2.0’s implementiert werden. Die wichtigsten Technologien hierfür sind JavaS- cript, DOM, CSS und das XMLDocument oder XMLHttpRequest 2 . Die Verwendung dieser Technologien nennt sich kurz Ajax und bezeichnet ein Konzept der asynchro- nen Datenübertragung zwischen einem Server und dem Browser des Besuchers, das es ermöglicht, innerhalb einer HTML Seite eine HTTP Anfrage durchzuführen, ohne die Seite komplett neu zu laden. Hierbei entwickelt sich für den Benutzer ein inter- aktives Erscheinungsbild wie bei einer Desktopanwendung und der Traffic wird für den Anbieter verringert. Aufgrund dieser Besonderheiten stellt Ajax einen wichtigen Bereich im Web 2.0 dar. Die Implementierung von Ajax erfordert jedoch umfangrei- ches Wissen und viel Aufwand. Zur Vereinfachung und schnelleren Realisierung von Webanwendungen gibt es viele Ajax Frameworks. Diese werden in client- und serversei- tige Frameworks eingeteilt. Ich beginne mit einer Motivation, mit der ich die Vorzüge der Frameworks schmackhaft machen will, bevor ich später drei bestimmte serversei- tige Frameworks erläutern und vergleichen werde. Zum Abschluss werde ich weitere erfolgreiche und nützliche Frameworks nennen und einen Ausblick zu diesem Thema abgeben. 2 Motivation 2.1 Probleme Besonders durch die Verwendung und Kombination der verschiedenen Technologien bringt Ajax sehr viele Hindernisse hervor. Ich werde im Folgenden auf die wichtig- sten Probleme einer korrekten Implementierung eingehen. Wer sich mit tiefergehenden Aspekten der Ajax Programmierung auseinandersetzen möchte, dem empfehle ich das Buch Ajax in Action, einem Entwicklerbuch für das Web 2.0, mit welchem ich die wichtigsten Probleme von Ajax Anwendungen kurz erläutere.3 2.1.1 Browserinkonsistenzen Im Internet befindet sich eine große, unüberschaubare Anzahl von Standards wie zum Beispiel XML, CSS oder HTML. Diese werden von Webbrowsern wie dem Internet Explorer, Mozilla und Firefox zum größten Teil vollständig interpretiert. Jedoch sind einige Standards vage, werden von Webbrowsern unterschiedlich interpretiert und die Interpretationen können sich durch neue Browserversionen ändern. Der Vergleich der verschiedenen Browser auf eine korrekte Interpretation der eigenen Webseite ist dadurch für Programmierer eine der unangenehmsten Tätigkeiten überhaupt. Ich 1 vgl. [O’R05] 2 http://www.w3.org/TR/XMLHttpRequest/, Abrufdatum: 31.03.2008 3 vgl. [DC06] Seite 97 ff. 4
2 Motivation werde kurz ein paar Beispiele vorführen. Für den Internet Explorer ist es ausreichend Objekte des Document Object Model mit dem Attribut name zu benennen. Mit der Methode getElementById() greift der Internet Explorer korrekt auf das entsprechende Objekt zu, sofern es im DOM vorhanden ist. Die Methode sollte jedoch bei einer korrekten Interpretation nur das Element zurückgeben, welches die entsprechende Id besitzt. Nach dieser Interpretation geht Firefox vor. Bestimmt der Programmierer nur das Attribut name, findet Firefox kein passendes Element. Firefox sucht nur nach der Id der Elemente welche mit dem Attribut id bestimmt werden können. Das gleiche Benennen der Attribute id und name wird empfohlen. Ein weiteres Beispiel stellt die Funktion @import innerhalb einer CSS Datei dar, mit welcher eine weitere CSS Datei eingebunden werden kann. Die Funktion wird nicht von allen Browsern unterstützt und führt so bei veralteten Browserversionen zu verschiedenen Layout Ergebnissen. Die beiden nicht standardmäßigen Erweiterungen XMLDocument und XMLHtt- pRequest, welche für die Verwendung von Ajax von großer Bedeutung sind, werden von vielen, aber nicht von allen Browsern unterstützt. Mindestens eines von beiden sollte für die Verwendung von Ajax vorhanden sein. Mit diesen Objekten ist es möglich im Hintergrund Daten, hauptsächlich das XML Datenformat, auszutauschen. Bevor der Programmierer mit der Entwicklung seiner Anwendung starten kann, muss er herausfinden, welches Objekt verfügbar ist um danach auf dieses zuzugreifen. Es kann vorkommen, dass keines von beiden unterstützt wird. Dann könnte man diese Technologie nicht nutzen und müsste auf die veraltete Technik mit Iframes zurückgreifen. Der standardmäßige Zurück Button eines Webbrowsers, mit welchem der Besu- cher zu der vorherigen Seite gelangt, bereitet bei Ajax Anwendungen noch große Probleme, da durch Ajax eine Seite nicht neu geladen sondern lediglich aktualisiert wird. Da der Zurück Button nur neue Seitenaufrufe registriert und bis jetzt noch keine Ajax Ereignisse, führt er bei Ajax Anwendungen häufig zum Beginn der Anwendung oder zu einem Ort, von dem der Besucher schon mehrere Klicks oder Eingaben entfernt ist. Der Entwickler hat die Möglichkeit sich darum zu kümmern, an welche Stellen der Button springen soll. Dies ist aber mit Zeit- und Arbeitsaufwand verbunden. 2.1.2 Verwaltungsaufwand Mit Ajax ist die Größe der Quelldateien von Anwendungen deutlich angestiegen. Im Vergleich zu ursprünglichen Applikationen wird viel mehr Javascript benötigt um das DOM zu manipulieren und die Verbindung von Client zu Server und umgekehrt herzustellen. Es wird sowohl client- als auch serverseitig programmiert und die Schnittstellen müssen übereinstimmen. Änderungen an der Ajax Applikation benötigen im Vergleich zu früheren Applikationen ohne Ajax mehr Aufwand und sind um einiges komplexer. Ordnung ins Chaos zu bringen sollte für Entwickler eine hohe Priorität erhalten, damit der Überblick gewahrt bleibt und die Lust an der Programmierung nicht schnell verloren geht. JavaScript ist eine clientseitige Allzweckprogrammiersprache, die von verschiedenen 5
2 Motivation Sprachen abstammt, dadurch viele Möglichkeiten bietet und ohne Typisierungszwang besteht. Diese Gegebenheiten führen leider zu einer geringen Sicherheit für den Benutzer. Das hohe Aufkommen von JavaScript und die erwünschte Interaktivität der Benutzer erschweren die Sicherheitsvorkehrungen. Vor der Veröffentlichung einer größeren Anwendung gilt es umfangreiche Sicherheitstests durchzuführen und auf eine korrekte Funktionalität zu achten. Nicht zu selten werden Sicherheitslücken, besonders durch XSS 4 , entdeckt und böswillig ausgenutzt. 2.1.3 Fachkenntnisse Für die Erstellung einer Ajax Applikation reicht das Wissen vom Umgang mit XHTML und einer Programmiersprache wie Java oder PHP bei weitem nicht aus. Der Entwick- ler muss mit den vier im ersten Kapitel genannten Technologien und einer server- seitigen Programmiersprache vertraut sein vor dem Erstellen einer Ajax Applikation. Für eine professionelle Applikation im kommerziellen Betrieb ist es zudem notwendig Erfahrungen mit Ajax Anwendung gesammelt zu haben. Zu groß ist die Gefahr vor erzeugten Sicherheitslücken durch fehlerhaften Quellcode und Unerfahrenheit. 2.2 Lösungen 2.2.1 Richtlinien und Entwurfsmuster Die beschriebenen Probleme können mit Entwurfsmustern weitestgehend gelöst wer- den. Entwurfsmuster sind Lösungsansätze für bestimmte Entwurfsprobleme, die häufig während der Entwicklung auftreten. Mit diesen wird zusätzlich die Qualität und Ord- nung während der Programmierung verbessert und die Entwickler erleichtern sich Ihre Arbeit. Ich gehe auf die wichtigsten Muster für die Erstellung von Ajax Applikationen ein und auf das MVC Prinzip. Für detailliertere Informationen über Entwurfsmuster empfehle ich die Seminararbeit über Entwurfsmuster von Carsten Thelen und Jan Philipp Seng.5 Muster Adapter und Fassade Auf die Erweiterungen XMLDocument und XMLHttpRequest wird mit unterschied- licher Syntax zugegriffen. Der Entwickler muss überprüfen, welche Erweiterungen vorhanden sind und danach auf das unterstützende Objekt zugreifen. Für den Zugriff benötigt der Entwickler folglich verschiedene Funktionen. Hierbei sollte der Entwickler bei der Überprüfung die Unterstützung der Objekte testen und nicht die verschie- denen Browserversionen, da letztere Methode häufig aktualisiert werden müsste. Das Muster Fassade sorgt für den vereinfachten Zugriff auf eine fertige komplexe Schnittstelle mithilfe einer Funktion. Danach brauchen wir uns nicht mehr um die inneren Angelegenheiten der Erweiterungen zu kümmern. Hierfür schreiben wir zwei Funktionen, welche für uns die Überprüfungen durchführen. So bekommt man Zugriff auf die benötigte Funktionalität und kann über zwei vereinfachte Schnittstellen auf die Erweiterungen zugreifen. Das Muster Adapter, vergleichbar mit einem Stromadapter, der zwischen eine ausländische Steckdose und einem heimischen elektrischen Gerät geschaltet wird, sorgt dafür, dass uns beide Erweiterungen die gleiche Schnittstelle anbieten. Es wird 4 http://de.wikipedia.org/wiki/Cross-Site-Scripting, Abrufdatum: 31.03.2008 5 Für weitere Informationen siehe [CT04] 6
2 Motivation eine Schicht über einem der Objekte implementiert, die dieselbe API darstellt wie die andere Funktion. Haben wir beide Muster angewendet, können wir über eine simple Schnittstelle auf die Erweiterungen zugreifen und brauchen uns um die inneren Angelegenheiten vorerst nicht mehr sorgen. Muster Beobachter Da Ajax asynchrone Anfragen durchführt und JavaScript eine ereignisgesteuer- te Sprache ist, muss der Entwickler mit dem Auftreten von Ereignissen umgehen können. Bei einfachen Anwendungen ruft ein Ereignis wie ein Mausklick oder eine Tastatureingabe eine Funktion auf, die nach dem Aufruf bearbeitet wird. Bei großen Anwendungen werden mehrere Funktionen aufgerufen und es wird schnell komplex. Für eine übersichtliche Verwaltung der Aufrufe gibt es das Muster Beobachter. Der Entwickler fügt bei allen Ereignissen, die entstehen können, eine Liste durch beispielsweise einem Array an. Die Funktionen, die ausgeführt werden sollen und in diesem Fall Beobachter genannt werden, können sich in den entsprechenden Listen registrieren und wieder abmelden. Bei einem Ereignisaufruf werden so alle Methoden, die sich in der Liste befinden, aufgerufen. Jetzt ist die Zuständigkeit der Aufrufe geregelt und jede Funktion kann selbst bestimmen, bei welchen Ereignissen diese durchgeführt werden soll. Muster Singleton Objekte, von denen nur eine Instant existieren darf, werden als Singleton be- zeichnet. Singletons werden besonders für Internetanwendungen benötigt. Durch die komplexere Struktur von Ajax Anwendungen sieht ein Entwickler nicht an jeder Stelle, ob ein Objekt bereits instanziiert wurde. Für ihn ist es sinnvoll, dafür zu sorgen, dass die Objekte nur einmal verwendet werden können. In Java ähnlichen Sprachen wird der Objektkonstruktor verborgen und mit einer Getter Methode aufgerufen. Diese Methode überprüft, ob das Objekt bereits vorhanden ist, in diesem Fall wird das Objekt zurückgegeben, oder ob es noch erzeugt werden muss. In JavaScript funktioniert die Handhabung ähnlich, jedoch kann der Konstruktor nicht verborgen werden und daher muss der Programmierer aufpassen, dass immer die Methode getInstance aufgerufen wird und das Objekt nicht versehentlich mit dem Konstruktor aufgerufen wird. Bei der veralteten Methode mit Frames kann in JavaScript mit dem Verweis top be- ziehungsweise top.opener, mit dem auf das Dokument einer oberen Ebene zugegriffen werden kann, die Eindeutigkeit eines Singletons überprüft und bewahrt werden. Modell-Präsentation-Steuerung Das Prinzip Modell-Präsentation-Steuerung, im englischen MVC genannt, ist ein Architekturmuster, welches bei unseren Ajax Projekten für Übersicht und Struktur sorgen soll. Dadurch ist der Code einfacher zu entwickeln und leichter zu warten. Die Grundidee liegt in der Aufteilung in die Bereiche Modell, Präsentation und Steuerung. Die beiden erstgenannten dürfen nur von der Steuerung abhängen. Im Webbereich wird das Prinzip ähnlich angewendet. Das Modell ist für die Speicherung der Daten zuständig, die Präsentation sorgt für die Darstellung der Daten und Funktionen innerhalb des Webbrowsers und die Steuerung bearbeitet das Modell und aktualisiert die Präsentation gegebenenfalls. Abbildung 1 zeigt das Prinzip, wie es für Webanwendungen mit PHP, Smarty und einer SQL-Datenbank eingesetzt wird.6 6 Abbildung aus [DC06] Seite 131 7
2 Motivation Abbildung 1 — Das Prinzip Modell-Präsentation-Steuerung bei Webanwendungen mit PHP. Sie haben jetzt die wichtigsten Entwurfsmuster für Ajax kennengelernt. Diese werden innerhalb der meisten Frameworks verwendet und sind unabdingbar, wenn Sie sich dafür entscheiden Ajax Anwendungen selber zu schreiben, ihre Frameworks zu erwei- tern oder neben den Frameworks zusätzliche Ajax Komponenten in die Anwendung einzubauen. 2.2.2 Frameworks Die oben genannten Prinzipien erleichtern das Arbeiten mit Ajax deutlich, sind aber mit hohem zeitlichen Aufwand verbunden. Wer eine ebenso gute, deutlich einfache- re und schnellere Lösung sucht, sollte sich mit Ajax Frameworks beschäftigen. Diese sind ebenso nach den oben genannten Entwurfsmustern aufgebaut und ermöglichen das Arbeiten nach dem MVC Prinzip, da die Frameworks in den meisten Fällen von erfolgreichen und erfahrenen Entwicklern implementiert werden. Das Hauptziel von Frameworks ist die Erleichterung der Arbeit. Sie können schnell integriert werden und sind einfach zu erlernen. Der eigene Anteil an geschriebenem Quellcode verringert sich, da diese Aufgabe zum Teil von den Frameworks übernommen wird. Dank der Frame- works wird das zuvor benötigte Fachwissen auf Allgemeinwissen der Ajax Technologie verringert und die Entwickler können sich der Kernentwicklung der Anwendung wid- men, statt sich mit dem Schreiben von überflüssigem Quellcode zu beschäftigen. 8
3 serverseitige Frameworks 3 serverseitige Frameworks Ich stelle in diesem Kapitel drei serverseitige Frameworks vor und beschreibe sie ge- nauer. Hierbei lege ich großen Wert auf eine kritische Betrachtung der Frameworks und werde Vor- und Nachteile herausarbeiten sowie diese miteinander in Bezug stellen. Ich werde die Frameworks Direct Web Remote, Google Webtoolkit, und Xajax vorstellen. Bei der Auswahl der Frameworks habe ich besonders auf die Kriterien verwendete Programmiersprache, Bekanntheitsgrad, Einsatzgebiete, erhältliche Dokumentationen und öffentliche Communitys geachtet. Die genannten Frameworks scheinen mir an- hand dieser Kriterien die am besten geeigneten zu sein für einen Einsatz in der Praxis. Beispielsweise wird Direct Web Remote von großen Unternehmen eingesetzt und das Google Webtoolkit besitzt einen sehr hohen Bekanntheitsgrad. Das Wissen über die Frameworks habe ich hauptsächlich aus der Seminararbeit von Andre Langer7 , der Arbeit von Max Nagl und Andreas Hofmann8 , sowie den offiziellen Internetseiten über die Frameworks erhalten. 3.1 Direct Web Remote 3.1.1 Allgemeine Beschreibung Direct Web Remote 9 wurde von Joe Walker entwickelt und ist seit kurzem der Dojo Foundation, einer Open Source Stiftung, beigetreten, welche unter der Leitung von Alex Russel steht. Direct Web Remote ist in Java implementiert und derzeit in der Version 2.0 erhältlich. Grob beschrieben abstrahiert DWR vom Datentransfer zwischen der Client- und Serverseite und erlaubt dem Entwickler auf einer höheren Abstraktion zu arbeiten. DWR macht es möglich mit JavaScript Java Funktionen auf dem Webser- ver so aufzurufen, als wenn sie im Browser definiert wären. Hierfür sind die wichtigsten Komponenten von DWR der JavaScript Code, die Java Klassen und das Java Serv- let, welches für die Verbindung von JavaScript zu Java sorgt. DWR unterstützt alle aktuellen gängigen Browserversionen und bietet Informationen für ältere Versionen an. 3.1.2 Technische Beschreibung Ich werde das Grundkonzept anhand der Verson 1.1.4 erläutern und die wichtigsten Neuerungen der Version 2.0 vorstellen. Die folgenden Schematas zeigen ein Interakti- onsdiagramm der beiden Versionen und dienen zu einer übersichtlichen Erklärung.10 7 für weitere Informationen siehe [Lan07] 8 für weitere Informationen siehe [AH08] 9 http://getahead.org/dwr, Abrufdatum: 31.03.2008 10 Abbildungen aus http://getahead.org/dwr/overview/dwr, Abrufdatum: 31.03.2008 9
3 serverseitige Frameworks Abbildung 2 — DWR Version 1 Interaktionsdiagramm. Abbildung 2 beschreibt wie der Inhalt eines Auswahlfeldes, durch den Aufruf eines Ereignisses, abgeändert werden kann. Der Entwickler erzeugt die Java Klasse Ajax- Service und deren Methoden, dies entspricht der Anwendungslogik. Die clientseitige JavaScript Klasse AjaxService wird entsprechend der Java Klasse automatisch generiert. Der Entwickler kann die Methoden der generierten JavaScript Klasse benutzen, um die Methoden der Java Klasse auf dem Server aufzurufen. In diesem Beispiel wird nach einem Ereignis die serverseitige Methode getOptions durch die entsprechende gleichnamige clientseitige Methode aufgerufen. DWR übernimmt hierbei alle Bereiche, die mit Remoting verbunden sind. Nachdem die Methode auf dem Server durchgeführt wurde, wird der zurückgegebene Inhalt an die clientseitige Callback Methode populateList weitergegeben und diese aktualisiert die Auswahlliste. Entwickler müssen folglich für eine Ajax Anwendung mit DWR serverseitig in Java die Anwendungslogik erstellen, clientseitig in JavaScript auf die Java Methoden zugreifen und Callback Methoden schreiben, welche die Seite aktualisieren, nachdem die Java Methoden durchgeführt wurden. DWR stellt zudem nützliche Bibliotheken für das Aktualisieren der Homepage mit JavaScript bereit. Für Einstellungen des DWR Frameworks und die Sicherheit gibt es die Konfigurati- onsdatei dwrl.xml. In dieser Datei werden unter anderem alle Java Klassen definiert, die mit JavaScript verwendet und konvertiert werden dürfen. Kommen wir zu den wichtigsten Neuerungen der Version 2.0 11 . Abbildung 3 zeigt wie Nachrichten vom Server aus an Clients verschickt werden. Diese Technik nennt sich Reverse Ajax und DWR bietet hierfür die Methoden Comet, Polling und Piggyback an, wobei automatisch die geeignetste Methode ausgewählt wird. 11 http://getahead.org/dwr/changelog/dwr20, Abrufdatum: 31.03.2008 10
3 serverseitige Frameworks Abbildung 3 — DWR Version 2 Interaktionsdiagramm. Mit der JavaScript Proxy API ist es möglich durch eine Java API dynamischen JavaScript Code zu generieren. Da dieser Vorgang zur Laufzeit geschieht, ist diese Technik besonders reizvoll für dynamische Applikationen wie zum Beispiel Chat Sy- steme. Dadurch können clientseitige Frameworks, die hauptsächlich die Verwendung von JavaScript vereinfachen, in das DWR Framework eingebunden werden. DWR gibt als neues Feature ebenfalls eine verbesserte Sicherheit an. Besonders die Gefahren von XSS und dem derzeit neuen XSRF 12 werden laut dem offiziellen Changelog minimiert. Eine Überprüfung der Sicherheit habe ich aus zeitlichen Gründen nicht durchgeführt und es wird jedem Entwickler trotzdem empfohlen, seine Anwendung vor der Veröffentlichung gründlich zu überprüfen. 3.1.3 Vor- und Nachteile Da DWR erfolgreich vom Remoting abstrahiert, muss der Entwickler sich nicht um das XMLHttpRequest oder das XMLDocument kümmern und kann sich auf die Anwendungsapplikation konzentrieren. Ein großer Vorteil ist die schnelle und einfache Einbindung in bestehende Projekte. Die später genannten Anwendungsbeispiele zeigen, dass es sich für Entwickler lohnt, bestehende Projekte mit DWR zu erweitern. Insgesamt macht DWR einen professionellen Eindruck und legt bewusst großen Wert auf die Sicherheit. Mit dem Softwareentwickler TIBCO, welcher Partner von DWR ist und dem Beitritt der Dojo Stiftung dürfte eine zukünftige Weiterentwicklung sichergestellt sein. Wer mit DWR erfolgreiche Applikationen schreiben möchte, muss wissen, wel- che Funktionen die DWR Bibliothek bietet und wie man mit den Funktionen umgeht. Die serverseitige Programmierung der Anwendungslogik reicht nicht aus und der Entwickler muss sich ebenso um den clientseitigen Code kümmern. Das Framework 12 http://de.wikipedia.org/wiki/Cross-Site Request Forgery, Abrufdatum: 31.03.2008 11
3 serverseitige Frameworks Google Webtoolkit, welches im folgenden Kapitel beschrieben wird, hat für dieses Problem eine bessere Lösung und erzeugt sowohl JavaScript als auch HTML au- tomatisch. Für den Betrieb einer Anwendung ist ein Java Applikations Server und umfangreiches Java Wissen erforderlich. 3.1.4 Anwendungsbeispiele Die Entwickler von DWR präsentieren bemerkenswert große und bekannte Unterneh- men, welche ihr Toolkit benutzen. Die Beispiele von American Airline und Walmart zeigen den genannten Vorteil auf, dass DWR sehr gut in bestehende Applikationen eingebunden werden kann. American Airline 13 benutzt DWR für die Erweiterung ihres Suchformulares. Zuvor konnte der Besucher Flüge nach Flugplänen oder nach Preisen suchen. Mit DWR ist es nun möglich eine kombinierte Suche nach Preis und Flugplan durch- zuführen und spezielle Details über die Flüge zu sehen. Auch Walmart 14 hat DWR in seinen bestehenden Online Shop integriert. Be- findet sich der Besucher innerhalb einer bestimmten Kategorie, zum Beispiel bei den Polo Shirts für Jungen, werden die Produkte aufgelistet und der Besucher hat die Möglichkeit mit einer Schnellansicht, welche ohne Neuladen der Seite asynchron mit DWR geladen wird, die wichtigsten Details des Produktes anzusehen und direkt Eigenschaften des Produktes auszuwählen. Die Stadt New York benutzt DWR für die Erstellung ihrer Landkarte New York City Maps 15 . Die Landkarte besitzt die üblichen Zoomfunktionen und kann in jede Richtung verschoben werden. Zusätzlich ist es möglich zwischen einer Luftansicht oder Straßenansicht zu wählen sowie verschiedene Einrichtungen und öffentliche Stellen innerhalb der Map anzeigen zu lassen oder zu verbergen. 3.2 Google Webtoolkit 3.2.1 Allgemeine Bescheibung Mit den eigenen Entwicklungen wie Google Mail, Google Map oder Google Suggest ist die Firma Google ein Vorreiter der Ajax Technologie geworden. Im Juni 2006 bestätigten Sie ihre Positionierung und präsentierten das selbst entwickelte Frame- work Google Webtoolkit 16 . Die Hauptidee des Frameworks basiert auf der Vorstellung keinerlei Javascript verwenden zu müssen und zusätzlich hat Google darauf geachtet, dass Entwicklungsumgebungen eingesetzt werden können. Folgendes Zitat von Google beschreibt das Framework sehr gut. Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don’t speak browser quirks as a second lan- guage.16 13 http://www.aa.com, Abrufdatum: 31.03.2008 14 http://www.walmart.com/, Abrufdatum: 31.03.2008 15 http://www.nyc.gov/citymap, Abrufdatum: 31.03.2008 16 http://code.google.com/webtoolkit/, Abrufdatum: 31.03.2008 12
3 serverseitige Frameworks Das GWT ist derzeit in der OpenSource Version 1.4 erhältlich. Auf der offiziellen Ho- mepage gibt es sehr gute und zahlreiche Dokumentationen 17 sowie vorgefertigte Bei- spiele 18 als Vorschau und für den Einstieg in die Entwicklung von Ajax Anwendungen mit dem GWT. 3.2.2 Technische Beschreibung Der GWT Compiler stellt für das Framework die wichtigste Komponente dar. Nach- dem der Entwickler seine Anwendung in Java implementiert hat, übersetzt der GWT Compiler die erstellten Java Dateien automatisch in browserkonformes Java Script und HTML. Zum Unterstützen für die Entwicklung bietet GWT viele Erweiterungen an, die innerhalb der oben genannten Dokumentationen gut beschrieben sind. Für die Gestaltung sind Widgets und Panels zu verwenden. Ich werde hier auf die wichtigsten Erweiterungen eingehen und diese kurz beschreiben. Dank der JUnit Integration ist es möglich die Ajax Applikation wie herkömmli- che Anwendungen zu testen. Zusätzlich können Benchmarks durchgeführt und die Statistiken in einer Datei abgelagert werden. Für die Mehrsprachigkeit bietet Google verschiedene Techniken der Internationalisie- rung an. Wie bereits erwähnt sind für die grafische Gestaltung vorgefertigte Widgets und Panels verantwortlich. Diese sind ähnlich wie die Java üblichen Swing und SWT Komponenten aufgebaut und daher stellen sie für erfahrene Java Programmierer keine Umstellung dar. Die Panels bestehen aus automatisch erzeugtem HTML und verhalten sich bei allen gängigen Browserversionen gleich. Nachdem der Entwickler das GWT heruntergeladen hat, kann er sofort mit der Entwicklung einer Anwendung beginnen. Möchte der Programmierer eine Ent- wicklungsumgebung nutzen, erstellt er mithilfe von mitgelieferten Skripten die entsprechenden Projektvorlagen für die Entwicklungsumgebung. Während der Entwicklung ist der Hosted Mode für die Anzeige und das Testen der Applikation verantwortlich, welcher aus einer integrierten abgerüsteten Version des Apache Tomcat besteht. Nach Abschluss der Entwicklung wird anhand des erstellten Quelltextes mit dem GWT Compiler HTML und JavaScript Quelltext erzeugt. Diese Dateien mit Quelltext können danach auf einen Webserver hochgeladen werden. 3.2.3 Vor- und Nachteile Dank dem Google Webtoolkit kann sich der Entwickler vollständig auf seine Ap- plikation konzentrieren, hat nur serverseitigen Code, seine Anwendungslogik, zu schreiben und braucht sich nicht um HTML oder Javascript kümmern. Besonders die dadurch entstehenden Zeitvorteile sind ein großer Anreiz für die Entwicklung einer Anwendung mit dem GWT. Ebenso ist in Betracht zu ziehen, dass sich das GWT um die History Funktionen kümmert und der Entwickler den Zurück Button innerhalb der Ajax Anwendung richtig einstellen kann. Ein weiterer großer Vorteil stellt die Möglichkeit dar, die Applikation mit einer Entwicklungsumgebung durchzuführen. Die Programmierung erinnert so an Desktopanwendungen und für den Programmierer ergeben sich nützliche weitere Möglichkeiten wie zum Beispiel Debugging oder 17 http://code.google.com/webtoolkit/overview.html, Abrufdatum: 31.03.2008 18 http://code.google.com/webtoolkit/examples/, Abrufdatum 31.03.2008 13
3 serverseitige Frameworks Refactoring. Dank der Junit Integration können auch Unit Tests durchgeführt werden ohne einen Browser öffnen zu müssen. Aufgrund dieser Gegebenheiten eignet sich das GWT besonders für größere und komplexe Applikationen, bei denen der JavaScript Code sehr groß und unübersichtlich ist, sowie das Erstellen von neuen Applikationen. Die Hauptidee des GWT, so wenig JavaScript und HTML wie möglich zu schreiben, erscheint auf den ersten Eindruck sehr komfortabel und verlockend, hat aber auch negative Auswirkungen. Der Entwickler muss vorgefertigtes HTML verwenden und hat dadurch nur beschränkten Einfluss auf die Änderung von HTML und JavaScript. Es ergibt sich ein etwas starrer und unflexibler Eindruck bei der Gestaltung der Anwendung19 . Das JavaScript Native Interface, mit welchem selbst geschriebenes JavaScript eingebettet werden kann mildert diesen Eindruck nur wenig, da es umständlich wirkt, JavaScript innerhalb einer Java Anwendung zu erzeugen. Zudem eignet sich das GWT nicht für kleinere Projekte oder Erweiterungen in bestehende Projekte, da eine Integration in bestehende Projekte kaum möglich ist. Wer pro- fessionell mit dem GWT entwickeln will muss sich ähnlich wie bei dem Framework DWR mit den Erweiterungen auskennen und sich in diese einarbeiten. Diese Arbeit beansprucht viel Zeit bevor die Entwicklung starten kann. 3.2.4 Anwendungsbeispiele Die Firma Lombardi entwickelte mit GWT das Prozessmodellierungstool Blueprint 20 . Die Software, die mit den gängigsten Browsern funktioniert, erreicht die Funktiona- lität einer Desktopanwendung und hat darüber hinaus noch einige Web 2.0 Features wie zum Beispiel ein Wiki Interface und einen Chat. Laut Alex Moffat, Engineering Manger bei Lombardi wurden 28.500 Zeilen Java Code implementiert und dennoch ist die größte Datei mit 480 Kilobyte um einiges geringer als bei dem clientseitigen Framework Dojo 21 , bei dem die Dateien dieses Projektes bis zu einem Megabyte groß wären. Schon 120 Tage nach der Veröffentlichung nutzten über 750 Firmen und viele Einzelpersonen in 60 verschiedenen Ländern Blueprint. Für Iphones wurde ein RSS Feed Reader mit dem Namen Google Webtoolkit Feed Reader 22 erstellt. Die Technologie dieser Applikation besteht hauptsächlich aus dem GWT und der Google Ajax Feed API 23 , die es ermöglicht in wenigen Zeilen JavaScript oder automatisch mit einem Assistentenprogramm Feeds erstellen zu lassen. Dieses Beispiel zeigt, dass es möglich ist mit dem GWT auch Applikationen für mobile Endgeräte zu erstellen. Dabei ist dafür zu sorgen, dass auf die Begebenheiten eines mobilen Endgerätes geachtet werden muss. Es ist schwer eine einheitliche Applikation sowohl für einen normalen Webbrowser als auch für ein mobiles Endgerät zu erstellen. Der Entwickler hat sich für eine Technologie zu entscheiden oder stellt zwei verschiedene Versionen bereit. 19 vgl. [Mey06] Seite 45 20 http://blueprint.lombardi.com/,Abrufdatum: 31.03.2008 21 http://dojotoolkit.org/,Abrufdatum: 31.03.2008 22 http://groups.google.com/group/Google-Web-Toolkit/web/gwt-iphone-pretty-tasty, Abrufdatum: 31.03.2008 23 http://code.google.com/apis/ajaxfeeds/, Abrufdatum: 31.03.2008 14
3 serverseitige Frameworks 3.3 Xajax 3.3.1 Allgemeine Beschreibung Xajax 24 ist wie die zuvor genannten Frameworks Open Source und in der Program- miersprache PHP geschrieben. Für die Programmierung waren die Entwickler J. Max Wilson und Jared White verantwortlich. Xajax ist derzeit in der Version 0.2.5 und der vierten Beta Version 0.5 erhältlich. Der Unterschied im Bezug auf die Verwen- dung der beiden Versionen besteht hauptsächlich aus unterschiedlichen Begriffen der Methoden. Auch für dieses Framwork gibt es Dokumentationen und Tutorials 25 sowie eine lebhafte Community mit einem Forum 26 . Xajax wirbt mit folgendem Zitat und ermöglicht auch Programmierern ohne umfangreiches Wissen über Ajax, asynchrone Webanwendungen zu schreiben. xajax is easy! Just include xajax, register a function then add a call to the function in your HTML or javascript and see the result in the browser instantly!24 Für die Verwendung von Ajax muss nur die Ajax Bibliothek zu Beginn der PHP Datei eingebunden werden. Danach kann die Programmlogik und die Ajax Funktionalität in PHP geschrieben werden. Zum Abschluss werden die erstellten Ajax Funktionen in den PHP Dateien registriert. Das benötigte JavaScript wird bei Auslieferung automatisch erzeugt. 3.3.2 Technische Beschreibung Xajax wird, ähnlich zu dem Framework DWR, häufig dafür benutzt um eine beste- hende Applikation zu erweitern, beziehungsweise eine Anwendung zu erstellen, die nicht nur aus dem Framework Xajax besteht. Der Entwickler schreibt in PHP seine übliche Anwendung und kann nebenher Ajax Funktionen definieren, die in die Anwen- dung eingebunden werden. So hat der Entwickler die Möglichkeit selbst zu entscheiden an welchen Stellen er auf Ajax zurückgreifen möchte und wo er lieber herkömmliche Techniken verwendet. Ich werde die Vorgehensweise anhand eines Hallo Welt Beispieles erklären. Es folgt der Quelltext und danach eine detaillierte Beschreibung.
3 serverseitige Frameworks echo ’’; echo ’Drück mich’; ?> Am Anfang unserer Anwendung binden wir die Xajax Bibliothek mit dem Befehl requi- re once in unser Projekt ein. Danach können wir unsere gewöhnliche Anwendungslogik in der PHP Datei definieren. Für unser Beispiel wird nur eine Ajax Funktion und keine gewöhnliche Anwendungslogik benötigt. In der Zeile vier definieren wir unsere Funk- tion, die aufgerufen wird, wenn der Drück mich Button geklickt wird. Wir müssen immer ein Antwort Objekt erzeugen mit dem Konstruktor new xajaxResponse(). Mit diesem Objekt können wir das DOM manipulieren. In unserem Beispiel weisen wir dem Attribut innerHTML des Elementes divElem die Variable myWord, welche wir übergeben bekommen, mit der Methode assign, zu. Haben wir alle Aktualisierungen definiert, geben wir das Objekt zurück. Damit wir Xajax verwenden können, erstellen wir, nachdem alle xajax Funktionen definiert wurden, in der PHP Datei ein xajax Ob- jekt mit dem Konstuktor new xajax(). Diesem Objekt fügen wir mithilfe der Methode registerFunction alle Xajax Funktionen zu, welche wir geschrieben haben und verwen- den möchten. Zum Schluss geben wir mit der Methode processRequest an, dass die Ereignise vom Browser verarbeitet werden sollen. Xajax erzeugt für die Verwendung der serverseitigen Funktionen automatisch JavaScript Code. Diese werden am Ende der PHP Logik, jedoch vor dem Output von Text mit der Methode printJavaScript auf dem Xajax Objekt aufgerufen. Für den HTML Bereich erzeugen wir echo einen div Bereich mit der Id divElem und einen Button, der bei Betätigen die Funktion myExample aufruft und der Funktion den Text Hallo Welt übergibt. 3.3.3 Vor- und Nachteile Für die Verwendung von Xajax werden nur grundlegende Ajax Kenntnisse benötigt. Rudimentäres Wissen in HTML und JavaScript ist ausreichend um das Framework einzusetzen. Der Aufbau und die Verwendung des Frameworks ist einfach gehalten und die grundlegenden Methoden des Frameworks sind sehr schnell erlernt. Das Framework eignet sich besonders für den Einstieg in Ajax, ist aber auch für erfahrene Entwickler eine gute Möglichkeit um schnell und erfolgreich Ajax Anwendungen zu erstellen. Auch der Einbau in bestehende Projekte stellt für dieses Framework kein Problem dar. Das zusätzliche Einbinden der Xajax Bibliothek in die bestehenden PHP Dateien reicht aus, um mit dem Framework arbeiten zu können. Bei kleineren Erweiterungen der Applikation mit Ajax stellt der Zurück Button des Browsers kein großes Problem dar. Wenn aber ein größerer Teil der Anwendung mit Xajax geschrieben wurde, muss sich der Programmierer darum kümmern, dass der Zurück Button an die richtigen Stellen innerhalb der Anwendung springt. Dies kann bei großen Projekten zu unnötigem Quellcode und Zeitaufwand führen. Die Serverlast steigt, besonders bei Xajax, schnell an wenn eine Applikation sehr stark frequentiert ist. Xajax führt die Programmlogik ausschließlich serverseitig aus und dadurch wird der Webserver stark beansprucht. Es gibt andere Frameworks, die Bereiche der auszuführenden Programmlogik mit JavaScript auslagern und dadurch den Webserver entlasten können. Für Entwickler, die bereits tiefergehende Kenntnisse mit Ajax haben lohnt es sich für eine bessere Performance Ajax Bereiche einer Applikation selbst zu schreiben oder auf ein Framework mit einer tiefergehenderen Konfiguration zu wechseln. 16
3 serverseitige Frameworks 3.3.4 Anwendungsbeispiele Für die Verwendung von Xajax lassen sich keine größeren Firmenanwendungen als Anwendungsbeispiele finden, dafür mehrere kleine Applikationen von Hobby- entwicklern. Dies liegt hauptsächlich an der Programmiersprache PHP, die früher als Templatesprache diente und heute noch nicht an die Funktionalität von Java herankommt. Ich werde auf drei Beispiele eingehen und diese kurz erläutern. phpFreeChat 27 ist ein kostenloser und einfach zu verwaltender Chat mit PHP und Xajax erstellt. Xajax wird in dem Chat hauptsächlich für ein reibungsloses Ak- tualisieren und Anzeigen der Chatnachrichten verwendet. Das Projekt ist OpenSource und kann daher kostenfrei benutzt werden. Der Cocktail Builder 28 ist ein relativ kleines Projekt mit Xajax entwickelt, macht aber viel Spaß und zeigt die Ajax Vorzüge auf. Der Besucher der Seite hat die Möglichkeit seine Getränke, die er Zuhause in seiner Bar hat, einzugeben und es werden automatisch die geeignetsten Cocktails aufgelistet. Das Eingeben und die Anzeige der passenden Cocktails geschieht parallel und ohne Neuladen der Seite. Schnell hat man sich seine besten Cocktail-Rezepte herausgesucht und in seinen Favoriten gespeichert. 1atools.eu 29 ist ein Service für Webmaster, der Webtools für die eigene Homepage ko- stenlos zur Verfügung stellt. Xajax wurde im Nachhinein in den bestehenden Service, hauptsächlich für den Administrationsbereich der Webtools, eingebunden um den Be- suchern mehr Komfortabilität und die Möglichkeit Zeit zu sparen zu bieten. Im nicht eingeloggten Zustand wurde zum Beispiel der Login und die Registrierung mit Xajax entwickelt. 27 http://www.phpfreechat.net/, Abrufdatum: 31.03.2008 28 http://www.cocktailbuilder.com/,Abrufdatum: 31.03.2008 29 http://www.1atools.eu, Abrufdatum: 31.03.2008 17
4 Schlusswort 4 Schlusswort 4.1 weitere nützliche Frameworks Es gibt über 150 verschiedene Frameworks, unter denen die drei genannten Frame- works mit zu den Besten zählen. DWR besitzt geschätzt über 40.000 Entwickler und das GWT Framework wurde schon über eine Millionen mal heruntergeladen. Xajax ist in der Sprache PHP eines der beliebtesten Frameworks. Einige weitere nützliche Frameworks sind Sajax 30 , ASP.NET Ajax 31 und Ruby on Rails 32 . Sajax ist ein sehr kleines Framework, besitzt aber die Besonderheit, dass es mit mehreren Sprachen funk- tioniert, darunter PHP, Python, Perl und Ruby. ASP.NET Ajax ist ein Framework für das Erstellen von Ajax Anwendungen auf der Basis des Microsoft .NET 33 Frameworks und Ruby on Rails ist ein allgemeines Web Framework mit einer starken Orientierung zu Ajax. 4.2 Ausblick Webanwendungen werden aufgrund der zunehmenden Möglichkeiten und Attraktivität für Firmen immer bedeutender und nehmen schon jetzt einen großen Platz ein. Der Begriff SaaS stellt einen von vielen Vorteilen der Webanwendungen dar. Dabei wird die Bereitstellung, Betreuung und das Betreiben von Software als Dienstleistung gese- hen, die auf Internettechnologien basiert. Diese Technik bietet sowohl dem Benutzer als auch den Unternehmen viele Vorteile wie das automatische Aktualisieren der Soft- ware. Aber besonders die neuen Web 2.0 Anwendungen sind für Entwickler mit viel Aufwand verbunden, da sie sehr komplex sind. Ob es in Zukunft ein Web 3.0 gibt, wel- ches auf dem Web 2.0 aufbaut oder eine komplett neue Technologie darstellt, bleibt abzuwarten. Die rasche Weiterentwicklung der verschiedenen Technologien ist jedoch nicht aufzuhalten. Für Entwickler wird es schwierig werden bei allen Neuerungen auf dem neuesten Stand zu bleiben. Daher werden die Frameworks meiner Ansicht nach in Zukunft eine große Rolle einnehmen. Die Entwicklung von Anwendungen wird immer mehr von Frameworks abhängen, denn Sie erleichtern die Arbeit mit den verschiedenen Technologien und sparen Zeit ohne große Funktionalität zu verlieren. Wichtig ist es für Entwickler, sich gründlich zu informieren und sorgfältig ein passendes Framework unter vielen auszuwählen. Außerdem ist ein grundlegendes Wissen der Technologien, in diesem Fall von Ajax, trotz der Frameworks nicht zu vernachlässigen. 30 http://www.modernmethod.com/sajax, Abrufdatum: 31.03.2008 31 http://www.asp.net/ajax/, Abrufdatum: 31.03.2008 32 http://www.rubyonrails.org/, Abrufdatum: 31.03.2008 33 http://msdn2.microsoft.com/de-de/netframework/default.aspx, Abrufdatum: 31.03.2008 18
Literatur Literatur [AH08] Max Nagl Andreas Hofmann. Xajax - ein ajax-framework für php. Seminar- arbeit, HTWG Konstanz, 2008. [CT04] Jan Philipp Seng Carsten Thelen. Entwurfsmuster in java. Seminararbeit, RWTH Aachen, 2004. [DC06] Darren James Dave Crane, Eric Pascarello. Ajax in Action. Addison-Wesley Verlag, 2006. [Lan07] Andre Langer. Evaluierung von ajax-basierten frameworks für das web 2.0. Studienarbeit, Technische Universität Chemnitz, 2007. [Mey06] Sebastian Meyen. Ajax special. Zeitschrift, 2006. [O’R05] Tim O’Reilly. What is web 2.0. Artikel, September 2005. 19
Sie können auch lesen