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

Ressourcenoptimierung von Webapplikationen am Beispiel einer

Rich Internet Applikation

Sergej Becker

Betreuender Prüfer: Prof. Dr. Olaf ZukunftKolloquium Zweitgutachter: 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

Kolloquium 2Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

Motivation: Warum Ressourcenoptimierung von Webapplikationen?


• 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


• 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


• Relevante Leistungen:– Speicherplatz– Monatlicher Traffic bzw. monatliches Übertragungsvolumen

• Ressourcenaufwendige Webapplikationen beeinflussen diese Leistungen

• Tendenz: Kosten steigen

Grundlagen: Domänendienstleistungen


• 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


• Größe der Webapplikation

• Traffic

• Implementierungsaufwand der Webapplikation

• Performanz bzgl. der Interaktivität der Benutzerschnittstelle

Erarbeitete Ressourcenoptimierung


• riesige (mglst. unendliche) Benutzerdatenbank

• Persistenz:– unendlicher Speicherplatz– zuverlässig– effizient

• Sehr großer Speicherplatzbedarf der Webapplikation

• Universalität

Grundlegende Anforderungen


• ‚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


Anziehanwendung

Repräsentant


Webapplikationen

Rich Internet Applikationen (RIAs)

RIA: die zu implementierende ‚Anziehanwendung‘

Anziehanwendung

Repräsentant


Anwendungsfälle


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


• Architektur• Framework, Web Services und Web-APIs• Entwurfsmuster• Webapplikationskomponenten im Detail

– LOGIN– CLOUD– WEATHER– ANALYTICS– CUSTOMIZATION

• Wie wurden die Anforderungen berücksichtigt?

Entwurf


Fachliche Architektur


User Interface (UI)

LOGIN

CLOUD

CUSTOMIZATION

BILDBEARBEITUNG

ANALYTICWEATHER

Web Services und Web-APIs

YAHOO: FLICKR

YAHOO: OpenID

GOOGLE: OpenID GOOGLE:

AnalyticsYAHOO: Weather RSS Feed

Technische Architektur


BrowserFlash Player

Webapplikation

LOGIN

CLOUD

WEATHER

ANALYTICS

CUSTOMIZATION

BILDBEARBEITUNG

Webserver (Apache)

ExterneWeb Services

GOOGLE OpenID 2.0

YAHOO OpenID 2.0

YAHOO Flickr

YAHOO Weather RSS

Feed

GOOGLE Analytics

com.adobe.webapis.flickr.*

com.yahoo.webapis.weather.*

com.google.analytics.*

com.dougmccune.containers.*

http

http

http

http

http

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


• 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


• 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


• externe Aufrufe:– LOGIN– CLOUD– WEATHER– ANALYTICS

• interne Aufrufe:– CUSTOMIZATION

Webapplikationskomponenten


LOGIN


<<interface>>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

<<mx.core.UIComponent>>Button

<<package>>

flash.net

Component

CLOUD



#initCloudService() : void#getCloud() : void#cloudUserClick() : void#genericResponseHandler() : Event

#initCloudService() : void#getCloud() : void#onPeopleFindByUsername(FlickrResultEvent) : void#createUrl(String, String, String) : void

CloudYahoo

<<interface>>Cloud

CloudImplBase

<<mx.core.UIComponent>>TileList

FlickrResultEvent

Component

<<package>>com.adobe.webapis.flickr.*

WEATHER



<<mx.core.UIComponent>>Label, Image

#initWeatherService() : void#getWeather() : void#weatherResultEventHandler(WeatherResultEvent) : void#weatherErrorEventHandler(WeatherErrorEvent) : void#showWeatherServiceDataTip(MouseEvent) : void

WeatherYahoo

<<interface>>Weather

WeatherImplBase

#initWeatherService() : void#getWeather() : void#weatherResultEventHandler(WeatherResultEvent) : void#weatherErrorEventHandler(WeatherErrorEvent) : void#showWeatherServiceDataTip(MouseEvent) : void

WeatherResultEvent

Component

<<package>>com.yahoo.webapis.weather.*

ANALYTICS


<<interface>>Analytics

#initAnalyticsService() : void

AnalyticsImplBase

#initAnalyticsService() : void

#ga4OpenidGoogle() : void#ga4OpenidYahoo() : void#ga4WeatherYahoo() : void#ga4CloudYahoo() : void#ga4CloudYahooPerformanceStart() : void#ga4CloudYahooPerformanceEnd() : void

AnalyticsGoogle

<<package>>com.google.analytics.*

CUSTOMIZATION


<<mx.core.UIComponent>>Canvas

<<interface>>Customization

doDragStart(MouseEvent) : voiddoDragEnter(DragEvent) : voiddoDragDrop(DragEvent) : voiddragOverHandler(DragEvent) : void

CustomizationImpl

doDragStart(MouseEvent) : voiddoDragEnter(DragEvent) : voiddoDragDrop(DragEvent) : voiddragOverHandler(DragEvent) : void

<<package>>com.dougmccune.containers.*

<<package>>mx.controls.*

<<package>>mx.core.*

<<package>>mx.core.*

DragEvent

Component

CLOUDBILDBEARBEITUNG

Anforderungen Umsetzung

BenutzerdatenbankPersistenzSpeicherplatzbedarfHoher Asynchronitätsgrad

Erweiterbarkeit

‚Crossdomain‘-Kommunikation

Effizienz

Entwurf: Zusammenfassung


Web Services und Web-APIs

Entwurfsmuster

clientseitige Anwendung

clientseitige Anwendung, Asynchronität

• Entwicklungsumgebung:– Adobe Flex Builder 3 Pro (akademische Lizenz)– Framework Flex-SDK 3.2.0– Laufzeitumgebung: Webserver Apache 2.2.3– 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


Test und Testergebnisse


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


• 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


Demo


Demo

Vielen Dank für die Aufmerksamkeit!

Documents

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