Post on 06-Apr-2015
AJAX und Webentwicklung mit Prototype, André Hacker, Simon KönnickeInstitut für Informatik
Ajax und Webentwicklung mit Prototype
Einführung in Ajax, Vorstellung und Bewertung von Prototype.js, einer JavaScript Bibliothek für Ajax und Vorstellung der Webanwendung „Rent a bike“ (Prototyp)
2AJAX und Webentwicklung mit Prototype, 09.12.2011
Motivation
3AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
4AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung
Erwartete Kenntnisse• HTTP, HTML, CSS, XML• JavaScript & DOM• JSON
Fragen dennoch erlaubt und erwünscht!
5AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
• 1991 – Geburt WWW• HTTP, HTML und URLs• Ziel: Informationsaustausch (Webseiten)• Dann: Web-Anwendungen• Ausführung auf Webserver• Browser = User Interface• Großer Durchbruch im vergangenen Jahrzehnt (soziale
Netzwerke, Collaboration, Online Text/Tabellenbearbeitung,…)
6AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
Vorteile Webanwendungen (Anbietersicht)• Plattformunabhängig, nur Browser• Leichtere Aktualisierung• Zentrale Datenhaltung (Nutzungsstatistik, etc.)
Vorteile Webanwendungen (Nutzersicht)• Aktualität• Plattformunabhängig• Auf allen Geräten nutzbar (z.B. Urlaub, bei Freunden)• Keine Installation = Sofortige Nutzung• Thin-Client = Rechenpower des Servers nutzen
7AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
Nachteile „traditioneller “ Webanwendungen für Nutzer• Neu-Laden nach Aktion• Temporär nicht bedienbar, schlechte Usability• Latenz durch Internetübertragung• Schlechtere Performance als nativ
Große Diskrepanz zwischen Desktop-Anwendungen und Web-Anwendungen
8AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
Neue Technologien
1996: JavaScript & DOM & CSSWebanw. jetzt auf Webserver UND BrowserDynamisches Verändern der Seite
1999: XmlHttpRequest API
Asynchrone http-Abfragen im Hintergrund mit JavaScript
2005: Kombination = Ajax = „Asynchronous JavaScript with XML“
9AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
Webanwendungen mit Ajax• Neu-Laden nach Aktion• nebenläufig & asynchron im Hintergrund• Temporär nicht bedienbar, schlechte Usability• nur relevante Teile aktualisiert• (Latenz durch Internetübertragung)• (Schlechtere Performance als nativ)
10AJAX und Webentwicklung mit Prototype, 09.12.2011
1. Einführung – Motivation Ajax
Zusammenfassung• Ajax = Kombination alter Technologien• Ziel: Diskrepanz zwischen Web-Anwendungen und
Desktop-Anwendungen minimieren (insb. Usability)• Vorteile kommen voll zu Geltung großer Durchbruch der
Webanwendungen
11AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
12AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Funktionsweise
Asynchronous JavaScript with XML
Jesse James Garrett, A new approach to webapplications, 2005:
1. Asynchrone Übertragung
2. JavaScript clientseitig: Reaktion auf Nutzer & Nachladen von Inhalten
3. (Datenübertragung in XML)
13AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Funktionsweise
14AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Funktionsweise
15AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Funktionsweise
16AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Funktionsweise
Server
http(s) transport
Browser
User Interface/DOM
XMLHttpRequest
JavaScript
XmlHttpRequest API•API für Datenaustausch über HTTP(s)•Für Microsoft Outlook Web Access•1999 in IE5.0 eingeführt•Standardisierung W3C in Arbeit
Wrapper nutzen (Prototype.js)XML, JSON, BJSON
oder Custom
17AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
18AJAX und Webentwicklung mit Prototype, 09.12.2011
Ajax - Nebenwirkungen
• Zurück Button• Lesezeichen• Polling Problem / Server Push• Suchmaschinen und Barrierefreiheit• Hohe Anforderungen an Client• Transparenz (ggü. Nutzer)
19AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
20
Prototype Einführung und Motivation
• Prototype wurde im Zuge von Ruby on Rails entwickelt und als eigenständiges clientseitiges JavaScript „Framework“ veröffentlich
• Hauptaufgaben:• Convenience Funktionen wie die Selektoren für die DOM-
Elemente• Browserunabhängig entwickeln von
• Ajax,• Events• und mehr.
AJAX und Webentwicklung mit Prototype, 09.12.2011
21
Prototype und die Convenience Funktionen
HTML:
<html>
…
<body>
<div id=„foo“ class=„clsFoo“>bar</div>
<div class=„clsFoo“>bar</div>
</body>
</html>
Prototype:
$(„foo“).innerHTML
//gibt „bar“ zurück
$$(„.clsFoo“)
//gibt die beiden DOM-
// Elemente zurück
AJAX und Webentwicklung mit Prototype, 09.12.2011
22
Prototype und Ajax
new Ajax.Request('/your/url', {
onSuccess: function(response) {
var obj = response.responseText.evalJSON();
alert(“Der gesendete Name lautet” + obj.name);
}
onFailure: function(response) {
alert(“Verbindungs Probleme.”);
}
});
AJAX und Webentwicklung mit Prototype, 09.12.2011
23AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
24
Prototype Bewertung: Verbreitungsgrad
AJAX und Webentwicklung mit Prototype, 09.12.2011
25
Prototype Bewertung: Effizienz
selectorsjQuery
1.5.1Prototype
1.7
… … …
final time (less is better) 40 40
Benchmark mit Slickspeed (http://mootools.net/slickspeed/). Dabei werden die Selektoren auf Zuverlässigkeit und Zugriffgeschwindigkeit geprüft.
AJAX und Webentwicklung mit Prototype, 09.12.2011
26
Prototype Bewertung: Überblick
jQuery 1.5.1 Prototype 1.7
Dokumentation ++ +
Effizienz von den Selektoren
++ ++
Verbreitungsgrad ++ - -
Einarbeitungsaufwand 0 0
Funktionsumfang 0 0
Erweiterungen ++ -
Größe der Basis Bibliothek
92 KByte (minified),242 KByte (uncompressed)
160 Kbyte (uncompressed)
Skala geht von ++, +, 0, -, bis - -AJAX und Webentwicklung mit Prototype, 09.12.2011
27AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
28
Rent a bike
• Wir zeigen jetzt wie man sich bei unser Applikation• registriert,• ein Fahrrad leiht und zurückgibt und• als Admin die Fahrräder anlegt.• Dabei werden wir immer den Ajax-Counter auf
unserer Seite im Auge behalten.• Hier geht es zu unser Applikation:http://localhost:3000/
AJAX und Webentwicklung mit Prototype, 09.12.2011
29AJAX und Webentwicklung mit Prototype, 09.12.2011
Gliederung
1. Einführung – Motivation Ajax
2. Ajax
1. Funktionsweise
2. Nebenwirkungen
3. Prototype
1. Motivation
2. Elementare Funktionen
3. Bewertung
4. Rent a bike
5. Zusammenfassung und Ausblick
30AJAX und Webentwicklung mit Prototype, 09.12.2011
Zusammenfassung
• Ajax ist eine Schlüsseltechnologie für Webanwendungen geworden und nicht mehr weg zudenken.
• Bedeutung von Prototype nimmt stark ab• löst alle grundlegende Probleme mit einer angemessener Effizienz aber
• die Verbreitung ist nicht groß und • die Erweiterungen sind nicht umfänglich.
31AJAX und Webentwicklung mit Prototype, 09.12.2011
Ausblick
• Wie werden Nebenwirkungen von Web Application Frameworks gelöst?
• Neue Technologien / Trends• Websockets• Web-Anwendungen optimiert für Mobile• Native Code
32
Diskussion
Mobile: Gleiche Entwicklung von nativen Apps zu Webanwendung?
Was haltet ihr von dem Trend, Apps durch mobile-optimierte Webanwendungen zu ersetzen (z.B. jQuery Mobile)?
AJAX und Webentwicklung mit Prototype, 09.12.2011
33
BACKUP-FOLIEN
AJAX und Webentwicklung mit Prototype, 09.12.2011
34
MVC mit Ajax
AJAX und Webentwicklung mit Prototype, 09.12.2011
ViewBrowser Window
(DOM, HTML)
ControllerJavaScript Event Handlers
(onload, onclick,…)
Model ProxyJavaScript Stub
Objects
Client (Browser)
ServerModel
Http Ajax Requests
35
JSON
AJAX und Webentwicklung mit Prototype, 09.12.2011
object
{}
{ members }
members
pair
pair , members
Pair
string : value
array
[]
[ elements ]
elements
value
value , elements