Talk on Rails and JavaScript and how JavaScript should be written, structured, separated from the HTML etc.

1. Rails is not just
Ruby

2. Marco Otte-Witte
Software Engineer, Consultant, Trainer
http://simplabs.com
Open Source
http://github.com/marcoow
http://github.com/simplabs

3. JavaScript is
serious
Business!

4. It‘s not just
adding lib after
lib after lib!

5. Give your
JavaScript the
same love your
Ruby code
gets!

6. Know your
tools!

7. Know your tools!
var inputs = $$('input');
for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].name);
}

8. Know your tools!
X
var inputs = $$('input');
for (var i = 0; i < inputs.length; i++) {
}
alert(inputs[i].name);

9. Know your tools!
Protoype.js
$$('input').each(function(input) {
alert(input.name);
});
jQuery
$.each('input', function() {
alert(this.name);
});

10. Know your tools!
function setupPage() {
$('userName').update(
readUserName();
);
}
function readUserName() {
//read user's name from cookie
}

11. Know your tools!
X
function setupPage() {
$('userName').update(
readUserName();
);
}
function readUserName() {
//read user's name from cookie
}

12. Know your tools!
var Application = (function() {
//private
var readUserName = function() {
//read user's name from cookie
};
return {
//public
setupPage: function() {
$('userName').update(
readUserName();
);
}
}
})();

13. Know your tools!
var timeout = window.setTimeout(
"element.update(" + someContent
+ ");",
1000
);

14. Know your tools!
X
var timeout = window.setTimeout(
"element.update(" + someContent
+ ");",
1000
);

15. Know your tools!
Protoype.js
element.update.bind(element).curry(
someContent
).delay(1)

16. Know your tools!
var loginField =
document.getElementById('#user_login');
alert(loginField.value);

17. Know your tools!
X
var loginField =
document.getElementById('#user_login');
alert(loginField.value);

18. Know your tools!
Protoype.js
alert($F('user_login'));
jQuery
alert($('#user_login').val());

19. Know your tools!
var loginField =
document.getElementById('#user_login');
loginField.style.display = 'none';

20. Know your tools!
X
var loginField =
document.getElementById('#user_login');
loginField.style.display = 'none';

21. Know your tools!
Protoype.js
$('user_login').hide();
jQuery
$('#user_login').hide();

22. Know your tools!
var loginField =
document.getElementById('user_login');
function loginChanged() {
alert(loginField.value);
}
if (loginField.addEventListener) {
loginField.addEventListener(
'change', loginChanged, false);
} else if (obj.attachEvent) {
obj.attachEvent('onchange', loginChanged);
}

23. Know your tools!
X
var loginField =
document.getElementById('user_login');
function loginChanged() {
alert(loginField.value);
}
if (loginField.addEventListener) {
loginField.addEventListener(
'change', loginChanged, false);
} else if (obj.attachEvent) {
obj.attachEvent('onchange', loginChanged);
}

24. Know your tools!
Protoype.js
$('user_login').observe(
'change', function(event) {
alert($F('user_login'));
});
jQuery
$('#user_login').change(function() {
alert(this.val());
});

25. Write valid
JavaScript!

26. Write valid JavaScript!
someValue = 0;
anotherValue = 1;
function fun(param) {
alert(param)
}

27. Write valid JavaScript!
X
someValue = 0;
anotherValue = 1;
function fun(param) {
alert(param)
}

28. Write valid JavaScript!
var someValue = 0;
var anotherValue = 1;
function fun(param) {
alert(param);
}

29. Write valid JavaScript!
someValue = 0;
anotherValue = 1;
function fun(param) {
alert(param)
}

30. Write valid JavaScript!
someValue = 0;
anotherValue = 1;
function fun(param) {
alert(param)
}

31. Write valid JavaScript!
someValue = 0; Missing semicolon.
anotherValue = 1;
Implied globals:
function fun(param) { someValue, anotherValue
alert(param)
}

32. JavaScript and
Rails

33. JavaScript and Rails
•RESTful actions (delete, put, post)
•AJAX
•Effects
•etc.

34. the Demo App

35. the Demo App
POST/replace

36. the Demo App
POST/replace
Code is at http://github.com/marcoow/js-and-rails

37. 3 possible
Solutions

38. the classic
Solution

39. the classic Solution
•Helpers (remote_form_for, link_to_remote
etc.)
•RJS
•onclick=“...
•href=“javascript:...

40. the classic Solution
index.html.erb
<div id="someElement">
some text that's replaced later
</div>
<%= link_to_remote 'Replace', :url =>
classic_solution_replace_path,
:method => :post %>

41. the classic Solution
class ClassicSolutionController <
ApplicationController
def index
end
def replace
end
end

42. the classic Solution
replace.rjs
page.replace_html 'someElement',
:partial => 'new_content'

43. the classic Solution
_new_content.html.erb
<b>Fresh new content rendered at <%=
Time.now %></b>
<%= link_to_remote 'Replace again',
:url => classic_solution_replace_path,
:method => :post %>

44. the classic Solution
•strong coupling
•hard to maintain
•no/ little code reuse
•bloated HTML
•code that actually belongs together is
distributed over several places
•easy to write in the first place

45. Full Separation

46. Full Separation
•define JavaScript controls that encapsulate
all frontend logic
•mark elements with class, rel or HTML5‘s
data-* attributes
•full separation of HTML and JavaScript
•Initialization of controls on dom:loaded
event

47. Full Separation
•define JavaScript controls that encapsulate
all frontend logic
•mark elements with class, rel or HTML5‘s
data-* attributes
•full separation of HTML and JavaScript
•Initialization of controls on dom:loaded
event

48. Full Separation
replacer.js
var Replacer = Class.create({
initialize: function(container, target) {
this.container = $(container);
this.target = $(target);
this.container.observe('click', this.onClick.bindAsEventListener(this));
},
onClick: function(event) {
event.stop();
new Ajax.Updater(
this.target,
this.container.href, {
method: 'post',
evalScripts: true
}
);
}
});

49. Full Separation
application.js
var Application = (function() {
var initializeReplacers = function() {
$$('a[data-replaces]').each(function(replacingLink) {
if (!replacingLink._initializedReplacer) {
new Replacer(replacingLink, replacingLink.readAttribute('data-replaces'));
replacingLink._initializedReplacer = true;
}
});
};
return {
setupOnLoad: function() {
initializeReplacers();
},
setupOnPageUpdate: function() {
initializeReplacers();
}
}
})();

50. Full Separation
application.js
document.observe('dom:loaded', function() {
Application.setupOnLoad();
Ajax.Responders.register({
onComplete: Application.setupOnPageUpdate
});
});

51. Full Separation
application.js
document.observe('dom:loaded', function() {
Application.setupOnLoad();
Ajax.Responders.register({
onComplete: Application.setupOnPageUpdate
});
});
Replacer controls are initialized on page load
and after every AJAX request

52. Full Separation
index.html.erb
<div id="someElement">
some text that's replaced later
</div>
<%= link_to 'Replace', full_separation_replace_path,
:'data-replaces' => 'someElement' %>

53. Full Separation
class FullSeparationController <
ApplicationController
def index
end
def replace
respond_to do |format|
format.js { render :partial => 'new_content' }
end
end
end

54. Full Separation
_new_content.html.erb
<b>Fresh new content rendered at
<%= Time.now %></b>
<%= link_to 'Replace again',
full_separation_replace_path,
:'data-replaces' => 'someElement' %>

55. Full Separation
•clean, semantic HTML
•full separation of concerns
•clean HTML/CSS/JS is crucial
•Behaviour is (kind of) implicit
•discipline required

56. explicit
Controls

57. explicit Controls
•like Full Separation
•but controls are initialized in the templates
•more explicit/ obvious what‘s going on

58. explicit Controls
index.html.erb
<div id="someElement">
some text that's replaced later
</div>
<%= link_to 'Replace', controls_replace_path,
:id => 'replacerLink' %>
<script type="text/javascript" charset="utf-8">
document.observe('dom:loaded', function() {
var replacer = new Replacer('replacerLink', 'someElement');
});
</script>

59. explicit Controls
class ControlsController < ApplicationController
def index
end
def replace
respond_to do |format|
format.js { render :partial => 'new_content' }
end
end
end

60. explicit Controls
_new_content.html.erb
<b>Fresh new content rendered at
<%= Time.now %></b>
<%= link_to 'Replace again', controls_replace_path,
:id => 'secondReplacerLink' %>
<script type="text/javascript" charset="utf-8">
var newReplacer = new Replacer(
'secondReplacerLink', 'someElement'
);
</script>

61. explicit Controls
_new_content.html.erb
<b>Fresh new content rendered at
<%= Time.now %></b>
<%= link_to 'Replace again', controls_replace_path,
:id => 'secondReplacerLink' %>
<script type="text/javascript" charset="utf-8">
var newReplacer = new Replacer(
'secondReplacerLink', 'someElement'
);
</script>
No initialization on dom:loaded here as this is
the result of an AJAX request (dom:loaded not
fired)

62. explicit Controls
•HTML is (mostly) clean and semantic
•Behaviour is explicit in the templates
•easier to grasp what‘s going on than with
Full Separation
•though not as nice as full separation

63. Either go with
Full Separation
or explicit
Controls!

64. Avoid the
classic Solution
when you can!

65. Resources

66. Resources
•http://ejohn.org/apps/learn/
•http://www.jslint.com/
•http://api.prototypejs.org/
•http://docs.jquery.com
•http://github.com/marcoow/js-and-rails
•http://javascriptrocks.com

67. Q&A