Working with Javascript in Rails

- ROR Lab. Season 3 -
70 Biweekly Lecture
Working with Javascript
in Rails
2014-09-16
SeungKyun Nam

Agenda
Ajax: Introduction
Unobtrusive Javascript
Built-in Helpers
Ajax: Server-Side Concerns
Turbolinks

Ajax: Introduction
What is Ajax:
Asynchronous
Javascript
and
XML

Ajax: Introduction
The origin of the term called 'Ajax'
by Adaptive Path
Blog post: Ajax:
but ...
A New Approach to Web Applications

Ajax: Introduction
Understanding Request-Response Cycle

Ajax: Introduction
Classic Model vs AJax Model

Ajax: Introduction
Synchronous Model vs Asynchronous Model

Ajax: Introduction
Defining Ajax
Presentation: XHTML and CSS - HTML5 and CSS3
Document Object Model
Data: XML and XSLT - (mostly JSON)
Carrier: XMLHttpRequest
Binding everything together: Javascript

Ajax: Introduction
Sample Code
// COFFEESCRIPT
$.ajax(url: /test/lorem).done (html) -
$(#results).append html
// Generated JAVASCRIPT
(function() {
$.ajax({
url: /test/lorem
}).done(function(html) {
return $(#results).append(html);
});
}).call(this);

Unobtrusive Javascript
Three main goals
To separate JavaScript from HTML markup, as well as
keeping modules of JavaScript independent of other
modules.
Unobtrusive JavaScript should degrade gracefully - all
content should be available without all or any of the
JavaScript running successfully.
Unobtrusive JavaScript should not degrade the
accessibility of the HTML, and ideally should improve it,
whether the user has personal disabilities or are using an
unusual, or unusually configured, browser.

Tip:
To complie CoffeeScript
without top-level function safety wrapper
# Compile the Javascript without the top-level function safety wrapper
# CoffeeScript Option -b or --bare
Tilt::CoffeeScriptTemplate.default_bare = true
config/environment.rb

Traditional Way
Inline Javascript
a href=# onclick=this.style.backgroundColor='#009900';this.style.color='#FFFFFF'
Paint it green
/a

Traditional (Better) Way
Using Functions
paintIt = (element, backgroundColor, textColor) -
element.style.backgroundColor = backgroundColor
if textColor?
element.style.color = textColor
a href=# onclick=paintIt(this, '#990000')Paint it red/a
a href=# onclick=paintIt(this, '#009900', '#FFFFFF')Paint it green/a

Unobtrusive Way
paintIt = (element, backgroundColor, textColor) -
element.style.backgroundColor = backgroundColor
if textColor?
element.style.color = textColor
$ -
$(a[data-background-color]).click -
backgroundColor = $(this).data(background-color)
textColor = $(this).data[text-color]
paintIt(this, backgroundColor, textColor)
a href=# data-background-color=#990000Paint it red/a
a href=# data-background-color=#009900 data-text-color=#FFFFFFPaint it green/a
a href=# data-background-color=#000099 data-text-color=#FFFFFFPaint it blue/a

Built-in Helpers
Rails Ajax helpers are in two parts
Javascript half - rails.js
Ruby half - add appropriate tags to DOM

form_for
%= form_for(@post, remote: true) do |f| %
...
% end %
!-- Generated HTML --
form accept-charset=UTF-8
action=/posts
class=new_post
data-remote=true
id=new_post method=post
...
/form

form_for
Adding Ajax Event
$(document).ready -
$(#new_post).on(ajax:success), (e, data, status, xhr) -
$(#new_post).append xhr.responseText
).bind ajax:error, (e, data, status, error) -
$(#new_post).append pERROR/p

form_tag
%= form_tag('/posts', remote: true) %

link_to
%= link_to a post, @post, remote: true %
a href=/https/www.slideshare.net/posts/1 data-remote=truea post/a

link_to
Adding Ajax Event
%= link_to Delete Post, @post, remote: true, method: :delete %
$ -
$(a[data-remote]).on ajax:success, (e, data, status, xhr) -
alert The post was deleted.

button_to
%= button_to A post, @post, remote: true %
form action=/posts/1 class=button_to data-remote=true method=post
divinput type=submit value=A post/div
/form

Server-Side Concerns
by Example
class UsersController ApplicationController
def index
@users = User.all
@user = User.new
end
# ...
end
bUsers/b
ul id=users
li /li
/ul
br
br
app/views/users/index.html.erb
app/controllers/users_controller.rb
li /li
app/views/users/_user.html.erb

by Example
# ...
def create
@user = User.new(params[:user])
respond_to do |format|
if @user.save
format.html { redirect_to @user, notice: 'User was successfully created.' }
format.js {}
format.json { render json: @user, status: :created, location: @user }
else
format.html { render action: new }
format.json { render json: @user.errors, status: :unprocessable_entity }
end
end
end
# ...
app/controllers/users_controller.rb

by Example
$(%= escape_javascript(render @user) %).appendTo(#users)
app/views/users/create.js.erb

Turbolinks
Rails 4 Default
Turbolinks Gem
Uses Ajax to speed up page rendering
PushState

Turbolinks
How it works
attaches a click handler to all a tags
check if browser supports PushState
if so,
make an Ajax request
parse the response
replace the entire body
change the URL using PushState

PushState
a part of HTML5 History-API
!doctype html
html
head
titlePushState Example/title
script language=javascript

Using Turbolinks
# Turbolinks makes following links in your web application faster.
# Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
Gemfile
//= require turbolinks
app/assets/javascripts/applications.js

Turbolinks
To disable Turbolinks for certain links
a href=... data-no-turbolinksNo turbo links here/a.
using data-no-turbolinks attribute

Turbolinks
Troubleshooting
$(document).ready -
alert page has loaded!
# This event will not work because of Turbolinks
$(document).on page:change, -
alert page has loaded!
# This will work!

Working with Javascript in Rails

More Related Content

What's hot (20)

Similar to Working with Javascript in Rails (20)

Recently uploaded (20)

Working with Javascript in Rails