Embed Size (px)
DESCRIPTION
A talk about Prototype and Scriptaculous and their integration in Ruby on Rails. Further RJS is introduced. Presented by Jonathan Weiss at the Rails Konferenz 2006.
Citation preview
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
GET http://example.com/
TEXT/HTML
<html><body>...</body></html>
Normaler Request
POST http://example.com/posts/new
Ajax Request
TEXT/XML
<?xml .... ><people> <person id=’1’>Alf</person></people>
AJAX Request
POST http://example.com/posts/new
Ajax Request
TEXT/HTML
<div> <p> Post saved</p></div>
AJAX Request mit HTML Response
Ajax
Einfacher Request
Ajax
Einfacher Request mit callbacks
Ajax
DOM Updates
Was hat das jetzt mit Rails zu tun?
Rails JavaScript Helper
http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html
in .rhtml:
link_to_remote
in .rhtml:
Browser bekommt:
link_to_remote
in .rhtml:
in .rhtml:
Browser bekommt:
in .rhtml:
form_remote_tag
in .rhtml:
Browser bekommt:
form_remote_tag
RJS -
Rails JavaScript Templates
POST http://example.com/posts/new
Ajax Request
TEXT/JavaScript
eval( )
in .rjs:
in .rjs:
Browser bekommt:
new.rjs
Controller
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
config/development.rb
Debugging RJS Ausgabe im Browser
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/firebug/
• DOM Inspector
• Verschiedene Tools rund um Cookies, Forms, CSS, Bilders, Header, ....
http://chrispederick.com/work/webdeveloper/
Webdeveloper
• Profiler
• Debugger
• JavaScript Shell
http://www.mozilla.org/projects/venkman/
Venkman
• DOM Inspector
• JavaScript Debugger
http://nightly.webkit.org/
Nightly + Drosera
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
MS Script Debugger
Fin
http://blog.innerewut.de/files/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
