Ajax and JavaScript mit Ruby on Rails

JavaScript und Ajax mit Rails Jonathan Weiss http://blog.innerewut.de

JavaScript

JavaScript - Die Wiederentdeckung

Was hat sich geändert?

Was hat sich geändert? • Besinnung auf JS-Stärken und Usability • Highlevel JavaScript Bibliotheken • Tool-Support

JavaScript • prototype OO • Closures • DOM manipulation • ECMA basics mittlerweile durchgängig etabliert • XmlHTTPObject

High-level JS Bibliotheken Browser-unabhängige Programmierung von • DOM Manipulationen • Effekten • Ajax • UnitTests

Entwickler kann sich wieder auf Applikation konzentrieren

Was hat das jetzt mit Rails zu tun?

Prototype und Scriptaculous

$ und $$

Scriptaculous Effekte

In & Out • Appear / Fade • BlindDown / BlindUp • SlideDown / SlideUp • Grow / Shrink

Out • SwitchOff • Fold • Puff • Squish • DropOut

“Schau hier!” • Shake • Highlight • Pulsate

Ajax Recap

AJAX Asynchronous JavaScript And XML

AJAH ? Asynchronous JavaScript And HTML

AJAJ ? Asynchronous JavaScript And JavaScript

Normaler Request GET http://example.com/ TEXT/HTML <html> <body> ... </body> </html>

AJAX Request POST http://example.com/posts/new Ajax Request TEXT/XML <?xml .... > <people> <person id=’1’>Alf</person> </people>

AJAX Request mit HTML Response POST http://example.com/posts/new Ajax Request TEXT/HTML <div> <p> Post saved</p> </div>

Ajax Einfacher Request

Ajax Einfacher Request mit callbacks

Ajax DOM Updates

http://wiki.script.aculo.us

Was hat das jetzt mit Rails zu tun?

Rails JavaScript Helper

http://api.rubyonrails.org/classes/ActionView/Helpers/ PrototypeHelper.html

link_to_remote in .rhtml:

link_to_remote in .rhtml: Browser bekommt:

in .rhtml:

in .rhtml: Browser bekommt:

form_remote_tag in .rhtml:

form_remote_tag in .rhtml: Browser bekommt:

RJS - Rails JavaScript Templates

GET http://example.com/ TEXT/HTML

POST http://example.com/posts/new Ajax Request TEXT/JavaScript

eval( )

in .rjs:

in .rjs: Browser bekommt:

Controller new.rjs

RJS Inline im Controller

RJS Selectoren Browser bekommt:

Beliebiges JavaScript mit `<<` Browser bekommt:

http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/ JavaScriptGenerator/GeneratorMethods.html

Testen und Debuggen

Debugging RJS Ausgabe im Browser conﬁg/development.rb

ARTS: Another RJS Test System http://glu.ttono.us/articles/2006/05/29/guide-test-driven-rjs-with-arts

• Console / JavaScript Shell • DOM Inspector • XMLHTTPRequest Tracer • Debugger http://joehewitt.com/software/ﬁrebug/

Webdeveloper • DOM Inspector • Verschiedene Tools rund um Cookies, Forms, CSS, Bilders, Header, .... http://chrispederick.com/work/webdeveloper/

Venkman • Proﬁler • Debugger • JavaScript Shell http://www.mozilla.org/projects/venkman/

Nightly + Drosera • DOM Inspector • JavaScript Debugger http://nightly.webkit.org/

MS Script Debugger http://www.microsoft.com/downloads/details.aspx? FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en

Fin http://blog.innerewut.de/ﬁles/jweiss-rails-konferenz-2006.pdf

Links http://api.rubyonrails.org http://mir.aculo.us/stuff/AdventuresInJavaScriptTesting.pdf http://mir.aculo.us/stuff/COR_20060413_RailsAjax.pdf http://mir.aculo.us/stuff/orcreatehappyusers.pdf http://www.slash7.com/articles/2006/07/26/javascript-boot-camp-tutorial

Ajax and JavaScript mit Ruby on Rails

0 comments

Notes on slide 1

1 Favorite