Since RoR 4, the management of JavaScript in Ruby on Rails has undergone several evolutions over the years. Initially, the Rails asset pipeline, powered by Sprockets, handled JavaScript files along with other static assets. Then came the Webpacker gem in Rails 5.1, offering a more modern approach to handling JavaScript, leaning into the JavaScript ecosystem with npm and Webpack. Most recently, Rails 7 introduced a new method with Importmap, which simplifies JavaScript management by allowing direct browser imports without a package bundler.

Sprockets

Initially, Rails used a system called Sprockets to handle both JavaScript and CSS assets. This system allowed the easy management of dependencies between various files and their minification for production.

Sprockets is a component in Rails that manages your JavaScript, CSS, and image assets. It compiles and serves these assets, facilitating their easy management. Sprockets allows the organization of assets in a way that maintains dependencies between various files and also minifies them for production, thereby enhancing performance by reducing file size.

Webpacker

With the introduction of Rails 6, a new option was introduced: Webpacker. This choice was dictated by the popularity of Webpack in the JavaScript world, which offers greater flexibility and better integration with the modern JavaScript ecosystem.

Webpacker is a wrapper for Webpack, a popular JavaScript module bundler. It's used in Rails to manage JavaScript, allowing for the integration of modern JavaScript features and libraries into a Rails application. With Webpacker, you can write your JavaScript in a modular way and bundle it for efficient delivery to the client.

Importmap

With Rails 7, the Rails team introduced another option: importmap. This is a more modern method for handling JavaScript, which avoids the need for transpiling or bundling. Importmap leverages standard JavaScript modules (ESM), making the use of modern JavaScript packages simpler.

While it appears quite straightforward, it intentionally lacks many features supported by the previous asset pipeline implementation. That's why I personally favor a more JavaScript-centric approach on the frontend side.

JsBuilder/CssBuilder and Propshaft

Choosing JSBuilder/CSSBuilder and Propshaft over Importmap may be beneficial for complex applications with many dependencies. These tools provide robust asset management, offering features like code minification and optimization (like treeshacking).

JSBuilder and CSSBuilder are tools used in Ruby on Rails for managing JavaScript and CSS assets. They allow efficient organization and optimization of code. Propshaft, introduced in Rails 7, is an asset pipeline responsible for handling static assets. It simplifies tasks such as asset compression, fingerprinting for cache busting, and serving assets in both development and production environments.

Together, JSBuilder/CSSBuilder and Propshaft provide a comprehensive solution for managing all types of assets within a Rails application. This combination allows for streamlined and efficient asset management.

Bibliography

• GitHub - rails/sprockets: Rack-based asset packaging system
• GitHub - rails/importmap-rails: Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
• GitHub - rails/propshaft: Deliver assets for Rails

How to and guides

• GitHub - rails/importmap-rails: Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
• How to use Import Maps in Rails 7 (with examples)
• TIL: Using ActiveAdmin with importmap-rails | by Henrik Hauge Bjørnskov | Medium