Thursday, July 10, 2008

Writing Web Components in Rails

One of the problems most people run into when writing web components is the fact that you have to tie together 2-3 disparate elements (HTML partial, JavaScript file and/or CSS) into one contextual component.

As JavaScript and CSS files are normally placed in the head and the HTML partial occurs somewhere in the body, it can be hard to track down any missing pieces should they arise.

In RJS (built in Ruby JavaScript components) the normal procedure is to place the script tag next to the element in the HTML itself. This not only goes against Unobtrusive JavaScript principles, it is also butt ugly if you ever have to view the source code.

Thankfully, there is a more elegant solution.

Instead of rendering your JavaScript directly in the page, i.e.

<%= javascript_include_tag "my_component" %>

you wrap it in a content_for(:head) (this assumes you have placed a <%= yield :head %> in your application.html.erb template).

i.e.
<% content_for(:head) do %>
<%= javascript_include_tag "my_component" %>
<% end %>

This will place your JS file in the head where it belongs.

For those of you who use jQuery, here is an extra bonus tip.

Sometimes you may want to call in an HTML partial via AJAX (I will write a full tutorial on that later). If you do so using jQuery any script tags that are in the HTML partial will get parsed, loaded and eval(uate)ed automagically. The only caveat is that in this situation you cannot use the content_for(:head) wrapper (and if you call multiple files in this manner the order will matter as the scripts will be launched immediately as opposed to on document.ready).

Using these techniques, you can write discrete web components that encompass both markup and functionality.

No comments: