Tension

Tighten up Rails's asset pipeline for CSS & JS.

Rails's asset pipeline is smart and well–implemented under the hood, but it can be a challenge to organize your CSS and JavaScript so that you don't have to struggle to maintain which files get compiled, where they live, and how they're included in views and templates.

Tension helps you out. It takes Rails's existing controller/view file structure and applies it to JavaScript and CSS assets as well. Let's take a sample Rails app:

app
  assets
+ controllers
|   account
|   api
\ + blog
  |   posts_controller.rb
  models
+ views
|   account
|   api
\ + blog
  \ + posts
    |   index.html.erb
  + layouts
  |   blog.html.erb

The standard structure Rails enforces is module → controller → action. For the PostsController, the action logic is tucked away alongside other actions in posts_controller.rb, but its view is a separate file namespaced under the blog module and posts controller.

This is a logical, intuitive structure. Our assets should follow it too.

Using Rails's asset pipeline you can drop an asset anywhere within the assets directory and Rails will compile and serve it, but Rails enforces no logical structure on your files. This leads to messy, hard-to-maintain code, and it gets worse when you precompile assets in production.

...