Tag Archives: underscore.js

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 🙂

Underscore templates with Node.js

A while back I wrote a post about using underscore templates and how they can help to organize your application’s markup. Today we are going to talk about how we can take this one step further and use underscore templates within a node.js application to write a simple backbone generator.

Getting underscore

First thing we need to do is get underscore. NPM (Node package manager) will be our friend here. If npm is installed, we can get underscore simply by typing the following from the command line.

Creating our node.js program

First thing we need to do is create our node program. We will save this as file called bb.js. Inside bb.js add the code below. To get started we are requiring underscore, the node file system, and defining our template file.

Next, we need to make a function in bb.js that will generate our file based on the backbone-view template. (Which we will create later)

The template will be run from the command line using

Create File

The first thing createFile() does is look at the arguments passed to node. Since our command is going to be “node bb <view_name>” the view name will be the 3rd argument from process.argv. Process.argv is just an array containing the command line arguments. Next, if a view name was passed in we will setup a file path based on the current working directory and the view name.
Ex. path/to/current/directory/view_name.js.

Line 9 will use the node file system to read in our template file and convert it to a string. Finally, we will apply the _.template function using our templateFile string and view name as parameters. We will then write out the result to a file using the node file system.

Our backbone-view.js template file

As you can see the backbone view template is pretty simple. It takes the view name that was passed in and applies it in several different spots.

And that’s it. It is pretty easy to write a little node.js and underscore program to help with simple tasks such as writing out template files. Obviously this is a very simple example. In the next post we will combine this general idea with cli ( a command line tool for node ) to make a more powerful interface for generating files and folders with node.