Skip to main content

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.

Comments

Popular posts from this blog

Master of my domain

Hi All, I just got myself a new domain ( http://www.skuunk.com ). The reason is that Blogspot.com is offering cheap domain via GoDaddy.com and I thought after having this nickname for nigh on 10 years it was time to buy the domain before someone else did (also I read somewhere that using blogspot.com in your domain is the equivalent of an aol.com or hotmail.com email address...shudder...). Of course I forgot that I would have to re-register my blog everywhere (which is taking ages) not to mention set up all my stats stuff again. *sigh*. It's a blogger's life... In any case, don't forget to bookmark the new address and to vote me up on Technorati !

Elixir - destructuring, function overloading and pattern matching

Why am I covering 3 Elixir topics at once? Well, perhaps it is to show you how the three are used together. Individually, any of these 3 are interesting, but combined, they provide you with a means of essentially getting rid of conditionals and spaghetti logic. Consider the following function. def greet_beatle(person) do case person.first_name do "John" -> "Hello John." "Paul" -> "Good day Paul." "George" -> "Georgie boy, how you doing?" "Ringo" -> "What a drummer!" _-> "You are not a Beatle, #{person.first_name}" end end Yeah, it basically works, but there is a big old case statement in there. If you wanted to do something more as well depending on the person, you could easily end up with some spaghetti logic. Let's see how we can simplify this a little. def greet_beatle(%{first_name: first_name}) do case first_name d

Speeding up RSpec

So today I have been looking into getting our enormous battery of tests to run faster. I have yet to find anything that works for Cucumber, but I did find an interesting way to speed up RSpec which is detailed here. https://makandracards.com/makandra/950-speed-up-rspec-by-deferring-garbage-collection Basically, it seems that by not collecting garbage too frequently, you can make your tests run much faster (at the expense of memory management of course). We observed a 30% reduction in the time it takes to run an RSpec test suite. I did try to implement this on Cucumber, however because we need to store much more in memory to set up and tear down our objects, it meant that I kept running out of memory when I wasn't using the default Garbage Collection and the tests took even longer (so, buyer beware). I suppose if you had a small set of features though you might see some benefit.