ressourcenoptimierung von webapplikationen am beispiel einer rich internet applikation sergej becker...
Post on 06-Apr-2016
217 Views
Preview:
TRANSCRIPT
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?
Kolloquium 3Ressourcenoptimierung 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
Kolloquium 4Ressourcenoptimierung 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
Kolloquium 5Ressourcenoptimierung 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
Kolloquium 6Ressourcenoptimierung 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
Kolloquium 7Ressourcenoptimierung 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
Kolloquium 8Ressourcenoptimierung 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
Kolloquium 9Ressourcenoptimierung 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
Kolloquium 10Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Anziehanwendung
Repräsentant
Kolloquium 11Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Webapplikationen
Rich Internet Applikationen (RIAs)
RIA: die zu implementierende ‚Anziehanwendung‘
Anziehanwendung
Repräsentant
Kolloquium 12Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Anwendungsfälle
Kolloquium 13Ressourcenoptimierung 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
Kolloquium 14Ressourcenoptimierung 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
Kolloquium 15Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Fachliche Architektur
Kolloquium 16Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
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
Kolloquium 17Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
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
Kolloquium 18Ressourcenoptimierung 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
Kolloquium 19Ressourcenoptimierung 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
Kolloquium 20Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
• externe Aufrufe:– LOGIN– CLOUD– WEATHER– ANALYTICS
• interne Aufrufe:– CUSTOMIZATION
Webapplikationskomponenten
Kolloquium 21Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
LOGIN
Kolloquium 22Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
<<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
Kolloquium 23Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
<<mx.core.UIComponent>>Button
#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
Kolloquium 24Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
<<mx.core.UIComponent>>Button
<<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
Kolloquium 25Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
<<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
Kolloquium 26Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
<<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
Kolloquium 27Ressourcenoptimierung 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 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
Kolloquium 28Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Test und Testergebnisse
Kolloquium 29Ressourcenoptimierung 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
Kolloquium 30Ressourcenoptimierung 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
Kolloquium 31Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Demo
Kolloquium 32Ressourcenoptimierung von Webapplikationen am Beispiel einer Rich Internet Applikation
Demo
Vielen Dank für die Aufmerksamkeit!
top related