Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Sergej Becker Betreuender Prüfer: Prof. Dr. Olaf Zukunft KolloquiumZweitgutachter:Prof. Dr. Michael Neitzke1

Motivation: Warum Ressourcenoptimierung von Webapplikationen? Ziele der Arbeit Grundlagen Anforderungsanalyse Entwurf Implementierung Evaluierung: Test und Testergebnisse Fazit: Ergebnisse und Ausblick Demo Inhalt Kolloquium2 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Motivation: Warum Ressourcenoptimierung von Webapplikationen? Kolloquium3 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Ressourcen- Vorstellung und Betrachtung von ressourcenaufwendigen Webapplikationen Erarbeitung der Ressourcenoptimierung von Webapplikationen Analyse der erarbeiteten Ressourcenoptimierungsmöglichkeit am Beispiel einer RIA (Anziehanwendung) Entwurf dieser Webapplikation anhand der Analyse, sowie prototypische Umsetzung des Entwurfs zwecks Überprüfung der Realisierbarkeit Ziele der Arbeit Kolloquium4 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Arten: –serverseitig –clientseitig Architektur –standalone –integriert Webapplikation = Applikation + Benutzerschnittstelle Web- Browser Sehr vorteilhaft –hohe Verfügbarkeit –keine Installation (Art: serverseitig) –große Verbreitung Tendenz: hohe Ressourcenanforderungen Grundlagen: Webapplikationen Kolloquium5 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Relevante Leistungen: –Speicherplatz –Monatlicher Traffic bzw. monatliches Übertragungsvolumen Ressourcenaufwendige Webapplikationen beeinflussen diese Leistungen Tendenz: Kosten steigen Grundlagen: Domänendienstleistungen Kolloquium6 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Kosten = Entwicklungskosten + Betriebskosten Entwicklung der Webapplikation → meistens wiederholbare Arbeit bzw. Komponenten Betriebskosten (Traffic- und Speicherkosten) → Hauptverursacher der Kosten Betriebskosten → abhängig von der Besucherzahl Ressourcenoptimierung muss die o.g. Punkte beachten ! Grundlagen: Kosten Kolloquium7 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Größe der Webapplikation Traffic Implementierungsaufwand der Webapplikation Performanz bzgl. der Interaktivität der Benutzerschnittstelle Erarbeitete Ressourcenoptimierung Kolloquium8 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

riesige (mglst. unendliche) Benutzerdatenbank Persistenz: –unendlicher Speicherplatz –zuverlässig –effizient Sehr großer Speicherplatzbedarf der Webapplikation Universalität Grundlegende Anforderungen Kolloquium9 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

‚Crossdomain‘-Kommunikation Sehr geringer Speicherplatzbedarf der Webapplikation Hoher Asynchronitätsgrad der Webapplikation effizient mit dem Ziel: Entwicklungs- und Betriebskosten so viel wie möglich zu reduzieren Technische Anforderungen Kolloquium10 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Anziehanwendung Repräsentant Kolloquium11 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Webapplikationen Rich Internet Applikationen (RIAs) RIA: die zu implementierende ‚Anziehanwendung‘

Anziehanwendung Repräsentant Kolloquium12 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Anwendungsfälle Kolloquium13 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Login Logout Laden der Inventarbilder Drag-And-Drop der Inventarbilder Skalieren der Inventarbilder Laden der Wetterinformation Bildbearbeitung

RIA: –‚Crossdomain‘-Kommunikation ohne Mitspielen der Home- Domäne → Serverauslastung ‚gegen Null‘ –performanter hinsichtlich der Validierungen und Bedienbarkeit Web Services und Web-APIs: –asynchron –erweiterbar –Login-, Cloud-Anforderungen → gelöst Asynchrone Kommunikation: trägt der allgemeinen Performancesteigerung bei Mittel der Wahl Kolloquium14 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Architektur Framework, Web Services und Web-APIs Entwurfsmuster Webapplikationskomponenten im Detail –LOGIN –CLOUD –WEATHER –ANALYTICS –CUSTOMIZATION Wie wurden die Anforderungen berücksichtigt? Entwurf Kolloquium15 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Fachliche Architektur Kolloquium16 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation User Interface (UI) LOGIN CLOUD CUSTOMIZATION BILDBEARBEI TUNG ANALYTIC WEATHER Web Services und Web-APIs YAHOO: FLICKR YAHOO : OpenID GOOGLE: OpenID GOOGLE: Analytics YAHOO: Weather RSS Feed

Technische Architektur Kolloquium17 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Browser Flash Player Webapplikation LOGIN CLOUD WEATHER ANALYTICS CUSTOMIZA TION BILDBEARBEI TUNG Webserver (Apache) Externe Web Services GOOGLE OpenID 2.0 YAHOO OpenID 2.0 YAHOO Flickr YAHOO Weather RSS Feed GOOGLE Analytics com.adobe.webapis.flickr.* com.yahoo.webapi s.weather.* com.google.analytics.* com.dougmccune.containers.* http

Flash bzw. Flex (Flex-SDK 3.2.0): –eine der führenden Plattformen –clientseitige Architektur –sehr große Verbreitung und Akzeptanz –Open-Source-Produkt Verwendetes Framework für RIA Kolloquium18 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

YAHOO Web Services und Web-APIs –Flickr Cloud API* –Yahoo Authentication & Sign In* –Yahoo Weather RSS Feed* GOOGLE Web Services und Web-APIs –GOOGLE ACCOUNT API* –PICASA WEB ALBUMS DATA API –GOOGLE ANALYTICS* Verwendete Web Services und Web-APIs Kolloquium19 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Komponentenbasierte MVC-Architektur: –Model: Klassen für Daten- und Schnittstellenkapselung –View: Klassen für das UI –Controller: Klassen für die Logik Lose Kopplung: –erhöht Wiederverwendbarkeit –reduziert Abhängigkeit Entwurfsmuster Kolloquium20 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

externe Aufrufe: –LOGIN –CLOUD –WEATHER –ANALYTICS interne Aufrufe: –CUSTOMIZATION Webapplikationskomponenten Kolloquium21 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

LOGIN Kolloquium22 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation > Openid OpenidImplBase #createOpenidParameters() : URLVariables #createOpenidParametersWithAttributes() : URLVariables #createOpenidParametersPlusOAuth() : URLVariables #initOpenidService() : void #openidService() : void #setCookiesForOpenidService() : void #filterOpenidService() : void #showOpenidServiceDataTip(MouseEvent) : void OpenidYahoo #initOpenidService() : void #openidService() : void #setCookiesForOpenidService() : void #filterOpenidService() : void #showOpenidServiceDataTip(MouseEvent) : void OpenidGoogle > Button > flash.net Component

CLOUD Kolloquium23 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation > Button #initCloudService() : void #getCloud() : void #cloudUserClick() : void #genericResponseHandler() : Event #initCloudService() : void #getCloud() : void #onPeopleFindByUsername(FlickrResultEvent) : void #createUrl(String, String, String) : void CloudYahoo > Cloud CloudImplBase > TileList FlickrResultEvent Component > com.adobe.webapis.flickr.*

WEATHER Kolloquium24 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation > Button > Label, Image #initWeatherService() : void #getWeather() : void #weatherResultEventHandler(WeatherResultEvent) : void #weatherErrorEventHandler(WeatherErrorEvent) : void #showWeatherServiceDataTip(MouseEvent) : void WeatherYahoo > Weather WeatherImplBase #initWeatherService() : void #getWeather() : void #weatherResultEventHandler(WeatherResultEvent) : void #weatherErrorEventHandler(WeatherErrorEvent) : void #showWeatherServiceDataTip(MouseEvent) : void WeatherResultEvent Component > com.yahoo.webapis.weather.*

ANALYTICS Kolloquium25 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation > Analytics #initAnalyticsService() : void AnalyticsImplBase #initAnalyticsService() : void #ga4OpenidGoogle() : void #ga4OpenidYahoo() : void #ga4WeatherYahoo() : void #ga4CloudYahoo() : void #ga4CloudYahooPerformanceStart() : void #ga4CloudYahooPerformanceEnd() : void AnalyticsGoogle > com.google.analytics.*

CUSTOMIZATION Kolloquium26 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation > Canvas > Customization doDragStart(MouseEvent) : void doDragEnter(DragEvent) : void doDragDrop(DragEvent) : void dragOverHandler(DragEvent) : void CustomizationImpl doDragStart(MouseEvent) : void doDragEnter(DragEvent) : void doDragDrop(DragEvent) : void dragOverHandler(DragEvent) : void > com.dougmccune.containers.* > mx.controls.* > mx.core.* DragEvent Component CLOUDBILDBEARBEITUNG

Anforderungen Umsetzung Benutzerdatenbank Persistenz Speicherplatzbedarf Hoher Asynchronitätsgrad Erweiterbarkeit ‚Crossdomain‘-Kommunikation Effizienz Entwurf: Zusammenfassung Kolloquium27 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Web Services und Web- APIs Entwurfsmuster clientseitige Anwendung clientseitige Anwendung, Asynchronität

Entwicklungsumgebung: –Adobe Flex Builder 3 Pro (akademische Lizenz) –Framework Flex-SDK –Laufzeitumgebung: Webserver Apache –Deployment: SFTP-Client (WinSCP) Testumgebung: –der o.g. Webserver (HAW) –eigener zur Verfügung stehender Webserverplatz (HAW) –Browser Firefox 3, IE 8 (Flash Player 10) –Standard-PC und Notebook (Windows 7 Professional) Implementierung Kolloquium28 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Test und Testergebnisse Kolloquium29 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Traffic-Darstellung nach dem ersten Aufruf der Webapplikation Traffic-Darstellung nach dem Abrufen der Inventarbilder des jeweiligen Benutzers

Ressourcenoptimierung: –RIA + Web Services und Web-APIs = geringe Komplexität Analyse der Ansatzes: geeignet –clientseitige Anwendung –externe Web Services und Web-APIs Entwurf der Webapplikation: –realisierbar Umsetzung und Empfehlungen: –zu großen Teilen umgesetzt –benutzerfreundliches und ausfallsicheres Fehler-Handling –komplexe Anwendungsfälle → ausreichende Unterstützungshilfen –Web Services und Web-APIs → Feldvalidierungen Fazit: Ergebnisse Kolloquium30 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

fehlende Funktionalität: –Usability-Verbesserung (CUSTOMIZATION) –Bildbearbeitung –interessante zusätzliche Features weitere Ziele: –Untersuchung der Wahrnehmung Erweiterungen: –OAuth-Authetifizierung → Performancesteigerung –Zusammenhang zwischen den verwendeten Web Services und Web- APIs Ausblick: mögliche Erweiterungen Kolloquium31 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Demo Kolloquium32 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Demo

Vielen Dank für die Aufmerksamkeit!