SlideShare uma empresa Scribd logo
1 de 28
Unobtrusive
     JavaScript
     in Rails 3
           Hussein Morsy

             23.02.2010
Heinrich-Heine-Universität Düsseldorf
    Rails User Group Düsseldorf
http://twitter.com/
  HusseinMorsy
Wer verwendet Ajax in Rails?
Wer verwendet jQuery ?
Ereignisse 2009
XHTML 2 ist tot
Es lebe HTML 5
RailsConf 2009




Unobtrusive JavaScript mit
 HTML 5 data-Attribut
Grundlagen
HTML


• Enthält Daten
• Definiert die Struktur
CSS

• Design
• Layout
• Trennung von Design und Inhalt
JavaScript

• Interaktivität
• Animation
• Server-kommunikation mit Ajax
Unobtrusive JS

• Unobtrusive = unauffällig
• Kein JavaScript im HTML-Code
• Trennung von Inhalt und Verhalten
Progressive
        Enhancement

• Applikation funktioniert auch ohne JS
• Erst die App ohne Ajax entwickeln
• Dann erst die Ajax Funktionalität
  hinzufügen
HTML 5


• Nachfolger von HTML 4
• Google, Apple, etc. verwenden jetzt schon
  HTML 5
Valides HTML 5
<!DOCTYPE html>
<title>Hello World</title>
<p>Hallo</p>



                             Validator
HTML-Data-Attribute
• Speichern von Zusatzinformationen, wie z.B.
• <a href="/bookmarks/4" data-remote="true">
  Show detail
  </a>
• <a href="/obst" data-nur-ein-test="Apfel, Banane">
  Obst Liste
  </a>
Ajax in Rails 2
Ajax Helper in Rails 2
• link_to_remote
• link_to_function
• remote_form_for                 Auch in Rails 3
                           mit Prototype legacy Helper
• form_remote_tag             http://github.com/rails/
                            prototype_legacy_helper
• button_to_remote
• submit_to_remote
• periodically_call_remote
• observe_field und observe_for
link_to_remote

<%= link_to_remote 'show', @boomark %>




<a href="#" onclick="new Ajax.Request('/bookmarks/117',
{asynchronous:true, evalScripts:true,
parameters:'authenticity_token= ....
Ajax in Rails 3
link_to

<%= link_to 'Show', @bookmark, :remote => true %>




<a href="/bookmarks/117" data-remote="true">Show</a>
link_to zum Löschen

<%= link_to 'destroy', @bookmark, :method => :delete %>




<a href="/bookmarks/117" data-method="delete"
   rel="nofollow">Show</a>
form_for
<% form_for(@boomark, :remote => true) do |f| %>
  ...
<% end %>




<form action="/bookmarks" class="new_bookmark"
data-remote="true" id="new_bookmark" method="post">
submit

<%= f.submit :disable_with => "Please wait..." %>




<input data-disable-with="Please wait..."
id="post_submit" name="commit" type="submit" value="Create
Bookmark" />
public/javascripts/rails.js


• Enthält den JavaScript-Code für Ajax
• Default ist Prototype
Verwendung von
         jQuery
• rails projektname --skip-prototype oder
• rails projektname -J
• jQuery rails.js downloaden von
  http://github.com/rails/jquery-ujs
• kopieren nach
  public/javascripts/rails.js
Danke


twitter.com/HusseinMorsy

Mais conteúdo relacionado

Semelhante a Unobtrusive JavaScript in Rails 3

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Sebastian Adler
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleNETWAYS
 
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtData Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtMaik Schmidt
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Sven Haiges
 
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtFMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtVerein FM Konferenz
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1Oliver Lemm
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFChristian Kaltepoth
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 

Semelhante a Unobtrusive JavaScript in Rails 3 (20)

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
 
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtData Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtFMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 

Mais de Hussein Morsy

Rubymotion trip to inspect 2013
Rubymotion trip to inspect 2013Rubymotion trip to inspect 2013
Rubymotion trip to inspect 2013Hussein Morsy
 
Datamapper Railskonferenz 2009
Datamapper Railskonferenz 2009Datamapper Railskonferenz 2009
Datamapper Railskonferenz 2009Hussein Morsy
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsHussein Morsy
 
Einführung in Cucumber mit Rails
Einführung in Cucumber mit RailsEinführung in Cucumber mit Rails
Einführung in Cucumber mit RailsHussein Morsy
 

Mais de Hussein Morsy (6)

Rubymotion trip to inspect 2013
Rubymotion trip to inspect 2013Rubymotion trip to inspect 2013
Rubymotion trip to inspect 2013
 
Rack-Middleware
Rack-MiddlewareRack-Middleware
Rack-Middleware
 
Homebrew
HomebrewHomebrew
Homebrew
 
Datamapper Railskonferenz 2009
Datamapper Railskonferenz 2009Datamapper Railskonferenz 2009
Datamapper Railskonferenz 2009
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
Einführung in Cucumber mit Rails
Einführung in Cucumber mit RailsEinführung in Cucumber mit Rails
Einführung in Cucumber mit Rails
 

Unobtrusive JavaScript in Rails 3