Asset Pipeline is a feature in the Rails web application framework which improves and simplifies the management of static assets like stylesheets, images, javascript, etc. within a Rails application. It was introduced in version 3.1 of the Rails web application framework[1].

Background

edit

Before v3.1, the static assets in Rails applications used to be placed within their own directories in the public directory. All the javascript files would go into a separate public/javascripts directory, the CSS files in public/stylesheets directory and so on. Any static assets within subdirectories would be ignored by the application. This approach (subdividing them within different subdirectories) made the management of static assets difficult[2]. There was also the problem of wasted bandwidth because of a higher number of HTTP requests due to a separate request needed to pull each individual asset. Another problem was the caching of static assets. Assets are cached by the browser for a certain period of time till they expire. If a change in asset occurs at a later point in time the browser would still continue to use the cached asset until its expiry. Finally, there was the problem with interpreting alternative languages like Coffeescript, Sass, etc. that are used to easily write javascript and CSS files. The Asset pipeline provides features to tackle these issues[3].

Technical Overview

edit

Main Features

edit

The three main features of the asset pipeline while developing in Rails are asset directories, manifest files, and preprocessor engines.

Asset Directories

edit

For organizational purposes, the rails asset pipeline makes use of three main directories. The static assets are either placed in the assets directory(for assets specific to the application), the lib directory(for assets maintained internally but shared between applications), or the vendor directory(for assets from external vendors)[4].

Manifest Files

edit

A manifest file is maintained to tell the Sprockets gem how to combine these individual files to form a single file(only for javascript and CSS files). The individual directories like assets/javascripts can be further divided into subdirectories and the manifest file will tell the Sprockets gem if it should pull from those subdirectories as well or not. This results into reduced loading time because the browser does not have to make requests for multiple files[4].

Preprocessing

edit

If the asset pipeline is disabled, then assets written in higher level languages like Coffeescript(for Javascript) and Sass(for CSS) are sent to the respective processors included in the gems of those languages. Enabling the asset pipeline provides support for higher level languages like Coffeescript, Sass and ERB(for both Javascript and CSS). These assets are preprocessed and converted to their browser understandable formats like javascript files and CSS files by one of Rails app or the server, before being sent to the browser[5].

Other features

edit

Asset minification or compression of assets to save space is also a feature that Asset pipelining provides. CSS files are compressed by removing comments and any white spaces. Javascript files can be compressed by choosing one of the many built-in compression techniques or by specifying some other process not provided in the options[6].

Fingerprinting of files is also an important feature of the asset pipeline, which gives rise to the concept of cache busting. Files containing assets have a hash of the contents inserted into the name by Sprockets, which means that whenever the content of the file changes, the filename changes as well. This encourages caching by browsers, and when the content changes (thereby also changing the filename), the browsers request for an updated copy, which is known as cache busting[7].

Sprockets & Tilt

edit

The concept of the asset pipeline works mainly because of two components, namely Sprockets and Tilt

Sprocket is basically the brains behind the asset pipeline. The sprocket gem concatenates all the Javascript in an application into one javascript file and all the CSS in an application into one CSS file. The gem also contains a powerful preprocessor pipeline which allows the web developer to design application assets in different languages like CoffeeScript, SCSS, and Sass. Tilt was used as the focal point for the design of Sprocket versions 2.x. This changed from 3.x, in which a new interface has been introduced, making Tilt deprecated[8]. The first public release was v2.0.0, in August 2011, with the current stable release being 3.7.1 released in December 2016[9].

Tilt was designed to ease the usage of the different template engines of Ruby.  It was designed with a view of supporting a set of common features across the different engines such as 'custom template evaluation scopes', 'ability to pass locals to template evaluation', 'template file caching and reloading', etc. It is used for web frameworks, static site generators, etc. which have support for multiple template engines, while reducing coding effort by introducing tilt as an interface. The first public release was v1.2.1, in December 2010, with the current stable release being v2.0.6 released in January 2017[10]

See also

edit

References

edit
  1. ^ "Ruby on Rails 3.1 Release Notes — Ruby on Rails Guides". guides.rubyonrails.org. Retrieved 2017-02-14.
  2. ^ Fernandez, Obed (Obie); Faustino, Kevin (2014-05-26). The Rails 4 Way. Addison-Wesley Professional. ISBN 9780133487930.
  3. ^ School, Launch. "Rails Asset Pipeline - Everything You Should Know". launchschool.com. Retrieved 2017-02-13.
  4. ^ a b Hartl, Michael (2012-07-27). Ruby on Rails Tutorial: Learn Web Development with Rails. Addison-Wesley. ISBN 9780133047233.
  5. ^ "The Asset Pipeline — Ruby on Rails Guides/Preprocessing". guides.rubyonrails.org. Retrieved 2017-02-14.
  6. ^ "The Asset Pipeline — Ruby on Rails Guides". guides.rubyonrails.org. Retrieved 2017-02-13.
  7. ^ "The Asset Pipeline — Ruby on Rails Guides/What-Is-Fingerprinting". guides.rubyonrails.org. Retrieved 2017-02-14.
  8. ^ "GitHub - rails/sprockets: Rack-based asset packaging system/Processor Interface". github.com. Retrieved 2017-02-20.
  9. ^ "GitHub - rails/sprockets: Rack-based asset packaging system/Releases". GitHub.
  10. ^ "GitHub - rtomayko/tilt: Generic interface to multiple Ruby template engines". github.com. Retrieved 2017-02-14.