Unobtrusive JavaScript. Hit or miss?

What is Unobtrusive JavaScript?

Quoted from Wikipedia:

• Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation.
• Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability).
• Graceful degradation in browsers where the advanced JavaScript functionality will not work as desired.

Why should we use it?

• The same reason why we don’t put CSS directly in HTML, period! :)
• Improves JavaScript maintenance, debugging and readability across the project.
• Improves browsing experience for non-JavaScript users.

Some requirement for the team:

• Designers (Designers = Design, HTML, CSS, JavaScript) should NOT mess with Rails.
• Not that much, copy and HTML/CSS updates should be ok.
• Rails guys should NOT mess with JavaScript.
• Because they will eventually create more problems.

How can we accomplish it?

• Using an Unobtrusive JavaScript framework, like MooTools or jQuery.
• Ditch Prototype/Scriptaculous.
• One JavaScript file for everything, like "/javascripts/application.js".
• Big modules (classes) eventually need an own JavaScript file.
• JavaScript developers need to think a bit like coders.
• Be smart about your JavaScript, don't produce waste, think about what you want to accomplish.
• Wrong: "I don't know how it will work later, but the coders will find out somehow."
• Work closely with the documentation and don't rely on tutorials that much.

Stop talking, show some examples:

WRONG

<%=h %Q[Post a new entry] %>
	

COOL

<%=h %Q[Post a new entry

$('show-form').addEvent('click', function(e){
  e = Event(e).stop();

  $('entry-form').toggle();
});] %>
	

Hey, wait a second...

That's much more code! Yes it is, but have a look at the following example:

<%=h %Q[Post a new entry
	
--- somewhere else in your app ---
	
Why don't you post a new entry?
	
$$('a.show-form').each(function(el){
  el.addEvent('click', function(e){
    e = Event(e).stop();
		
    $('entry-form').toggle();
  });
});] %>
	

Mmmmhhhh....

Think about what happens if the name of the function changes, or some parameters need to be added. You have to go through all of your pages to change them. Sucks!

Using the unobtrusive way, you just need to change your JavaScript file. Awesome!

Dynamic content example

WRONG

<%=h %Q[Show entry] %>
	

What if JavaScript is turned off? The user will never be able to delete an entry.

COOL

<%=h %Q[Show entry
	
$$('a.show-entry').each(function(el){
  el.addEvent('click', function(e){
    e = Event(e).stop();
			
    $('container').load(el.get('href'));
  });
});] %>
	

Now we can use AJAX, but the post will also be accessible when the JavaScript is turned off.

Man, this is still a lot more code to handle.

Right, but what if you want to add some fancy hover effect?

WRONG

<%=h %Q[Show entry] %>
	

COOL

<%=h %Q[$$('a.show-entry').each(function(el){
  el.addEvent('click', function(e){
    e = Event(e).stop();
			
    $('container').load(el.get('href'));
  });
		
  el.addEvent('mouseenter', function(){
    el.fade('out', .5);
  });
		
  el.addEvent('mouseleave', function(){
    el.fade('in');
  });
});] %>
	

We don't need to touch the HTML to accomplish this effect.

Why is it so bad that Rails guys mess with JavaScript?

• If people mess with stuff they did not create, they automatically produce bugs without knowing it.
• If it's just one big file, everyone can clearly see the changes.
• Separation means less work for everyone.

Bad usage example of JavaScript and how to make it cool.

Goal: Use a link as the form submit button because of better styling possibilities.

How to solve it:

WRONG

<%=h %Q[

  
  
	
  Login
] %>
	

This will break Login for all non JavaScript supporting browsers!

COOL

<%=h %Q[

  
  
		
  

	
$$('form.submit').each(function(el){
  if (el.getElement('input[type=submit])) {
    var submit = el.getElement('input[type=submit]);
		
    var button = new Element('a').set({ href: '#', html: submit.get('value') }).addClass('button').insertAfter('submit').addEvent('click', function(e){
      e = Event(e).stop();
      
      el.submit();
    });
			
    submit.destroy();
  }
});] %>
	

Awesome, now we can use this in the whole application without changing the HTML markup!

Separate JavaScript and CSS.

WRONG

<%=h %Q[$$('.element').each(function(el){
  el.addEvent('mouseenter', function(){
    el.set({ style: 'border: 1px solid #AAA;' });
  });
  
  el.addEvent('mouseenter', function(){
    el.set({ style: 'border: 0;' });
  });
});] %>
	

COOL

<%=h %Q[$$('.element').each(function(el){
  el.addEvent('mouseenter', function(){
    el.addClass('border');
  });

  el.addEvent('mouseenter', function(){
    el.removeClass('border');
  });
});] %>
  	

Developing Unobtrusive JavaScript with MooTools.

application.js

<%=h %Q[var Application = {

  init: function(){

    if (Browser.Engine.trident) Application.fixIE();
      
    if ($('form-entry')) Application.initFormEntry();

    if ($$('a.hover-me').length > 0) Application.initHoverEffects();

  },

  start: function(){

    if ($$('a.resize-me')) Application.resizeImages();

  },

  fixIE: function(){
     ...
  },

  ...

}

window.addEvent('domready', Application.init);
window.addEvent('load', Application.start);] %>
  

Conclusion

Unobtrusive JavaScript is the way to go!

Quoted from Eran Galperin:

"Choosing a software library is a matter of personal and design preferences, and is influenced to a large degree from what you hope to get out of that particular library."

Prototype and Scriptaculous

MooTools

jQuery