Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
2
Inhaltsverzeichnis
Was ist Web 2.0?AJAX – Konzepte und TechnikenPraxisproblemeAJAX – Entwurfs- und ImplementierungsmusterState-Of-The-Art Web-FrameworksFazit
zurück
3
Roter Faden
Domänen- und Applikations-EngineeringDomänen-Engineering
Applikations-Engineering
Domänen-EntwurfDomänen-
Implementierung
Applikations-Entwurf
Applikations-Implementierung
Domänen-AnalyseDomänen-Wissen
Applikations-Analyse
Produkt-spezifische Anforderungen
AnforderungenKonzepte & Referenz-
Architektur
Komponenten & Frameworks
Vortragsgegenstand
Web 2.0 LPM/ASEAJAX/RIA
GRAILSDWR
4
Was ist Web 2.0?
HistorischBegriff wurde von Dale Dougherty und Craig Cline 2004 als Konferenztitel entwickeltTim O‘Reilly und John Battele fassten 2005 erstmals Web 2.0 Schlüsselprinzipien zusammen
SchlüsselprinzipienBeteiligung statt Verbreitung
User-Generated-ContentDas Web als eine Plattform
Software als DienstleistungVerbreitungsmedium Web mit seinen Protokollen und Standards
Software-LebenszyklusVeröffentliche früh und veröffentliche oftTime-To-Market
Leichtgewichtige ProgrammiermodelleRIA (Rich Internet Applications)
Desktop-ähnliche GUI's für Web-Applikationen
5C
lien
t-S
eite
Ser
ver-
Sei
te
AJAX – Konzepte und Techniken
Architektur einer Web-Anwendung
Benutzungsoberfläche
Präsentationsschicht
Dienste
Fachkonzept / Geschäftslogik
Datenzugriff / Datenabstraktion
XHTML, CSS, XML, XSLT,
AJAX
JSF, JSP, XML, XSLT, ASP.NET
Web Services (SOAP, WSDL)
J2EE, POJO‘s, COM+, .NET
Hibernate, Language Integrated
Queries
DWR (Direct Web Remoting)
GRAILS
6
AJAX – Konzepte und Techniken
AJAX – Asynchronous Javascript And XMLClientseitige TechnikKeine zusätzliche Softwareinstallation notwendigFunktionsweise
XHTML und CSSDarstellung und Formatierung der InhalteDOM (Document Object Model)Dynamische Darstellung der Inhalte und InteraktionXML und XSLTDatenaustausch und TransformationXMLHTTPRequest-ObjektAsynchrone DatenabfrageJavascriptKlebstoff zwischen den o.g. Techniken
7
AJAX – Konzepte und Techniken
"Web 1.0"-Anwendung – synchrone Kommunikation!Client
Web-Browser
GUI
Server
Web-Server
Applikations-Server
«uses»
Datenbank
«uses»
HTTP-Request
HTTP-Response
Legende
HTTP-Request
HTTP-Response
Aufruf einer URL mit optionalen Parametern
HTTP-Antwort des Web-Servers bestehend aus XHTML-, CSS-, JS-Dateien sowie weiteren Medien
8
AJAX – Konzepte und Techniken
"Web 1.0"-Anwendung – synchrone Kommunikation!Client
Server
Zeit
Aktivität
Aktivität
Δt … keine Aktivität Δt … keine Aktivität
9
AJAX – Konzepte und Techniken
AJAX-Web-AnwendungClient
Web-Browser
GUI
Server
Web-Server
Applikations-Server
«uses»
Datenbank
«uses»
HTTP-Request
HTTP-Response
Legende
HTTP-Request
HTTP-Response
Anfrage mittels des XMLHTTPRequest-Objekts. Erfolgt optional auch asynchron im Hintergrund ≈ GUI friert nicht ein
HTTP-Antwort des Web-Servers bestehend aus einer XHTML-, XML-, CSS-, JS-Datei
AJAX-Engine
10
AJAX – Konzepte und Techniken
Asynchrone Kommunikation einer AJAX-Web-AnwendungClient
Server
Zeit
«GUI» Aktivität
Aktivität
«AJAX-Engine»XMLHTTP-Request-Objekt
Aktivität
«AJAX-Engine»XMLHTTP-Request-Objekt
asynchroner Callback (onreadystatechanged)
asynchroner Callback
11
AJAX – Konzepte und Techniken
Einsatz-Potenzial am Beispiel eines Online-Shops
12
AJAX – Konzepte und Techniken
Analyse des Datentransfervolumens:Online-Katalog besteht aus ca. 43KB DatenRequest für "In den Warenkorb legen" ca. 80 BytesResponse des Web-Servers
W3L-Gesamtkatalog (43KB) + Hinweis Artikel im Warenkorb (32 Bytes)Roundtrip-Datenvolumen: ~ 43KB
Verbesserung durch AJAX-EinsatzRequest für "In den Warenkorb legen" mittels XMLHTTPRequestResponse besteht lediglich aus der Anzahl der ArtikelRoundtrip-Datenvolumen: 112 Bytes!
VorteileServer-Hardware-AusnutzungSteigerung der möglichen Benutzerzahlen
13
AJAX – Konzepte und Techniken
Verwendung des XMLHTTPRequest-ObjektsInitialisierung unter Berücksichtigung verschiedener Browser
var xmlHttp = null;if (typeof XMLHttpRequest != 'undefined')
xmlHttp = new XMLHttpRequest();if (!xmlHttp) {
try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e) {
try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e) {xmlHttp = null;}}
}Asynchroner Aufruf über Callback-Schnittstelle
xmlHttp.onreadystatechange = meineCallbackFunktion;xmlHttp.open('GET', '<url>', true);xmlHttp.send();
Auslesen der Web-Server-Response-Datenfunction meineCallbackFunktion() {if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText); alert(xmlHttp.responseXML); }}
14
AJAX – Konzepte und Techniken
Fallbeispiel
15
AJAX – Konzepte und Techniken
ZusammenfassungHTTP-Requests werden im Hintergrund abgesetzt
Benutzeroberfläche blockiert nichtDesktop-ähnliches Erlebnis
Laden bestimmter Inhalte reduziert den NetzwerkverkehrVerbesserung der ServerauslastungSteigerung der parallelen Zugriffe
Was ist bei der Umstellung zu beachten?HTTP-Antwort enthält nur noch RohdatenDarstellung durch Javascript-Programme
16
Praxisprobleme
Latenzzeit des Internets bei asynchroner Kommunikation berücksichtigen
Web-Server darf sich nicht auf die ankommende Reihenfolge der Requests verlassen! Sequenzierung!
Sicherheitsbarrieren der Web-Browser berücksichtigenKein Zugriff außerhalb einer Domäne!Skriptblocker bei langen Operationen!
Objektorientierte ImplementierungObjekterzeugung per new-Operator in Javascript vermeiden. Objektpool benutzen!Kein Prototype für Member-Operationen verwenden
Browserkompatibilität beachtenDOM / XSLTSpeichermanagementLösung?
Entwurfs- und ImplementierungsmusterState-Of-The-Art Web-Frameworks
17
State-Of-The-Art Web-Frameworks
Vorteile von FrameworksFrameworks bieten implementierte Lösungen für bestimmte ProblembereicheSteigerung der Software-Qualität durch Wiederverwendung
Nachteile von FrameworksFramework-DschungelDecken meist nicht 100% aller Anforderungen
Kompromissbereitschaft: Abstriche oder NachbesserungenOpen-Source oder proprietär
Allgemein nicht zu beantworten
18
State-Of-The-Art Web-Frameworks
DWR (Direct Web Remoting)RPC (Remote Procedure Call)Generiert Javascript-Stellvertreter für Java-Klassen
Schnittstelle einer Java-Bean lässt sich über Javascript aufrufenAbstrahiert über XMLHTTPRequest-ObjektClient-zu-Server-Kommunikation
Erlaubt der serverseitigen Präsentationsschicht Zugriff auf GUI-Elemente
Server-zu-Client-KommunikationVorteil
Technische Details und Probleme sind für den Entwickler transparentBerücksichtigt Sequenzierung und Zeichencode-Umwandlung
19
State-Of-The-Art Web-Frameworks
GRAILSHintergründe
Inspiration von Groovy und Ruby on RailsFull Stack Web-Framework
Präsentationsschicht: Groovy Server Pages, SiteMeshFachkonzept: Groovy, QuartzDatenhaltung: Hibernate, HSQLDB
KonzepteAgile Software-Entwicklung durch Groovy-CodeHoher AbstraktionsgradConvention-over-ConfigurationMVC-Architektur
Für Java-Entwickler flache LernkurveZusammengefasst
Groovy für kleinere Web-Projekte
20
Domänen-Engineering
Applikations-Engineering
Domänen-Wissen
Produkt-spezifische Anforderungen
AnforderungenKonzepte & Referenz-
Architektur
Komponenten & Frameworks
Fazit
Domänen- und Applikations-Engineering
Domänen-EntwurfDomänen-
Implementierung
Applikations-Entwurf
Applikations-Implementierung
Domänen-Analyse
Applikations-Analyse
Web 2.0
Bedarf & Anforderungen
für Web-Anwendungen
AJAX
Praxis-Probleme
Frameworks
21
Vielen Dank!
In Zusammenarbeit mit der Fachhochschule Dortmund bieten wir
zwei Online-Studiengänge B.Sc. Web- und MedieninformatikB.Sc. Wirtschaftsinformatik
und 7 Weiterbildungen im IT-Bereich an.
W3L-AkademieInhouse-Schulungen
Wir bieten Inhouse-Schulungen und Beratung durch unsere IT-Experten und –Berater.
SchulungsthemenSoftwarearchitektur (OOD)
Requirements Engineering (OOA)
Nebenläufige & verteilte
Programmierung
Gerne konzipieren wir auch eine individuelle Schulung zu Ihren Fragestellungen.
Flexibel online lernen und studieren!
Sprechen Sie uns an!Tel. 0231/61 804-0, [email protected]
Besuchen Sie unsere Akademie!http://Akademie.W3L.de