Monthly Archives: February 2013

Rails Asset Pipeline + Underscore templates

Rails has this shiny feature. Maybe you have heard of it… It is called the asset pipeline, and it is designed to make everything easier when it comes to managing your sites assets. For the most part, it does just that. Many of the those “best practices” Steve Souders has been telling you to do for years are now bundled up in a nice process. I was recently playing with the asset pipeline and stumbled a bit. I wasn’t quite sure where my JavaScript templates fit in to this whole process.

JST, where should you be?

After doing a bit of research, I quickly realized that the asset pipeline in rails is actually built off the sprockets gem. https://github.com/sstephenson/sprockets

This is good news, since sprockets already has built in support for jst templates. Score!

Assuming our application.js manifest file is requiring all our asset files, all we need to do is drop a .jst anywhere file in the /app/assets/javascripts folder.

For our very simple case I dropped in a file called test.jst with the contents below.

Fiddling around in the chrome developer tools you can see that JST[‘test’] is defined when the page loads. By using the _.template() function we can actually compile the template. In the case below, we are simply providing the “name” variable to our template and logging the output.


Let’s recap what happened real quick. Rails automatically loaded our jst file via the asset pipeline, converted it to a javascript string in a file “test.js”, and assigned “test” as a property on the global JST object. We can now access JST[‘test’] anywhere in our JavaScript code to get our template string, as evidence from the dev tools above.

Precompiling Templates

The above works well, however we can improve on it a bit. Most tutorials on client side templating will tell you to always “precompile” your template when the application starts up. Precompiling is the process of converting your string template into a JavaScript function. Something like the code below would do the trick with underscore. Notice how compiled_template actually becomes a reusable function. To execute our compiled template it is as easy as calling compiled_template({ name: ‘jason’ })

The code above will work nicely, however the client still has to take the time to compile each of our templates before they can be used. What if we did the compilation on the server and then passed the resulting function to the client instead of the template string?

EJS Server side compiling

Luckily, again rails has a gem for that. To use EJS simply add it to your gemfile and bundle.

NOTE: You will need to change any .jst files to .jst.ejs extensions. This will instruct EJS to precompile any templates before sending them to the client.

Let’s take a look at what our new test.jst.ejs file looks like when processed on the client.

Clearly, JST[‘test’] is now returning our precompiled function. Executing JST[‘test’] with our argument also gives us back the expected result of “Hi. jason.”

Conclusion

The asset pipeline is quite the tool in the tool belt, and can significantly help you manage not only static assets, but also dynamic client side templates. It seems as if rails has thought of everything 🙂