Web-Entwicklung mit Ajax, Flash und Flex
Web-2.0-Trends

DeveloperIT-ProjekteSoftware

Häufig wird die nächste Webgeneration mit Ajax in einem Atemzug genannt. Doch intuitive Benutzerschnittstellen ohne Wartezeiten können auch ohne großen Programmieraufwand mit Flash und Flex entwickelt werden.

Weblogs, Wikis & Co.

Web-Entwicklung mit Ajax, Flash und Flex

Das ursprüngliche Konzept des World Wide Web ? auch Web 1.0 genannt ? basiert auf statischen HTML-Seiten, die ab und zu erneuert werden. Ein Stück weiter geht das heute vorherrschende Web 1.5 mit seinen dynamischen Webseiten, die sich mit Hilfe von Content-Management-Systemen und Datenbanken erzeugen lassen. Der amerikanische Buchverleger Tim O?Reilly, der den Begriff Web 2.0 geprägt hat, definiert die nächste Stufe so: »Web 2.0 bedeutet die Umwandlung des Internet von einer mehr oder minder zusammenhanglosen Sammlung von HTML-Seiten hin zu einer vollständigen Computerplattform, die Anwendungen und Daten unterschiedlichster Art für die Benutzer bereitstellt und die bisherige Seitenmetapher ablöst.«

Beim Web 2.0 wird das Internet außerdem zunehmend von den Nutzern selbst gestaltet, aus dem »Only read« entsteht das »Writable Web«. Beispiele dafür sind vor allem Weblogs, Wikis und Online-Plattformen wie Open BC (www.openbc.com), Myspace (www.myspace.com) oder die Foto-Community Flickr (www.flickr.com). Der gegenseitige Austausch interessanter Links über Social-Software-Dienste wie Del.icio.us oder Furl (www.furl.net) ist ebenfalls ein typisches Web-2.0-Phänomen. So genannte Mash-ups, die Inhalte von mehreren Websites kombinieren und aus ihnen automatisch neue Anwendungen bauen, sind ein weiterer Trend. Viele der neuen Web-2.0-Lösungen nutzen zum Beispiel die von der Suchmaschine Google zur Verfügung gestellte Schnittstelle für Kartenanwendungen (maps.google.de), um ihre eigenen Programme mit lokalisierten Daten zu versorgen: Ein Immobilienmakler kann so etwa die Lage seiner aktuellen Angebote in einer Karte anzeigen, eine Bank ihre Filialen oder Geldautomaten.


Webdienste mit Pfiff

Web-Entwicklung mit Ajax, Flash und Flex

Täglich erblicken neue Web-Anwendungen das Licht, die sich von den auf dem Computer installierten Programmen in ihrer Funktionalität kaum noch unterscheiden. Jüngstes Beispiel: Das Finanzportal Google Finance (finance.google.com), das Aktienkurse, Wirtschaftsnachrichten und Unternehmensdaten in bisher ungekannter Form und Fülle bietet. Um die etablierte Konkurrenz auszustechen, liefert der neue Dienst nicht nur die üblichen konfigurierbaren Chart-Übersichten und allgemeine Wirtschaftsnachrichten. Mit Hilfe interaktiver Flash-Charts, die sich über eine Zeitleiste dynamisch bewegen lassen, kann der Verlauf eines Aktienwerts über die Monate sehr genau beobachtet werden. Schiebt man den Regler in die gewünschte Richtung, verändert sich aber nicht nur sofort das Kursdiagramm mit den Finanzdaten. Auch die dazugehörigen Nachrichten, die aus unterschiedlichen Quellen automatisch zusammengetragen werden, erscheinen passend zum jeweiligen Chart. Dadurch kann der Anleger direkt die Ursache für sinkende oder steigende Kurse in Erfahrung bringen.

Neben der Wirtschaftspresse und klassischen Aktienanalysen dienen auch Meldungen aus Weblogs als Informationsquelle, ebenso ein moderiertes Diskussionsforum zur jeweiligen Aktie. Jeder angemeldete Nutzer hat die Möglichkeit, ein Portfolio mit bis zu 200 Posten zusammenzustellen und mit Hilfe der verschiedenen Tools zu beobachten. Google richtet sich mit seinem neuen Angebot vor allem an Hobby-Anleger und Durchschnittsinvestoren, denen mit Hilfe einer intuitiven Benutzerführung der Zugriff auf die Informationen möglichst einfach gemacht werden soll.

Dazu setzt der Suchmaschinenbetreiber sowohl die bewährte Flash-Technik von Adobe als auch Ajax (Asynchronous Javascript and XML) ein. Google Finance ist damit ein sehr schönes Beispiel dafür, wie Flash-Inhalte mit Funktionen im Ajax-Stil miteinander kombiniert werden können. Der Flash-basierte Live-Ticker für jede einzelne Aktie ist mit einem Zoom-Interface ausgestattet, über das eine sofortige nahtlose Anzeige der Finanzdaten für die vergangenen drei Jahre ermöglicht wird.

Außerdem verbinden kleine Marker in den beweglichen Charts das jeweilige Datum mit den dazugehörigen Nachrichten. Beim Anklicken der Markierung wird die zugehörige Meldung in der HTML-Ansicht hervorgehoben. Das Besondere: Lange Wartezeiten auf die neuesten Börsenkurse gehören bei Google Finance der Vergangenheit an, denn zum Aufbau eines interaktiven Charts muss nicht mehr die komplette Webseite neu geladen werden.


Benutzerfreundlichkeit

Web-Entwicklung mit Ajax, Flash und Flex

Mit dem Flash/Javascript Integration Kit (osflash.org/doku. php?id=flashjs), das bei der Realisierung der Google-Finanzanwendung zum Einsatz kam, ist eine nahtlose Kommunikation zwischen Flash- und Javascript-Funktionen möglich. So können diese direkt aus Flash heraus aufgerufen werden und umgekehrt Funktionen der Flash-Programmiersprache Actionscript von Javascript aus.

Das Ajax-Konzept, um das im Zusammenhang mit dem Web 2.0 in den letzten Monaten ein regelrechter Hype entstanden ist, stellt nicht wirklich etwas völlig Neues dar. Die Idee und die damit verbundenen Techniken gibt es in vergleichbarer Form schon seit etwa 1998. So nutzt Ajax zum Beispiel dynamisches HTML und Cascading Stylesheets (CSS) zur Formatierung der Website, XML als Datenaustauschformat sowie Javascript zur dynamischen Darstellung der Inhalte.

Mit diesen und anderen Komponenten lassen sich nun aber durch geschickte Kombination Anwendungen realisieren, bei denen die kompletten HTML-Seiten nicht mit jeder Anfrage neu in den Browser übertragen werden müssen. Vielmehr laden diese Applikationen nur die aktuell benötigten Seitenelemente nach und reagieren damit deutlich schneller auf die Benutzereingaben. Der Anwender hat dadurch den Eindruck, dass die Applikation direkt auf seinem PC ausgeführt wird – und nicht auf einem entfernten Server. Beispiele für bekannte Websites, die Ajax einsetzen, sind unter anderem die von Google aufgekaufte Textverarbeitung Writely (www.writely.com), Google Maps, die Amazon-Suchmaschine A9 (a9.com) oder der Bilderdienst Flickr.


Rich Internet Applications

Web-Entwicklung mit Ajax, Flash und Flex

Das Ziel von Ajax sind benutzerfreundlichere Web-Anwendungen, die ähnlich wie herkömmliche Computerprogramme schnell und komfortabel genutzt werden können. Die gleiche Idee steht hinter den Rich Internet Applications (RIAs), die von dem von Adobe übernommenen Software-Haus Macromedia schon seit einigen Jahren propagiert werden. Das Beratungsunternehmen Gartner nennt die RIAs »die nächste Evolution im Web« und sieht darin den nächsten großen Entwicklungsschritt für die Anwendungsentwicklung im Enterprise-Bereich. Nach einer Studie der Marktforscher hat eine wachsende Zahl der Top-100-Unternehmen bereits Rich-Internet-Applikationen im Einsatz oder plant dieses in naher Zukunft. Bis 2010 – so die Prognose – werden 60 Prozent aller neuen Anwendungsentwicklungsprojekte in den Firmen RIA-Techniken nutzen, und etwa ein Viertel davon besteht ausschließlich daraus.

Der entscheidende Vorteil der Rich Internet Applications: Sie verbinden die hohe Performance und Stabilität von Desktop- oder Client-Server-Software mit der einzigartigen Reichweite, der zentralisierten Verwaltung und dem geringen Installationsaufwand von browserbasierten Web-Anwendungen. Der künftige Einfluss von RIAs auf die Geschäfte von Unternehmen – so die Gartner-Analysten – lässt sich durchaus mit dem von PC-Desktop-Computing vergleichen, indem die Effizienz und Produktivität auf ein völlig neues Level gehobe
n werden ? bei sinkenden Kosten.

Insbesondere mit der Programmierumgebung Adobe Flex (www.adobe.com/de/products/flex), aber auch mit Open-Source-Alternativen wie Open Laszlo (www.openlaszlo.org, siehe Vergleichstest Ausgabe 9/2006, Seite 40), lassen sich Anwendungen realisieren, die sich gegenüber bisherigen Web-Applikationen durch ein völlig neues Nutzererlebnis auszeichnen. Die Anwender erhalten bei einer Eingabe ein unmittelbares Feedback, gleitende Übergänge zwischen den unterschiedlichen Zuständen und ihrer Darstellung sowie einen reibungslosen, unterbrechungsfreien Arbeitsablauf. Beispiele sind Online-Shop-Systeme, Online-Reservierung oder -Bestellsysteme, aber auch Produktkonfiguratoren, CRM-Systeme, Portale und Business-Intelligence-Auswertungen. Mit dem Flash Player, der mittlerweile plattformübergreifend auf über 98 Prozent aller Computer mit Internet-Zugang installiert ist, verfügen die Rich-Internet-Applikationen über ein weit verbreitetes Frontend.


Flex geht weiter

Web-Entwicklung mit Ajax, Flash und Flex

Die Ajax-Techniken sind frei verfügbar, aber ihnen fehlen einige wesentliche Fähigkeiten von Flash/Flex – die wirklich persistente Bedienoberfläche auf Client-Seite ebenso wie ein Client-seitiges Datenmodell oder etwa eingebundene Audio- und Videodaten, Vektorgrafiken und Möglichkeiten zur Datenspeicherung. »Ajax nutzt zwar die vorhandenen Branchenstandards und erfreut sich wachsender Beliebtheit (und Aufmerksamkeit in der Presse), die Bündelung der verschiedenen Technologien stellt aber auch ein komplexes Unterfangen dar, das immer wieder an die Grenzen der Browserkompatibilität stößt«, schätzt die Patricia Seybold Group die Lage in einer Studie ein.

Auch auf mobilen Endgeräten lassen sich Ajax-Anwendungen nur eingeschränkt nutzen. Trotzdem scheint der Siegeszug dieser Programmiermethode unaufhaltsam. »Ajax hat inzwischen solche enormen Zuwachsraten und eine Eigendynamik unter den Web-Entwicklern, dass jeder große Software-Anbieter darauf reagieren muss«, erwarten die Gartner-Experten in einer aktuellen Studie. Neben Microsoft mit dem Atlas-Projekt (siehe Workshop) und der von IBM ins Leben gerufenen Open-Ajax-Initiative sei es deshalb nur konsequent, wenn auch Adobe auf eine Unterstützung von Ajax setze. Das Software-Haus ist folgerichtig auch aktives Mitglied der Open-Ajax-Initiative, zu der neben IBM unter anderem Intel, SAP, Software AG, BEA, Borland, Novell, Oracle, Red Hat, Yahoo und Google gehören.

Nach Einschätzung von Gartner-Analyst Ray Valdes werden auch die Webprojekte in den Unternehmen spätestens ab 2007 nicht mehr um Ajax herumkommen. Denn derzeit mangele es noch an der erforderlichen Nutzerfreundlichkeit der Anwendungen und der Implementierung von anwenderorientierten Design-Prozessen. Die heute vorherrschenden Ajax-Schnipsel sind nach Meinung des Experten auf Dauer keine Lösung für die Anwendungsentwicklung in den Unternehmen. Deshalb positioniere sich Adobe mit seinem Flex-Framework für den Zeitpunkt, wenn den heute so euphorischen Ajax-Entwicklern die Luft ausgeht und Fragen wie Sicherheit, Wartung der Anwendungen, Offline-Speicherung, Benachrichtigung und Integration in die lokale IT-Umgebung stärker in den Vordergrund rücken.


Brückenschlag

Web-Entwicklung mit Ajax, Flash und Flex

Mit der Veröffentlichung von zwei quelloffenen Bibliotheken, die Verbindungen zwischen Ajax-Web-Anwendungen und Flex ermöglichen, hat Adobe bereits kurzfristig auf die Herausforderungen reagiert. Die seit März 2006 verfügbare Flex-Ajax-Bridge (FABridge, labs.adobe.com/wiki/index.php/Flex_Framework:FABridge) ist eine kleine Code-Library, die in eine Flex-Anwendung oder eine einzelne Flex-Komponente eingefügt werden kann. Dadurch wird der direkte Zugriff auf Flex-2-Objekte über Javascript direkt von Ajax-Applikationen aus ebenso möglich wie umgekehrt.

Im Lauf des Jahres wird außerdem ein Ajax-Client für Flex-Datendienste (ACFDS, www.adobe.com/devnet/flex/articles/ajax_client.html) einsatzbereit sein. Dabei handelt es sich um eine Javascript-Bibliothek, die Ajax-Entwicklern den direkten Zugang zu den Messaging- und Datenmanagement-Features der freien Version der Flex Enterprise Data Services von Javascript aus erlaubt. Dadurch ist es möglich, Ajax-Applikationen zu schaffen, die bei Änderung der gespeicherten Daten automatisch synchronisiert werden. Die Flex-Datendienste stellen Messaging-Funktionen, Datenströme in Echtzeit und eine Anwendungsprogrammierschnittstelle zur Verfügung, wodurch die Entwicklung von Rich-Internet-Applikationen deutlich vereinfacht wird.

Ein typisches Szenario für den Einsatz der beiden Adobe-Tools sind Anwendungen, bei denen einerseits das grundlegende Rahmenwerk einer Seite mit Ajax realisiert wird. Weiterführende Anwendungen, etwa Video-Streaming oder Desktop-Simulationen, werden dagegen von Flash ausgeführt. Der große Vorteil für die Entwickler: Sie können beide Techniken miteinander kombinieren und müssen sich nicht mehr nur für einen Weg entscheiden, der im Zweifelsfall mit erheblichem Programmieraufwand verbunden ist.


Freies Ajax-Framework

Web-Entwicklung mit Ajax, Flash und Flex

Mit Spry (labs.adobe.com/technologies/spry) bietet Adobe seit kurzem auch ein freies Ajax-Framework an. Seine Besonderheit liegt darin, dass HTML weiterhin die Kernkomponente ist und geringe Javascript-Kenntnisse für die Entwicklung von Web-2.0-Anwendungen ausreichen. Spry lässt sich in Kombination mit jedem beliebigen Webdesign-Tool einsetzen. Die erste Version ermöglicht es Webdesignern, XML-Daten in ihre HTML-Dokumente aufzunehmen, und besteht aus zwei Javascript-Dateien, mit denen man das Framework implementiert. Hinzu kommt eine Dokumentation, die dessen Einsatz erläutert. Auf der Website Adobe Labs (labs.adobe.com) ist der kostenlose Download unter den Bestimmungen der BSD-Lizenz möglich. Außerdem werden dort drei Demoanwendungen vorgestellt, darunter eine intuitiv zu bedienende Fotogalerie.

Während andere Ajax-Frameworks handliche Objekte und Funktionen für eigene Javascript-Programmierung bereitstellen, löst Spry die Probleme mit HTML-Platzhaltern. Wie beispielsweise der Code (labs.adobe.com/technologies/spry/articles/photo_album.html) der Demo-Fotogalerie zeigt, bindet der Programmierer nur die Spry-Bibliotheken ein und definiert ein paar Variablen. Den Rest erledigen Platzhalter im HTML-Quelltext, ähnlich wie bei serverseitigen Skriptsprachen (etwa PHP, JSP oder Server-Side Includes). Aktuell ist die Unterstützung auf XML-Datenstrukturen beschränkt, aber mögliche Erweiterungen wie zum Beispiel um das JSON-Format (Javascript Object Notation) sind bereits geplant.


Flash Player 9 und Flex 2.0

Web-Entwicklung mit Ajax, Flash und Flex

Mit der Adobe-Flex-2.0-Produktlinie und dem Flash Player 9, die seit Ende Juni verfügbar sind, gibt es eine Komplettlösung zur Entwicklung von Rich-Internet-Applikationen der neuesten Generation. Sie besteht aus einem leistungsstarken und erweiterbaren Application-Framework, einem intuitiven Programmiermodell, einer auf Standards basierenden Datenintegration sowie mit Flex Builder 2.0 aus einer integrierten Entwicklungsumgebung auf der Basis von Eclipse für die Programmierung der Anwendungen und das D
esign der Benutzerschnittstellen.

Der Flash Player 9 stellt eine plattformübergreifende Laufzeitumgebung dar und basiert auf professionellen Programmier-Standards. Außerdem enthält er ein komplettes Runtime-Error-Reporting, verbessertes Debugging und die Unterstützung von Actionscript 3. Diese Programmiersprache entspricht den aktuellen ECMA-Script-Spezifikationen und erhöht die Produktivität der Entwickler deutlich, indem die Fehlersuche und -Beseitigung spürbar beschleunigt wird. Der Flash Player ist gegenwärtig weltweit auf über 600 Millionen Desktop-Rechnern und mobilen Endgeräten installiert, neue Versionen – so Marktstudien – erreichen innerhalb eines Jahres durchschnittlich rund 80 Prozent aller Computer im Web.

Adobe stellt mit Flex 2.0 gleichzeitig ein neues Lizenzmodell vor, das die Leistungsfähigkeit der Flex-Entwicklung in die Reichweite jedes professionellen Anwendungsprogrammierers bringen soll, und bietet skalierbare Mehrwertdienste für anspruchsvolle IT-Projekte in den Unternehmen an. Die Lizenz für Flex Builder 2 gibt es schon für 449 Euro. Sie enthält die Möglichkeit, ohne Zusatzkosten oder Server-Lizenzen Flex-Anwendungen in Verbindung mit XML und Soap-Webservices zu entwickeln, zu kompilieren und zu verbreiten. Die Lizenzen für die Flex Enterprise Services 2 werden auf Basis von CPUs und Projekten oder als Unternehmenslizenz angeboten. Dadurch kann die für zukunftsweisende Anwendungen benötigte Entwicklungseffizienz, Performance, Integrationsfähigkeit und Testunterstützung jederzeit gewährleistet werden.


Flash und Ajax im Zusammenspiel

Web-Entwicklung mit Ajax, Flash und Flex

Der große Vorteil von Flex und Flash zur Realisierung von Web-2.0-Anwendungen besteht darin, dass damit eine durchgängige Entwicklung über sämtliche Betriebssystem- und Browsergrenzen hinweg möglich ist. Dadurch wird ein Großteil des sonst üblichen Programmieraufwands von Tests und Debugging-Aktionen überflüssig.

Es geht aber nicht um ein Gegeneinander von Flash und Ajax. Im Gegenteil: Beide Techniken können sich hervorragend ergänzen, wie nicht nur das Beispiel von Google Finance zeigt. »Ajax und Flash sind wie Erdnussbutter und Marmelade, jedes der beiden hat für sich genommen eine absolute Existenzberechtigung«, sagt zum Beispiel Richard Monson-Haefel, Analyst beim amerikanischen Beratungsunternehmen Burton Group. Und um im Bild zu bleiben, führt er weiter aus: »Am besten aber sind die beiden, wenn man sie zusammen einsetzt.«