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

Präsentation zum Thema: "Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation Sergej Becker Betreuender Prüfer: Prof. Dr. Olaf Zukunft KolloquiumZweitgutachter:Prof."—  Präsentation transkript:

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

2 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

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

4 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

5 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

6 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

7 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

8 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

9 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

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

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

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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

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

22 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

23 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.*

24 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.*

25 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.*

26 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

27 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

28 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 Kolloquium28 Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation

29 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

30 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

31 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

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

33 Vielen Dank für die Aufmerksamkeit!