AJAX und Ruby on Rails

Transkript

1 AJAX und Ruby on Rails Web-2.0-Kongreß Frankfurt (slightly updated for AWE12) Prof. Dr.-Ing. Carsten Bormann 1

2 Was ist Web 2.0? (nach Paul Graham) (1) AJAX (2) Demokratie (Participation Control) (3) Ethik: Don t be evil 2

3 Ü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

4 Umfrage: 4

5 Umfrage: } Wer hat schon etwas von AJAX gehört? 4

6 Umfrage: } Wer hat schon etwas von AJAX gehört? } Wer hat es schon ausprobiert? 4

7 Umfrage: } Wer hat schon etwas von AJAX gehört? } Wer hat es schon ausprobiert? } Wer hat schon ein Projekt damit durchgeführt? 4

8 The State of Web Development 2006/2007 Results Preview Source: The State of Web Development 2006/2007, SitePoint Pty Ltd. and Ektron, Inc., August Which technologies do you or your organization use in your current web projects? AJAX: Stand Juni/Juli

9 The State of Web Development 2006/2007 Results Preview Source: The State of Web Development 2006/2007, SitePoint Pty Ltd. and Ektron, Inc., August Which technologies are you or your organization planning to use in your future web projects (next 12 months)? AJAX: Planung 12 Monate 6

10 Was ist AJAX? 7

11 Was ist AJAX? } Garrett: Asynchronous JavaScript and XML ( ) 7

12 Was ist AJAX? } Garrett: Asynchronous JavaScript and XML ( ) } 2006: Pizza Hefeteig (HTML) Käse (JavaScript) Tomaten (CSS) Oregano (XMLHttpRequest) Weitere Toppings Sardellen (XML) Salami (JSON) 7

13 Interaktionsmuster vor AJAX 8

14 Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) 8

15 Interaktionsmuster vor AJAX } Rein Client-seitig: DHTML (JavaScript) } Server-Zugriff: Abschicken (Link verfolgen, Formular abschicken) 8

16 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

17 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

18 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

19 Interaktion mit AJAX 9

20 Interaktion mit AJAX } Längeres Verbleiben auf einer Seite 9

21 Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application 9

22 Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt 9

23 Interaktion mit AJAX } Längeres Verbleiben auf einer Seite Extremfall: Single-Page Application } Interaktionen mit dem Server finden im Hintergrund statt AJAX: asynchronous 9

24 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

25 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

26 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

27 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

28 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

29 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

30 AJAX ist ein Rezept... 10

31 AJAX ist ein Rezept... }... keine genaue Liste von Zutaten 10

32 AJAX ist ein Rezept... }... keine genaue Liste von Zutaten } Asynchronität kann auf vielen Wegen erreicht werden XMLHttpRequest IFrames Cookies 10

33 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

34 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

35 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

36 Alte Fehler nicht wiederholen 12

37 Alte Fehler nicht wiederholen } Keine coolen Effekte bringt ein Effekt einen Nutzen in der Interaktionslogik? 12

38 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

39 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

40 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

41 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

42 Source: Ajaxian.com 14

43 Source: Ajaxian.com 14

44 15

45 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

46 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