AJAX und Ruby on Rails Web-2.0-Kongreß 2006-10-10 Frankfurt (slightly updated for AWE12) Prof. Dr.-Ing. Carsten Bormann <cabo@tzi.org> 1
Was ist Web 2.0? (nach Paul Graham) (1) AJAX (2) Demokratie (Participation Control) (3) Ethik: Don t be evil 2
Übersicht } AJAX das Ende schwerfälliger Web-Schnittstellen } Herausforderungen bei der Entwicklung von AJAX- Anwendungen } Ruby on Rails die Entwicklungsumgebung der Wahl für Agile Web-Entwicklung } AJAX-Unterstützung in Rails 3
Umfrage: 4
Umfrage: } Wer hat schon etwas von AJAX gehört? 4
Umfrage: } Wer hat schon etwas von AJAX gehört? } Wer hat es schon ausprobiert? 4
Umfrage: } Wer hat schon etwas von AJAX gehört? } Wer hat es schon ausprobiert? } Wer hat schon ein Projekt damit durchgeführt? 4
The State of Web Development 2006/2007 Results Preview Source: The State of Web Development 2006/2007, SitePoint Pty Ltd. and Ektron, Inc., August 2006 http://www.sitepoint.com/launch/survey06/ Which technologies do you or your organization use in your current web projects? AJAX: Stand Juni/Juli 2006 5
The State of Web Development 2006/2007 Results Preview Source: The State of Web Development 2006/2007, SitePoint Pty Ltd. and Ektron, Inc., August 2006 http://www.sitepoint.com/launch/survey06/ Which technologies are you or your organization planning to use in your future web projects (next 12 months)? AJAX: Planung 12 Monate 6
Was ist AJAX? 7
Was ist AJAX? } Garrett: Asynchronous JavaScript and XML (2005-02-18) 7
Was ist AJAX? } Garrett: Asynchronous JavaScript and XML (2005-02-18) } 2006: Pizza Hefeteig (HTML) Käse (JavaScript) Tomaten (CSS) Oregano (XMLHttpRequest) Weitere Toppings Sardellen (XML) Salami (JSON) 7
Interaktionsmuster vor AJAX 8
Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) 8
Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) } Server-Zugriff: Abschicken (Link verfolgen, Formular abschicken) 8
Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) } Server-Zugriff: Abschicken (Link verfolgen, Formular abschicken) } Seite wird neu aufgebaut Im besten Fall wird der Fokus geeignet rekonstruiert 8
Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) } Server-Zugriff: Abschicken (Link verfolgen, Formular abschicken) } Seite wird neu aufgebaut Im besten Fall wird der Fokus geeignet rekonstruiert } Bruch im Interaktionsfluß 8
Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) } Server-Zugriff: Abschicken (Link verfolgen, Formular abschicken) } Seite wird neu aufgebaut Im besten Fall wird der Fokus geeignet rekonstruiert } Bruch im Interaktionsfluß } 1990er-Krücke: Frames starr Verlust wichtiger Web-Funktionen 8
Interaktion mit AJAX 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert AJAX: JavaScript 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert AJAX: JavaScript } Server-Interaktion kann mit XML stattfinden 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert AJAX: JavaScript } Server-Interaktion kann mit XML stattfinden AJAX: XML 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert AJAX: JavaScript } Server-Interaktion kann mit XML stattfinden AJAX: XML AJA* wäre passender 9
Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous } Wichtige Funktionen sind in JavaScript programmiert AJAX: JavaScript } Server-Interaktion kann mit XML stattfinden AJAX: XML AJA* wäre passender } Keine neuen Browser, Plugins,... 9
AJAX ist ein Rezept... 10
AJAX ist ein Rezept... }... keine genaue Liste von Zutaten 10
AJAX ist ein Rezept... }... keine genaue Liste von Zutaten } Asynchronität kann auf vielen Wegen erreicht werden XMLHttpRequest IFrames Cookies 10
AJAX ist ein Rezept... }... keine genaue Liste von Zutaten } Asynchronität kann auf vielen Wegen erreicht werden XMLHttpRequest IFrames Cookies } Datenformat muß nicht XML sein HTML JSON JavaScript! 10
AJAX ist ein Rezept... }... keine genaue Liste von Zutaten } Asynchronität kann auf vielen Wegen erreicht werden XMLHttpRequest IFrames Cookies } Datenformat muß nicht XML sein HTML JSON JavaScript! } Konstante: JavaScript 10
JavaScript: Die unterschätzte Sprache } Schlechter Leumund Jahrelanges inkompetentes Cut-and-Paste Fragwürdige Effekte Gestörte Barrierefreiheit } Tatsache: JavaScript ist eine der fünf führenden dynamischen Programmiersprachen } Hintergrund: Self, Smalltalk 11
Alte Fehler nicht wiederholen 12
Alte Fehler nicht wiederholen } Keine coolen Effekte bringt ein Effekt einen Nutzen in der Interaktionslogik? 12
Alte Fehler nicht wiederholen } Keine coolen Effekte bringt ein Effekt einen Nutzen in der Interaktionslogik? } Websites müssen auch ohne JavaScript funktionieren Unobtrusive JavaScript Zurückfallen auf Standard-HTML Barrierefreiheit 12
Alte Fehler nicht wiederholen } Keine coolen Effekte bringt ein Effekt einen Nutzen in der Interaktionslogik? } Websites müssen auch ohne JavaScript funktionieren Unobtrusive JavaScript Zurückfallen auf Standard-HTML Barrierefreiheit } Web-Funktionen müssen weiter funktionieren: Bookmarks und Permalinks; Suchmaschinen Zurück-Knopf 12
Alte Fehler nicht wiederholen } Keine coolen Effekte bringt ein Effekt einen Nutzen in der Interaktionslogik? } Websites müssen auch ohne JavaScript funktionieren Unobtrusive JavaScript Zurückfallen auf Standard-HTML Barrierefreiheit } Web-Funktionen müssen weiter funktionieren: Bookmarks und Permalinks; Suchmaschinen Zurück-Knopf } Es gibt noch wenig AJAX-Konventionen Benutzer brauchen mehr Führung! 12
AJAX-Entwicklung: nicht unproblematisch! } AJAX = Browser jenseits ihres Designs nutzen! Bugs Kompatibilitätsfragen (Mehrfachprogrammierung) } Abhilfe: JavaScript-Bibliotheken enthalten bereits die nötigen Browserspezifika werden kontinuierlich an neue Browser angepaßt } Führende JavaScript-Bibliotheken: Prototype/Script.aculo.us/Rico Dojo 13
Source: Ajaxian.com 14
Source: Ajaxian.com 14
15
AJAX vs. RIA } Rich Internet Application = Mehr als Web 1.0 } Java Applets: Naheliegend für Java-Anwender Komplexe Berechnungen, interaktive Grafik } Flash: sieht gut aus; ActionScript JavaScript Lösung der Wahl für Audio/Video-Bestandteile Integration mit Web nach wie vor nicht gut } AJAX kann diese (und andere) Richer Plugins integrieren 16
Rails in AJAX } MVC-Modell: AJAX wird auf View-Seite durch Helper unterstützt } Enge Integration mit Prototype und Script.aculo.us Die wichtigsten Aktionen und Effekte für AJAX-Websites sind da Links und Formulare; Observer und Updater; Visuelle Effekte } Neu in Rails 1.1: RJS Ruby-Notation für JavaScript-Programme JavaScript-Kenntnisse nur noch für Debugging erforderlich } Neu in Rails 3: Unobtrusive JavaScript... und freie Auswahl des JavaScript-Frameworks 17