Zühlke Whitepaper Client Technologien

White PaperFunktionalität, Usability und schönes Design –Herausforderungen bei der Wahl der Client-TechnologieThomas Memmel - Thorsten Büring - Nicolas Durville - Olivier Lalive d’EpinayAbstractIn vielen Softwareentwicklungsprojekten muss ein Entscheid für eine passende Client-Technologie getroffen werden.Nicht immer wird der Entscheid durch bereits vorhandene Plattformen vorweggenommen. Oft ist das Projektteam ge-fragt, eine geeignete Technologie zu identifizieren und für die Umsetzung vorzuschlagen. Usability-Experten sollten da-her neben Fähigkeiten in den Kernbereichen des Usability Engineerings – darunter zum Beispiel die Anforderungsana-lyse, Gestaltung und Evaluation – auch über ein technisches Basiswissen über verschiedene GUI-Frameworks verfügen.Dies ermöglicht ihnen, bereits beim Entscheid für eine Client-Technologie die Sicht des Benutzers einfließen zu lassenund damit die Weichen für die Entwicklung gebrauchstauglicher Software zu stellen.Ziel dieses Beitrags ist es daher, aus Sicht des Usability Engineerings einen Überblick über verschiedene Client-Ansätzeund -Technologien zu geben.1.0 EinleitungViele Unternehmen, die neue Client-Technologien bei ist letztlich der Leidtragende, wenn Konzepte zum Bei-der Ablösung älterer Systeme oder zur Entwicklung spiel aufgrund von fehlenden oder unflexiblen GUI Con-neuer Systeme einsetzen wollen, streben nach einer trols nicht konsequent und konsistent umgesetzt wer-hohen Usability. Diese ergibt sich aber nicht automa- den können.tisch allein aus dem Einsatz einer neuen Technologie.Bei der Auswahl der Client-Technologie sollten daher inerster Linie nicht die Technik und unternehmensspezifi-sche Rahmenbedingungen ausschlaggebend sein, son-dern insbesondere die Benutzer und deren Anforderun-gen.Deshalb muss für die Entwicklung des Graphical UserInterface (GUI) eine Client-Technologie verwendet wer-den, mit der die Usability-Ziele erreicht werden können.Usability-Experten sollten daher bei der Auswahl derrichtigen Client-Technologie mitwirken, da ein direkterZusammenhang zur Konzeption und Modellierung desGUI besteht. Zum Beispiel müssen die enormen Frei-heitsgrade bei der GUI-Gestaltung, wie sie etwa geradeim Umfeld von Rich Internet Applications (RIA) vorherr-schen, durch Usability-Experten in die richtigen Bahnengelenkt werden. Umgekehrt geben manche Client-Technologien Rahmenbedingungen vor, die wertvollenSpielraum bei der Gestaltung nehmen oder ein Zurück-greifen auf Zusatzkomponenten erfordern. Der Benutzer Abbildung: Überblick Client-Technologien (© Zühlke Engineering AG)© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 2 von 7Das Ziel für Usability-Experten sollte daher sein, die Vor- Rich Client (Abbildung). Die Benutzeroberfläche sowieund Nachteile schon vor dem Entscheid für eine Client- die Präsentations- und clientseitige Businesslogik sindTechnologie gegeneinander abzuwägen. Dann kann die dann für die Applikation lokal auf dem Rechner des Nut-Sicht des Benutzers bereits einfließen und es können zers verfügbar und können ohne Netzwerkanbindungwichtige Weichen für die GUI-Entwicklung gestellt wer- unmittelbar in den Arbeitsspeicher geladen werden.den. Usability ist in der Praxis immer ein Kompromiss Das flüssige Arbeiten des Nutzers wird dabei jedochzwischen Bedienqualität und Kosten. Das beste Interak- über Installationszwang erkauft. Zudem kann sich dietionsdesign ist wertlos, wenn der Umsetzungsaufwand Verteilung und Aktualisierung der Software als proble-aufgrund der gewählten Client-Technologie das Budget matisch erweisen. Gerade bei großen, verteilt agieren-übersteigt. Ein Grundverständnis über verschiedene Cli- den Unternehmen müssen lokale Anwendungen auf-ent-Technologien ist daher für Usability-Experten von wändig in die vorhandene IT-Landschaft eingepflegtVorteil. werden. Rich Client-Technologien sind zum Beispiel Java Swing, Eclipse Rich Client Platform (Eclipse RCP) oder2.0 Client-Ansätze Windows Presentation Foundation (WPF).Die erste und folgenschwerste Weiche bei der Umset-zung eines GUIs wird mit der Wahl des Client-Ansatzes 2.3 Rich Internet Applications (RIA)gestellt. Hier unterscheiden wir grundsätzlich drei Arten, RIAs finden im Zuge immer leistungsfähigerer Browserwobei die Übergänge fließend sein können. und Hardware zunehmend Verbreitung bei der Entwick- lung von Unternehmenssoftware. RIAs werden ebenfalls über einen Webbrowser angezeigt und bedient. Anders als bei Thin Clients wird jedoch eine höhere Dynamik der Benutzeroberfläche erzielt, indem zur Laufzeit neben der Visualisierung auch Teile der Präsentations- und Bu- sinesslogik auf den Computer des Nutzers geladen werden – zumeist als Client-seitige Skriptsprachen. Auf Nut- zereingaben kann die Applikation unmittelbar, d. h. meist ohne Kommunikation mit dem Server, reagieren. Bei RIA-Technologien, die ein Plug-in erfordern, steht der Nutzer zunächst vor der Herausforderung, die not- wendige Installation zu bewältigen. Leider ist dieser Vor- gang für viele Benutzer nach wie vor eine Hemmschwel- le. Der Nutzer muss Sicherheitsabfragen und kryptischen Lizenzvereinbarungen zustimmen, sich durch ei-Abbildung: Zusammenspiel Client-Technologien und Schichtenarchi-tektur (© Zühlke Engineering AG) nen Installations-Dialog arbeiten, unter Umständen einen Speicherort auswählen und den Browser neu star-2.1 Thin Clients ten. Der größte Nachteil von RIA-Technologien, die aufDie Benutzungsoberfläche wird zur Laufzeit der Interak- Plug-ins basieren, ist jedoch nicht die holprige Installati-tion in einem Webbrowser angezeigt (Abbildung). Die on. Viele Mitarbeiter in Unternehmen verfügen nichtverschiedenen Applikationskomponenten sind auf ei- über die nötigen Administrationsrechte, um überhauptnem Server gespeichert. Dieser Ansatz eignet sich für Software auf ihren Computern zu installieren. Dies be-einfache Anwendungen mit hoher Verbreitung. deutet, dass die Plug-ins zur IT-Strategie gehören und zentral ausgerollt werden müssen. DementsprechendDurch den weitgehenden Verzicht auf lokale Verarbei- kommen Silverlight und Flash unserer Erfahrung nachtung der Nutzerinteraktion lassen sich die Anforderun- gerade im Umfeld von Business-to-Business-gen an die Hardware und Software des Nutzers minimie- Applikationen noch eher selten zum Einsatz.ren. Auf der anderen Seite können bestimmte Visualisie-rungen und Interaktionen nur bedingt umgesetzt wer- Für die Entwicklung zu beachten ist, dass die Umsetzungden. Beispiele für Thin Client-Technologien sind Active individueller Bedienelemente sehr aufwändig sein kann.Server Pages (ASP, ASP.NET), PHP, Ruby, Java Server Umständlich aus Sicht des Nutzers kann sich auch derFaces (JSF). Austausch und die Kollaboration zwischen RIA und dem Betriebssystem gestalten, genauso wie die Kollaboration2.2 Rich Clients mit anderen Anwendungen (z. B. Kopieren von DateienSollen hochinteraktive Anwendungen mit ausgeprägten zwischen Anwendungen oder vom Desktop). RIAs kön-Grafikanforderungen entwickelt werden, so empfiehlt nen den Nutzer auch irritieren, da viele Mechanismen,sich nach wie vor die klassische Implementierung als die er von Desktop-Anwendungen kennt, nicht mehr© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 3 von 7erlaubt sind oder nicht verwendet werden. Beispielswei- 3.2 Eclipse RCP (Rich Client)se funktioniert die Navigation mittels Vor- und Zurück- Eclipse RCP ist eine häufig verwendete Alternative zurSchaltflächen des Browsers nicht bei allen RIA- Implementierung von Rich Client Anwendungen in JavaTechnologien automatisch. Beispiele für RIA- Swing. Eclipse RCP bietet dazu einen eigenen StandardTechnologien sind Google Web Toolkit (GWT), ASP Widget Toolkit (SWT). Dieser bringt als GUI-Baukasten.NET mit AJAX, JSF mit AJAX, JavaFX, Microsoft Silverlight bereits sehr viel Funktionalität mit. Die GUI-Elemente deroder Adobe Flash / Flex (Abbildung). erstellten GUI-Applikationen sind nativ, d.h. sie werden durch das Betriebssystem gezeichnet und sind durch3.0 Client-Technologien dessen Look & Feel geprägt. So ergeben sich mitunterBasierend auf der Kategorisierung der Client-Ansätze Geschwindigkeitsvorteile gegenüber Java Swing GUIs.stellen wir für jeden Ansatz ausgewählte Implementie- Daneben steht ein GUI-Editor zur Verfügung, mit dessenrungstechnologien vor. Im Rahmen dieses Beitrags kon- Hilfe sich GUI-Elemente hinzufügen und anordnen las-zentrieren wir uns dabei auf Technologien aus dem Be- sen. Der entstehende Code muss in der Regel nochreich der Rich Client-Technologien und der Rich Internet überarbeitet werden. Dennoch bietet Eclipse RCP soApplications. Zu diesen haben wir Interviews mit Exper- eine Möglichkeit zum GUI Prototyping, wobei Program-ten, darunter zum Beispiel GUI-Entwickler, Tester und mierkenntnisse notwendig sind, sobald der im GUI-Requirements Engineers, geführt. Dabei haben wir unter Editor gebaute Prototyp auch interaktives Verhalten zei-anderem das modellierbare interaktive Verhalten, die gen soll. Im GUI-Editor können optische AnpassungenMöglichkeiten zum GUI Prototyping, die Gestaltung von vorgenommen werden. Eine Schnittstelle zum medien-eigenen GUI-Elementen und Controls, oder die Flexibili- bruchfreien Einbinden von Design-Artefakten, wie z.B.tät bei der Integration neuer Usability Anforderungen Bitmap- oder Vektorgrafiken, fehlt jedoch.beleuchtet. Ein großer Vorteil von Eclipse RCP ist die Vielzahl von3.1 Java Swing (Rich Client) Bibliotheken, wie zum Beispiel „Nebula“ (Eclipse Foun-Die Entwicklung von Rich Clients mit Java Swing ist sehr dation, 2010), mit deren Hilfe die Auswahl an GUI-etabliert. Die Performance Probleme bei der Verwen- Elementen stark erweitert werden kann. Mit Eclipse RCPdung von interaktiven Java Swing GUIs haben sich ins- können somit auch aufwändige GUIs gebaut werden.besondere seit Java EE 6 weitestgehend aufgelöst. Neu- Zusätzlich ist das Erstellen von Custom Widgets auf Ba-artige GUI Controls, wie etwa Ribbons, sind inzwischen sis von Eclipse SWT möglich, jedoch zum Teil mit vielauch für Java Swing verfügbar (Flamingo, 2010). Neue Aufwand. Die Nachteile von Eclipse RCP liegen zum Bei-Java Look & Feels wie „Synthetica BlackEye“ (Zitzels- spiel in der Schwierigkeit, dass nicht alle bereit gestell-berger, 2009) verleihen Java Swing Applikationen ein ten GUI-Elemente einfach angepasst und einwandfreineues, modernes Aussehen, wie es die Nutzer insbe- kontrolliert werden können. Der GUI-Editor kann nochsondere von GUIs aus Microsoft 7 gewohnt sind. Mo- verbessert werden: Es ist zum Beispiel für die Entwick-derne GUIs können somit auch problemlos mit Java lung komplexer Applikationen wünschenswert, dass ein-Swing entwickelt werden. zelne GUI-Elemente in Gruppen zusammengefasst wer-Vielleicht deshalb ist Java Swing unter Entwicklern immer den können, die dann direkt im Editor als mächtige Con-noch die beliebteste Technologie, wenn es um die Im- trols zur Verfügung stehen.plementierung von Java-basierten GUIs geht. Die rele- 3.3 Windows Presentation Foundation (Rich Client)vantesten Entwicklungsumgebungen sind Eclipse oder WPF ist ein Präsentationssystem für die Entwicklung undNetBeans. Mit Werkzeugen wie dem JFormsDesigner Darstellung von Windows Clients. Ist die Plattformab-(FormDev, 2010) lassen sich auch mit Java Swing sehr hängigkeit für ein Projekt kein Problem, dann steht mitschnell auch ästhetische GUIs entwickeln. Der JForms- WPF ein Werkzeug bereit, das alle denkbaren FeaturesDesigner steht darum als Eclipse Plug-in zur Verfügung. für die Entwicklung moderner Rich Clients bietet. EineMithilfe eines solchen GUI Builder lassen sich GUIs un- umfangreiche GUI-Bibliothek, 2D- und 3D-Zeichnen,abhängig von der Programmierung als Prototypen ent- Hardware-Beschleunigung, Unterstützung von Vektor-werfen. Diese sind auch im Rahmen von formativen und Bitmapgrafiken, Animationseffekte, Data-Binding,Usability Evaluationen verwendbar. Darstellung von Dokumenten, OpenType Typographie,Inzwischen existieren sehr interessante Plug-ins, wie das Multi-Touch, Globalisierung und Lokalisierung sowie In-„Napkin Look & Feel“ (Arnold et al., 2009), mit dessen tegration von Audio und Video sind nur einige der ent-Hilfe in Java Swing programmierte GUIs den Eindruck haltenen Funktionen. WPF ist Teil des Microsoft .NETeines Papier Prototypen erwecken. Für das Umsetzen Frameworks, das momentan in Version 4 vorliegt.von interaktivem Verhalten sind Programmierkenntnisse Bei der Entwicklung von WPF Clients setzt Microsoft aufjedoch unbedingt erforderlich. die durch HTML und JavaScript vertraute Separierung© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 4 von 7von Präsentations- und Logik-Code. Mit der Markup- Neben einfachen Controls wie Buttons und Listen fin-Sprache XAML wird das Aussehen des GUI definiert, mit den sich in der Standard GUI-Bibliothek von Silverlighteiner der .NET Sprachen das Verhalten. Die Möglichkeit, auch die üblichen Elemente zum Anzeigen von Datendass durch diese Trennung Designer und Programmie- wie TreeView und Datagrid. Beide können mit wenigrer gleichzeitig an einer Applikation arbeiten können – Aufwand um Features wie Drag & Drop, Sortierung, in-die Designer mit XAML, die Entwickler mit einer Pro- dividuelles Kontextmenü und Copy & Paste erweitertgrammiersprache – hat sich jedoch bislang nicht durch- werden. Weitere GUI-Komponenten können vongesetzt. Anders als HTML ist XAML nach unseren Re- Drittanbietern bezogen werden. Hervorzuheben ist dascherchen bei Gestaltern noch weitgehend unbekannt. Silverlight Toolkit von CodePlex (Codeplex/Microsoft, 2010), das unter anderem Elemente wie AutoComple-Ähnlich verhält es sich mit den neuen Entwicklungs- teBox, Accordion, Ratings und TreeMap enthält.werkzeugen. Neben Visual Studio, der Standard-Ent-wicklungsumgebung für Windows Programmierer, bietet Gerade für kreative und neuartige GUIs bietet SilverlightMicrosoft seit 2007 mit Expression Blend und Expression mit seinen vielen grafischen Effekten, der EinbindungDesign auch Werkzeuge für Gestalter an. Letztere ziehen von Mikrofon und Webcam, sowie dem Audio- undaber nach wie vor die klassischen Grafik-Editoren von Video-Streaming zahlreiche Möglichkeiten. Mit DeepAdobe wie Photoshop, Illustrator und Fireworks vor. Zoom können zum Beispiel zoombare GUIs aus hoch-Dennoch ist zumindest Expression Blend ein Erfolg, da auflösenden Bildern erstellt und damit ein Benutzungs-viele Programmierer es verwenden. Microsoft hat dar- erlebnis abseits der 2D Fenster-Metapher geschaffenüber hinaus den Import der Adobe Bild-Formate in Ex- werden. Leider wird Hardwarebeschleunigung für grafi-pression Blend vorgesehen. sche Inhalte bisher nur teilweise unterstützt.Die Gestaltung von WPF GUIs wird mittels Styles, Temp- Silverlight Applikationen können seit Version 4 auchlates und Themes angepasst. Bei der Neuentwicklung außerhalb des Browser laufen. Aus der RIA wird mit ge-von Komponenten können Entwickler oft auf vorhande- ringem Aufwand ein Rich Client, der gegenüber dernen Bedienelementen aufsetzen und somit den Pro- Webvariante erweiterte Funktionalität ermöglicht. Dazugrammieraufwand erheblich reduzieren. Der User Expe- gehören der (eingeschränkte) Zugriff auf lokale Dateien,rience Guide von Microsoft (Microsoft, 2010) hilft an- vollständige Tastaturunterstützung, Drag & Drop vomhand von Beispielen beim korrekten und Windows kon- Desktop sowie der Aufruf anderer Programme aus derformen Einsatz von Fenstern, Dialogen und Bedien- Applikation heraus. Auch kann der Zugang zu externenelementen. Die hohe Anzahl an gestalterischen Frei- Geräten wie z.B. Scanner oder USB-Stick implementiertheitsgraden birgt jedoch auch die Gefahr, dass GUIs ab- werden.seits der Standards entwickeln werden, ohne dass aus- Silverlight hat in kurzer Zeit an Popularität gewonnen.reichend Usability-Evaluationen stattfinden. Das Framework profitiert dabei unter anderem von derExpression Blend bietet seit Version 3 eine spezielle Er- Einbindung in den Entwicklungskontext von WPF undweiterung für Prototyping namens „SketchFlow“ an. Mit .NET. Entwickler können ihr einmal für WPF erworbenesSketchFlow können skizzenhaft wirkende GUIs mit we- Know-how für Silverlight wieder verwenden.nig Aufwand zusammengeklickt und als Online-Applika-tion inklusive Feedback- Funktion exportiert werden. 3.5 Adobe Flash und Flex (RIA) Adobe Flash zählt zu den ersten RIA-Technologien und3.4 Silverlight (RIA) bietet bereits seit über einem Jahrzehnt eine auf einemSilverlight ist ein RIA-Framework von Microsoft, das sich Plug-in basierte Web-Technologie für die Darstellungaus Teilen von WPF zusammensetzt und in direkter von Multimedia-Inhalten im Internet an. Die traditionelleKonkurrenz zur etablierten Flash-Technologie steht. Wie Stammklientel von Flash und der gleichnamigen Autho-Flash benötigt Silverlight eine Laufzeitumgebung, die der ring-Umgebung hat sich lange Zeit nahezu ausschließlichNutzer in Form eines Webbrowser Plug-ins installieren aus Designern und anderen Kreativarbeitern zusammen-muss. Microsoft stellt das Plug-in für Windows, Mac und gesetzt. Mit dem Entwicklungs-Framework Flex und demWindows Phone 7 bereit. Auch für Linux existiert mit Flex Builder (Eclipse Plug-in) will der Hersteller nun auchMono ein Plug-in, das von Novell in Kooperation mit verstärkt Programmierer von der Ausgereiftheit derMicrosoft entwickelt wird. Fast alle gängigen Browser Technologie überzeugen.werden unterstützt, einzig Opera bildet derzeit eine Entgegen der Vermutung vieler Softwareentwickler las-Ausnahme. Silverlight steht in der Version 4 zur Verfü- sen sich mit Flash und insbesondere Flex beliebig kom-gung. Momentan wird von einer Verbreitung des Silver- plexe sowie datengetriebene GUIs umsetzen. Wie WPFlight Plug-ins von ca. 40-60% ausgegangen. Bei Arbeits- folgt das SDK dabei dem Prinzip der Trennung von Prä-platzrechnern dürfte diese Quote jedoch weitaus gerin- sentation und Logik: mit einer XML-Sprache namensger ausfallen. MXML wird das GUI strukturiert und mit ActionScript die© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 5 von 7Dynamik implementiert. Flex wird von Adobe in der 3.6 JavaFX (RIA)Version 4 zum Download angeboten. Das Plug-in, der JavaFX gehört zur Java Produktfamilie. Als TechnologieFlash Player, liegt momentan in der Version 10.1 vor. zur RIA-Entwicklung steht JavaFX in direkter Konkurrenz zu Adobe Flash und Microsoft Silverlight. Zur Ausfüh-Flash und Silverlight bieten für das GUI-Design einen rung von JavaFX-Anwendungen wird die Java Runtimesehr ähnlichen Funktionsumfang (vollständige GUI- benötigt. Nach einmaliger Installation können beliebigeBibliothek, Multi-Touch-Unterstützung, Druckanbindung, JavaFX Anwendungen ausgeführt werden. Diese werdenOffline-Fähigkeit, Lokalisierung, Input-Validierung, etc.), vorwiegend über Java Web Start auf dem Desktop oderunterliegen jedoch auch denselben Browser-bedingten als Java Applet gestartet.Einschränkungen. Dazu zählt neben dem Zugriff auf lo-kale Dateien und der Nutzung von durch den Browser Die Auswahl an GUI Controls reicht erst seit der Versionvorbelegten Tastenkombinationen auch das Navigieren 1.3 aus, um ansprechende GUIs zu entwickeln (vgl.mittels der History-Buttons des Browsers. Bei „klassi- Redko, 2010). Zur Gestaltung stehen GUI Builder zurschen“ Webseiten reflektiert die URL den Status der Verfügung, zum Beispiel auf Basis der NetBeans-Webseite. Der Nutzer kann somit die Vor- und Zurück- Entwicklungsumgebung (NetBeans, 2010). Die Integra-tasten des Browsers verwenden, um zwischen einzelnen tion von Design-Artefakten ist nach Installation der neu-bereits besuchten Bestandteilen einer Webapplikation en JavaFX 1.3 Production Suite zum Beispiel aus Adobezu wechseln (Deep Linking). Mit RIAs ist dies nur einge- Illustrator und Adobe Photoshop heraus möglich. Dasschränkt und jeweils nur für bestimmte Plattformen und Produkt unterstützt auch 3D-Grafiken und weist eineBrowser möglich. Deep Linking mit Flex funktioniert zum bessere Performance auf. Animationen laufen flüssigerBeispiel nur für Internet Explorer, Firefox (Windows und ab und GUI Controls werden schneller gezeichnet, derMac) und Safari (Mac). Speicherbedarf ist geringer als bei früheren Versionen.Ähnlich sieht es auch bei der Umsetzung von Barriere- Oracle verweist gerne auf JavaFX Beispielimplementie-freiheit aus. Während es bei Tastatursteuerung und indi- rungen, wie etwa auf der Webseite der Olympischenvidueller Anpassung der Schriftgröße in den letzten Jah- Winterspiele (2010). Allerdings kommt auch bei diesemren große Fortschritte bei den RIAs gegeben hat, werden beworbenen Internetauftritt JavaFX nur in einzelnen Be-Screen Reader nur teilweise und abhängig vom Betriebs- reichen zum Einsatz, während Adobe Flash dominiert.system unterstützt. Der Flash Player (ab Version 9) ist Obwohl JavaFX davon profitiert, dass die Java-vor allem auf den Screen Reader JAWS (Freedom Scien- Laufzeitumgebung auf ca. 75% der internetfähigentific, 2010) abgestimmt und setzt ein Windows-Betriebs- Computer installiert ist (RiaStats, 2010), sind ver-system voraus. gleichsweise wenige RIAs auf Basis von JavaFX im Inter- net anzutreffen. Es bleibt somit abzuwarten, ob OracleEin wesentlicher Unterschied zwischen Flash und Silver- mit JavaFX im Vergleich zu Adobe und Microsoft im RIA-light ist, dass Flash beim Rendering - außer bei der Dar- Umfeld aufholen kann.stellung von Videos und ausgenommen mobile Gerätemit OpenGL ES 2.0 - derzeit nicht auf Hardware- 3.7 Google Web Kit (RIA)Unterstützung zugreifen kann. Dafür wird von einer Die Besonderheit am Google Web Kit (GWT) ist die Pro-deutlich größeren Verbreitung des Flash Plug-ins (ca. grammierung in Java. Durch den GWT Compiler wird der3.5 MB) ausgegangen: ca. 90% aller Nutzer haben das Java Code in eine Web-Anwendung bestehend aus HTML,Plug-in installiert, 75% aller Online-Videos werden im CSS und JavaScript/AJAX umgewandelt. Mit GWT ent-Flash Player abgespielt. Der Player ist für alle Plattfor- stehen auf diese Weise dynamische GUIs, die mehr anmen (inklusive Linux und Solaris) und alle gängigen Desktop-Anwendungen erinnern als an Web-Browser erhältlich. Für mobile Geräte bietet Adobe je- Applikationen.doch nur eine Beta-Version für Android an (Adobe,2010). Eine Version für das iPhone wird es aufgrund des Im Gegensatz zu anderen RIA-Technologien wie Silver-Widerstands von Apple vermutlich vorerst nicht geben. light oder Flex benötigt GWT kein Browser Plug-in und basiert einzig auf den vom Browser unterstützten Stan-Flash ist ebenso wie Silverlight eine erstklassige Wahl für dards HTML, Javascript und CSS. Dies ist sowohl einGUI Prototyping. Anwender, die mit der Technologie großer Vorteil als auch die größte Einschränkung vonund der Flex Builder-Entwicklungsumgebung vertraut GWT. Während Plug-in basierte RIA-Technologien auchsind, können mit wenig Aufwand interaktive UIs zusam- Vektorgrafiken, Animationen und Video Streaming out-menstellen und bei Bedarf auch Custom Controls entwi- of-the-box unterstützen, ist dies mit GWT nur beschränktckeln. Ein Prototyping Werkzeug wie SketchFlow wird möglich. Auch Events können nicht wie bei RIAs verar-jedoch für Flash nicht angeboten. beitet werden. Die Möglichkeiten, eine visuell ansprechende und stark interaktive Benutzeroberfläche zu entwickeln, sind somit mit GWT deutlich eingeschränkt.© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 6 von 7Dennoch ist es möglich, in GWT eigene GUI-Elemente nur „GWT pur“ tatsächlich browserunabhängig. Werdenzu erstellen. Dazu steht eine Vielzahl an GWT Bibliothe- eigene GUI-Elemente mit Hilfe von CSS und HTML gestal-ken zur Verfügung. Sie können verwendet werden, ohne tet, muss der GUI-Designer die Browser-Kompatibiliätdass zum Beispiel JavaScript/AJAX Kenntnisse erforder- sicherstellen.lich sind. Bei der Gestaltung eigener GUI-Elemente set-zen allerdings HTML und CSS die Grenzen. Bei GWT 4.0 Ausblick: HTML5findet das GUI Rendering stets in HTML statt. So kann Mit HTML5 kündigt sich eine neue Client-Technologie imein Tab zum Beispiel auch durch ein Bild dargestellt RIA-Umfeld an. HTML5 macht mit CSS3 und JavaScriptwerden, aber nicht in beliebiger Form, so wie dies bei moderne RIAs ohne Plug-in noch attraktiver und leis-Adobe Flash oder Microsoft Silverlight möglich wäre. tungsfähiger. Das neue Canvas-Objekt ermöglicht dasHier erlauben Vektor-basierte GUI-Elemente nahezu un- Zeichnen von Grafiken mit Hilfe von JavaScript direkt imendliche Freiheitsgrade. Im Zusammenspiel mit HTML5 Browser. Gerade im Enterprise Umfeld, wo Plug-insund dem neuen Canvas, besteht aber auch neues Po- meist nicht erlaubt sind, können mit HTML5 modernetential in Richtung 2D- und 3D-Grafiken im Zusammen- Web-Applikationen entstehen. Insofern wird HTML5 inspiel mit JavaScript und GWT. vielen Fällen eine Alternative zu Adobe Flash bzw. Flex und Microsoft Silverlight sein.Durch die Trennung von HTML und AJAX auf der einenSeite und CSS auf der anderen Seite können Entwick- HTML5 ist jedoch nicht nur für den Desktop, sondernlung und Design teilweise parallel arbeiten. Der vom auch für „Apps“ auf mobilen Geräten relevant. Das Po-GWT Compiler generierte HTML-Code ist jedoch oft tenzial für eine plattformübergreifende Entwicklung mo-sehr unübersichtlich, so dass das Design in CSS den biler Anwendungen ist gerade wegen der Chance aufDesigner auch vor Herausforderungen stellt. Er muss geringere Entwicklungskosten und einfachere Verbrei-den kryptischen Code zumindest soweit verstehen, dass tung gross. Die Offline-Fähigkeiten und die Möglichkei-er die richtigen Elemente im CSS gestaltet. ten zur lokalen Datenspeicherung (z.B. Web StorageGrundsätzlich gibt es natürlich die Möglichkeit, Wire- und Web SQL Database) verleihen HTML5 eine hoheframes mit statischem HTML zu erstellen. Mit GWT kön- Flexibilität und Reichhaltigkeit.nen dann verschiedene Teile aus dem statischen HTMLdurch dynamischen Inhalt ersetzt werden. Eine weitere Neben Apple haben auch Microsoft und Adobe eineMöglichkeit zum GUI Prototyping bieten GUI Builder für breite Unterstützung für HTML5 angekündigt. Es ist zuGWT. Der Aufwand bei GUI Prototyping mit GWT steigt erwarten, dass aktuelle GUI-Entwicklungswerkzeuge fürjedoch relativ schnell an, da für interaktives Verhalten Flex und Silverlight einen HTML5-Export zulassen wer-immer Code programmiert werden muss. Wenn kein den. Auf diese Weise werden HTML5-Entwickler künftiginteraktives Verhalten gezeigt werden muss, sind Proto- auf eine vielfältige und etablierte Werkzeugkette zurück-typen in Form von Wireframes (z.B. erstellt in Microsoft greifen können, in der sich auch GUI-Designer wohl füh-Visio) oft die bessere Wahl. Zur Programmierung in len. Es lohnt sich, die Entwicklung von HTML5 genauerGWT muss allerdings spätestens dann gegriffen werden, zu beobachten.wenn die Machbarkeit bewiesen werden muss. Insge-samt ist ein GUI Prototyping direkt in GWT daher relativ 5.0 Zusammenfassungumständlich und vergleichsweise teuer. Eine entscheidende Weiche bei der Umsetzung eines GUIs wird mit der Wahl des Client-Ansatzes gestellt:Per Google Gears können GWT-Anwendungen auf lokale Thin Client, Rich Client oder RIA? Angesichts der Viel-Ressourcen des Clients zugreifen, ähnlich der Sandbox zahl an verfügbaren Client-Technologien stellt der Ent-von Java Applets. So ist zum Beispiel der Zugriff auf eine scheid für eine Technologie eine Herausforderung dar.lokale Datenbank und das Dateisystem möglich. Das Die Möglichkeiten bei der Gestaltung interaktiver An-entsprechende Plug-in macht GWT-Anwendungen dann wendungen erfordern ein besonderes Gespür für diereinen Desktop Anwendungen noch ähnlicher. Benutzer und deren Bedürfnisse. Wegen der grossenDie in GWT erstellten Anwendungen glänzen durch Anzahl neuer Client-Technologien und der sich darausschnelle Reaktionszeiten aufgrund der durch AJAX opti- ergebenden Varianten bei der Gestaltung des GUI müs-mierten Kommunikation mit dem Server. Es sind keine sen Usability-Expertise und Client-Technologie-Know-kompletten Client-Server-Roundtrips notwendig; das how kombiniert werden. Für Unternehmen ist jetzt einGUI kann partiell neu geladen werden und der Kontext guter Zeitpunkt, sich mit verschiedenen Client-bleibt erhalten. Im Zusammenspiel mit älteren Browsern, Technologien auseinanderzusetzen. Viele der vorgestell-wie IE 6, kann es bei GWT-Anwendungen aber zu Per- ten Client-Technologien werden in den kommendenformance-Problemen kommen. Des Weiteren ist auch Jahren verstärkt Einzug halten.© Zühlke / Dez. 2010

Whitepaper Client-Technologien Seite 7 von 7Über ZühlkeZühlke steht als unabhängiges Technologie- und Beratungsunternehmen für maßgeschneiderte Softwarelösungen, Pro-duktinnovation und Managementberatung. Erfahrene Spezialisten beraten, entwickeln und integrieren ganzheitlich undinnovativ. Projekte werden effizient abgewickelt, Lösungen funktionsbereit realisiert. Die vor über 40 Jahrengegründete Zühlke ist eine international anerkannte Lösungsanbieterin mit Teams in Deutschland, Großbritannien,Österreich und der Schweiz. Im Jahr 2009 erzielte die Zühlke Gruppe mit 350 Mitarbeiter-/innen einen Umsatzvon 65 Millionen Schweizer Franken.DanksagungWir bedanken uns bei den Entwicklerinnen und Entwicklern von Zühlke Schweiz sowie den Mitgliedern des ZühlkeCompetence Center für Client-Technologien für die Mitwirkung an diesem Artikel: Christian Abbegg, Mark Dettinger,Nikolaos Kaintantzis, Christian Moser, Romano Roth, Martin Steiger und Sandro Strebel.LiteraturAdobe (2010): Flash Player 10.1 Beta für Android. Online unter:http://labs.adobe.com/downloads/flashplayer10.html#android, letzter Zugriff 18.06.2010Arnold, K. et al (2009): The Napkin Look & Feel. Online unter http://napkinlaf.sourceforge.net/, letzter Zugriff18.06.2010CodePlex/Microsoft (2010): Silverlight Toolkit. Online unter: http://groups.google.com/group/silverlight-toolbox/,letzter Zugriff 18.06.2010Eclipse Foundation (2010): Nebula Project. Online unter http://www.eclipse.org/nebula, letzter Zugriff 18.06.2010Flamingo Swing Component Suite. Online unter https://flamingo.dev.java.net/, letzter Zugriff 18.06.2010FormDev (2010): JformsDesigner. Online unter http://www.jformdesigner.com/, letzter Zugriff 18.06.2010Freedom Scientific (2010): JAWS Screen reader. Online unter: http://www.freedomscientific.com/products/fs/jaws-product-page.asp/, letzter Zugriff 18.06.2010DIN, Deutsches Institut für Normung e. V. (2010): DIN EN ISO 9241-210: Ergonomie der Mensch-System-Interaktion -Teil 210: Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme (ISO 9241-210:2010); Deutsche FassungFprEN ISO 9241-210:2010DIN, Deutsches Institut für Normung e. V. (2008): Ergonomie der Mensch-System-Interaktion - Teil 151: Leitlinien zurGestaltung von Benutzungsschnittstellen für das World Wide Web (ISO 9241-151:2008); Deutsche Fassung EN ISO9241-151:2008Netbeans (2010): JavaFX Composer. Online unter http://wiki.netbeans.org/JavaFXComposer, letzter Zugriff 18.06.2010Olympische Winterspiele (2010): GeoView. Online unter http://www.vancouver2010.com/olympic-medals/geo-view/,letzter Zugriff 18.06.2010Redko, Alla (2010): JavaFX User Interface Controls Overview. Online unterhttp://javafx.com/docs/articles/UIControls/overview.jsp, letzter Zugriff 18.06.2010RiaStats (2010): Rich Internet Application Statistics. Online unter http://www.riastats.com/, letzter Zugriff 18.06.2010Microsoft (2010): Windows User Experience Interaction Guidelines. Online unter: http://msdn.microsoft.com/en-us/library/aa511258.aspx /, letzter Zugriff 18.06.2010Zitzelsberger, W. (2009): Synthetica BlackEye Highlights. Online unterhttp://weblogs.java.net/blog/wzberger/archive/2009/11/22/synthetica-blackeye-highlights, letzter Zugriff 18.06.2010KeywordsUsability Engineering, User Experience Design, User Interface Entwicklung, Client-Technologie, RIAKontakt:Thomas Memmel - Thorsten Büring - Nicolas Durville - Olivier Lalive d’Epinay WP Client-Technolgien V1Zühlke Engineering AGWiesenstrasse 10a ,8952 Schlieren (Zürich), Schweizinfo@zuehlke.com - www.zuehlke.com© Zühlke / Dez. 2010

http://www.slideshare.net	7
http://feeds2.feedburner.com	7
http://www.usability-architect.com	2
http://blog.bedienhilfe.ch	2
http://www.bedienhilfe.ch	1

Zühlke Whitepaper Client Technologien

by Thomas Memmel on May 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 19

Statistics

Zühlke Whitepaper Client Technologien — Document Transcript