JavaScript und Ajax mit Rails
-
Upload
sampetruda -
Category
Documents
-
view
812 -
download
0
description
Transcript of JavaScript und Ajax mit Rails
![Page 1: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/1.jpg)
JavaScript und Ajax mit Rails
Jonathan Weiss http://blog.innerewut.de
![Page 2: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/2.jpg)
JavaScript
![Page 3: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/3.jpg)
![Page 4: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/4.jpg)
![Page 5: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/5.jpg)
![Page 6: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/6.jpg)
![Page 7: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/7.jpg)
![Page 8: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/8.jpg)
![Page 9: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/9.jpg)
JavaScript - Die Wiederentdeckung
![Page 10: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/10.jpg)
Was hat sich geändert?
![Page 11: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/11.jpg)
Was hat sich geändert?
• Besinnung auf JS-Stärken und Usability
• Highlevel JavaScript Bibliotheken
• Tool-Support
![Page 12: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/12.jpg)
JavaScript
• prototype OO
• Closures
• DOM manipulation
• ECMA basics mittlerweile durchgängig etabliert
• XmlHTTPObject
![Page 13: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/13.jpg)
![Page 14: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/14.jpg)
High-level JS Bibliotheken
Browser-unabhängige Programmierung von
• DOM Manipulationen
• Effekten
• Ajax
• UnitTests
![Page 15: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/15.jpg)
Entwickler kann sich wieder auf
Applikation konzentrieren
![Page 16: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/16.jpg)
Was hat das jetzt mit Rails zu tun?
![Page 17: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/17.jpg)
![Page 18: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/18.jpg)
![Page 19: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/19.jpg)
Prototype und Scriptaculous
![Page 20: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/20.jpg)
$ und $$
![Page 21: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/21.jpg)
![Page 22: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/22.jpg)
Scriptaculous Effekte
![Page 23: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/23.jpg)
In & Out
• Appear / Fade
• BlindDown / BlindUp
• SlideDown / SlideUp
• Grow / Shrink
![Page 24: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/24.jpg)
Out
• SwitchOff
• Fold
• Puff
• Squish
• DropOut
![Page 25: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/25.jpg)
“Schau hier!”
• Shake
• Highlight
• Pulsate
![Page 26: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/26.jpg)
Ajax Recap
![Page 27: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/27.jpg)
AJAX
Asynchronous JavaScript And XML
![Page 28: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/28.jpg)
AJAH ?
Asynchronous JavaScript And HTML
![Page 29: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/29.jpg)
AJAJ ?
Asynchronous JavaScript And
JavaScript
![Page 30: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/30.jpg)
GET http://example.com/
TEXT/HTML
<html><body>...</body></html>
Normaler Request
![Page 31: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/31.jpg)
POST http://example.com/posts/new
Ajax Request
TEXT/XML
<?xml .... ><people> <person id=’1’>Alf</person></people>
AJAX Request
![Page 32: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/32.jpg)
POST http://example.com/posts/new
Ajax Request
TEXT/HTML
<div> <p> Post saved</p></div>
AJAX Request mit HTML Response
![Page 33: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/33.jpg)
Ajax
Einfacher Request
![Page 34: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/34.jpg)
Ajax
Einfacher Request mit callbacks
![Page 35: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/35.jpg)
Ajax
DOM Updates
![Page 37: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/37.jpg)
Was hat das jetzt mit Rails zu tun?
![Page 38: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/38.jpg)
Rails JavaScript Helper
![Page 39: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/39.jpg)
http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html
![Page 40: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/40.jpg)
in .rhtml:
link_to_remote
![Page 41: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/41.jpg)
in .rhtml:
Browser bekommt:
link_to_remote
![Page 42: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/42.jpg)
in .rhtml:
![Page 43: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/43.jpg)
in .rhtml:
Browser bekommt:
![Page 44: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/44.jpg)
in .rhtml:
form_remote_tag
![Page 45: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/45.jpg)
in .rhtml:
Browser bekommt:
form_remote_tag
![Page 46: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/46.jpg)
RJS -
Rails JavaScript Templates
![Page 48: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/48.jpg)
POST http://example.com/posts/new
Ajax Request
TEXT/JavaScript
![Page 49: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/49.jpg)
eval( )
![Page 50: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/50.jpg)
in .rjs:
![Page 51: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/51.jpg)
in .rjs:
Browser bekommt:
![Page 52: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/52.jpg)
new.rjs
Controller
![Page 53: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/53.jpg)
RJS Inline im Controller
![Page 54: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/54.jpg)
RJS Selectoren
Browser bekommt:
![Page 55: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/55.jpg)
Beliebiges JavaScript mit `<<`
Browser bekommt:
![Page 56: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/56.jpg)
http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html
![Page 57: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/57.jpg)
Testen und Debuggen
![Page 58: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/58.jpg)
config/development.rb
Debugging RJS Ausgabe im Browser
![Page 59: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/59.jpg)
ARTS: Another RJS Test System
http://glu.ttono.us/articles/2006/05/29/guide-test-driven-rjs-with-arts
![Page 60: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/60.jpg)
• Console / JavaScript Shell
• DOM Inspector
• XMLHTTPRequest Tracer
• Debugger
http://joehewitt.com/software/firebug/
![Page 61: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/61.jpg)
• DOM Inspector
• Verschiedene Tools rund um Cookies, Forms, CSS, Bilders, Header, ....
http://chrispederick.com/work/webdeveloper/
Webdeveloper
![Page 62: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/62.jpg)
• Profiler
• Debugger
• JavaScript Shell
http://www.mozilla.org/projects/venkman/
Venkman
![Page 63: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/63.jpg)
• DOM Inspector
• JavaScript Debugger
http://nightly.webkit.org/
Nightly + Drosera
![Page 64: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/64.jpg)
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
MS Script Debugger
![Page 65: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/65.jpg)
Fin
http://blog.innerewut.de/files/jweiss-rails-konferenz-2006.pdf
![Page 66: JavaScript und Ajax mit Rails](https://reader038.fdocuments.net/reader038/viewer/2022102804/54bd16fe4a795932448b45f7/html5/thumbnails/66.jpg)
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