Understanding the Ruby on Rails Asset Pipeline
If you want to be a better Rails developer, it's critical that you understand how the asset pipeline works.
I'll help you understand what exactly it is, what it does, and why you would use it.
Why do I need to know about the asset pipeline?
The Ruby on Rails framework approaches almost every aspect of web development with the mindset of "why reinvent the wheel?".
Rails is amazing because you can build things FAST and it's asset pipeline is a huge contributor to this.
Why spend time configuring and developing your own way to serve files and assets in your web application, when Ruby on Rails gives you all of this out of the box for free?
What is the asset pipeline?
The asset pipeline is a framework for working with files and assets in Ruby on Rails applications.
It's implemented as a Ruby gem that comes enabled by default with modern Rails applications (Rails 4 and up).
The gem is called Sprockets, and it's the preconfigured way that a Rails application serves files. It follows a set of well-documented conventions keeping it simple and easy to work with.
Why use the asset pipeline?
Well, you get significantly better performance with minimal effort. It helps optimize your site and make it faster by giving you access to a number of really helpful features.
Combine and Concatenate Files
It combines all of your JavaScript files into a single file so your website doesn't have to request multiple different files. It does the same for your website's CSS.
This alone is a huge benefit, and by concatenating multiple files into one you are able to serve assets faster and require fewer requests in the browser.
If your website makes too many requests and loads every script and asset independently it will affect your pagespeed and have a negative impact on how search engines rank your site!
Minify and Reduce File Sizes
On top of combining files, the asset pipeline also performs a process called minification. This means it removes all unnecessary characters from the file to make the filesize smaller. This also helps your website load assets faster since less data has to be transferred from your server to the browser.
Minification typically removes things like unnecessary whitespace, comments, and variable names to make your files as small as it can.
Efficient Caching and Fingerprinting
After concatenating and minifying files, the asset pipeline also performs a process called "fingerprinting". Your filenames get a SHA256 fingerprint (basically an encrypted string of text) appended so that browsers can efficiently cache everything to avoid having to request the same assets multiple times.
Fingerprinting is critical to effective caching. If you didn't add fingerprints to your files, then the browser would cache your assets and always serve your visitors the cached copy - even if your assets changed!
By adding fingerprints to filenames, when your assets change the encrypted fingerprint also changes. This means the browser will receive your website content and see an asset with a slightly different filename (since the fingerprint added different text) and since that exact filename has not been seen before it hasn't been cached. Your browser knows to request that new updated asset.
Support for SASS and ERB
Lastly, the asset pipeline gives you preconfigured access to higher-level languages with more helpful tools that help you build things faster.
SASS comes by default to make writing your CSS a breeze. It provides an awesome layer of tooling on top of standard CSS that can help you organize and keep your code DRY.
ERB is the default templating language used by Ruby on Rails. It lets you sprinkle normal Ruby code into your HTML and Javascript files. It's an important part of the magic behind Rails that makes it so fast and easy to build websites.
What's next?
We can take all of these optimizations a step further. The asset pipeline does a LOT for us in terms of optimizing assets but we can optimize our media assets significantly more. Think images, videos, and audio files.
Active Storage is one of the best tools for managing your media assets, and storing and fetching them from cloud services like Amazon S3, Google Cloud Storage, or Microsoft Azure Storage.
It comes with the newest Rails installations, which means you don't have to install any additional gems. I wrote a separate installation guide if this interests you.
Otherwise, feel free to reach out with any questions. You can reach me anytime on Twitter.
Thanks for reading this far!