SlideShare ist ein Scribd-Unternehmen logo
1 von 66
Downloaden Sie, um offline zu lesen
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
config/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/firebug/
Webdeveloper


• DOM Inspector
• Verschiedene Tools
  rund um Cookies,
  Forms, CSS,
  Bilders, Header, ....


           http://chrispederick.com/work/webdeveloper/
Venkman


• Profiler
• 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/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

Weitere ähnliche Inhalte

Ähnlich wie Ajax and JavaScript mit Ruby on Rails

Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Eric Eggert
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012
Florian Holzhauer
 

Ähnlich wie Ajax and JavaScript mit Ruby on Rails (20)

Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
Ext Js On Rails
Ext Js On RailsExt Js On Rails
Ext Js On Rails
 

Mehr von Jonathan Weiss

DevOpsDays Amsterdam - Observations in the cloud
DevOpsDays Amsterdam - Observations in the cloudDevOpsDays Amsterdam - Observations in the cloud
DevOpsDays Amsterdam - Observations in the cloud
Jonathan Weiss
 
CouchDB on Rails - FrozenRails 2010
CouchDB on Rails - FrozenRails 2010CouchDB on Rails - FrozenRails 2010
CouchDB on Rails - FrozenRails 2010
Jonathan Weiss
 

Mehr von Jonathan Weiss (20)

Docker on AWS OpsWorks
Docker on AWS OpsWorksDocker on AWS OpsWorks
Docker on AWS OpsWorks
 
ChefConf 2014 - AWS OpsWorks Under The Hood
ChefConf 2014 - AWS OpsWorks Under The HoodChefConf 2014 - AWS OpsWorks Under The Hood
ChefConf 2014 - AWS OpsWorks Under The Hood
 
AWS OpsWorks & Chef at the Hamburg Chef User Group 2014
AWS OpsWorks & Chef at the Hamburg Chef User Group 2014AWS OpsWorks & Chef at the Hamburg Chef User Group 2014
AWS OpsWorks & Chef at the Hamburg Chef User Group 2014
 
DevOpsDays Amsterdam - Observations in the cloud
DevOpsDays Amsterdam - Observations in the cloudDevOpsDays Amsterdam - Observations in the cloud
DevOpsDays Amsterdam - Observations in the cloud
 
Amazon SWF and Gordon
Amazon SWF and GordonAmazon SWF and Gordon
Amazon SWF and Gordon
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
Scalarium and CouchDB
Scalarium and CouchDBScalarium and CouchDB
Scalarium and CouchDB
 
Build your own clouds with Chef and MCollective
Build your own clouds with Chef and MCollectiveBuild your own clouds with Chef and MCollective
Build your own clouds with Chef and MCollective
 
NoSQL - Motivation and Overview
NoSQL - Motivation and OverviewNoSQL - Motivation and Overview
NoSQL - Motivation and Overview
 
NoSQL - An introduction to CouchDB
NoSQL - An introduction to CouchDBNoSQL - An introduction to CouchDB
NoSQL - An introduction to CouchDB
 
Running on Amazon EC2
Running on Amazon EC2Running on Amazon EC2
Running on Amazon EC2
 
Amazon EC2 in der Praxis
Amazon EC2 in der PraxisAmazon EC2 in der Praxis
Amazon EC2 in der Praxis
 
Infrastructure Automation with Chef
Infrastructure Automation with ChefInfrastructure Automation with Chef
Infrastructure Automation with Chef
 
Rails in the Cloud
Rails in the CloudRails in the Cloud
Rails in the Cloud
 
EventMachine
EventMachineEventMachine
EventMachine
 
CouchDB on Rails
CouchDB on RailsCouchDB on Rails
CouchDB on Rails
 
Rails in the Cloud - Experiences from running on EC2
Rails in the Cloud - Experiences from running on EC2Rails in the Cloud - Experiences from running on EC2
Rails in the Cloud - Experiences from running on EC2
 
CouchDB on Rails - RailsWayCon 2010
CouchDB on Rails - RailsWayCon 2010CouchDB on Rails - RailsWayCon 2010
CouchDB on Rails - RailsWayCon 2010
 
CouchDB on Rails - FrozenRails 2010
CouchDB on Rails - FrozenRails 2010CouchDB on Rails - FrozenRails 2010
CouchDB on Rails - FrozenRails 2010
 
NoSQL - Post-Relational Databases - BarCamp Ruhr3
NoSQL - Post-Relational Databases - BarCamp Ruhr3NoSQL - Post-Relational Databases - BarCamp Ruhr3
NoSQL - Post-Relational Databases - BarCamp Ruhr3
 

Ajax and JavaScript mit Ruby on Rails