Post on 19-Jan-2015
description
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