While working on a Rails application, your code base will grow a collection of different file types including:
Except for the Ruby part, all these files are shipped to the browser. In this card we'll focus specifically on CSS, JS, fonts and static media files which are often summed up as assets.
You might already have noticed that Rails modifies those assets before delivering them to the client. For example, you'll never see SASS anywhere in your browser. Rails offers various asset processing and delivery mechanisms which will be covered in this card.
For each frontend management system listed below, understand how they achieve:
import
or require
to load another file?/* your code */
background-image: url(logo.png)
/* the same style inspected within the browser (Webpack example) */
background-image: url(packs/assets/logo-9929e2bc15378bb351e3.png)
.js
files.Note that all of the above is solved in every frontend management system below. They use different paradigms to tackle the underlying problems and differ mainly regarding:
require
or import
other filesYou should know how to import files and spot the different locations for each management system.
Over time, we adapted various asset management systems. You already got to know esbuild, which is used in your MovieDB and our most recent applications. This is our preferred solution and should be your main focus while working on this card.
As we maintain more than a hundred applications, many of them still use the asset pipeline and Webpacker. You should roughly understand how they work, but don't invest more than a day to skim over the asset pipeline and webpacker.
The asset pipeline is Rails' original mechanism on how stylesheets, javascripts and images from your /assets folder are processed and delivered to the browser
javascript_tag
, stylesheet_tag
or image_tag
.import
and export
statements (ESM) are not supportedrequire
, require_tree
, require_self
do?image-url
and font-url
necessary for sass urls?@import other_file
.
//= require 'other_file'
//= require
is a sprockets statement that would copy and duplicate the content file in your bundle each time you use it.@imports
are aware of the current state of your variable definitionsWebpacker has many more moving parts than the asset pipeline, but allowed us to use ES6 modules and npm packages (through yarn Show archive.org snapshot ) a lot earlier than it was introduced for sprockets. Even after that sprockets is still missing many modern bundling features and has issues with library support. Webpacker is a wrapper around a JavaScript project called webpack Show archive.org snapshot
import
and export
of relative paths and npm packages work (ES6 module system)esbuild offers us similar features like webpacker while being blazingly fast and easier to understand.
Import maps let you import JavaScript modules using logical names. You can build modern JavaScript applications using ESM libraries without the need for transpiling or bundling. This frees you from needing Webpack and Yarn.