JS Bundling in Ruby on Rails

Using Yarn Build Watch

Let us introduce a new strong command with Yarn before we begin using jsbundling-rails.

yarn build --watch

This command first calls Yarn. Which then issues the build command. This converts all JavaScript entry points into the application.js file in the assets/builds/app directory. The bundler can keep track of changes to the JavaScript files in our project by using the —watch flag. When these modifications occur, it begins bundling those entry points into JavaScript and updating the project. Additionally, the rails server must be running in a separate terminal when performing this. When we enter the command, the application still runs and says [watch] build finished, watching for updates.
This behaviour is what is anticipated. To update the bundled file provided to the asset pipeline, it will then watch for updates to the JavaScript files and rebundle them. ./bin/dev, which simultaneously starts the Yarn build —watch and rails server, is another helpful tool we may utilise. As a result, development does not require switching between terminal windows. The JavaScript bundle watcher and Rails server can automatically update when using the./bin/dev command in development mode. The reason for this is that Yarn automatically looks out for specific modifications.

Using jsbundling-rails

The use of several Javascript bundlers, such as esbuild, rollup.js, or Webpack, is made versatile via JSBundling. It achieves an excellent balance between the webpacker and the asset pipeline. As we can see, the integration of "jsbundling-rails" is considerably more lightweight.
The installers offered by this gem let us get started using the bundler of our choosing. Using "app/assets/builds" as a container for our bundled output as an artefact is standard practice for Rails applications.
With jsbundling, we continue to use Yarn and the "package.json" file. However, instead of being managed by webpack, the produced bundle is downloaded from the asset pipeline.

Installation

Yarn and node must already be set up on our system. Additionally, npx version 7.1.0 or later is required.
After that, add the gem "jsbundling-rails" to your Gemfile.
Run the following command,

./bin/bundle install

Run, 

./bin/rails javascript: install:esbuild

(or we could replace esbuild with rollup or webpack)

Alternatively, in Rails 7+, we may use rails new myapp -j [esbuild|rollup|webpack] to preconfigure our new application to utilise a certain bundler.
The installation makes an "app/assets/build" directory, adds it to the "app/assets/config/manifest.js" asset pipeline manifest, and adds a ".gitignore" file.
In our application.html.erb file, the jsbundling:install command adds a javascript include tag.
For our build script to be used in our application, this tag will include the new javascript entrypoint javascript/application.js.

Watch Mode

Run the command,

yarn build --watch 

This is to start the bundler in watch mode.
Start the dev server by running foreman start -f Procfile.dev or separately launch Rails and "yarn build --watch".
We can also launch the Rails server and the JS build watcher using./bin/dev.
The bundler will bundle "app/javascript/application.js" into "app/assets/builds/application.js" whenever it notices changes to any of the JavaScript files in our project.

Production

When we deploy our application to production, the javascript:build task connects to the assets:precompile task. It guarantees that all package dependencies from package.json are installed using Yarn. Then yarn build is performed to process all of the entry points, as it would in development.
After being digested and copied into public/assets like every other asset pipeline file, the latter files are subsequently picked up by the asset pipeline.
In the build script's package.json file, the installer's generated webpack.config.json file for Webpack, or the rollup.config.js file for Rollup.js, we can set our bundler options.

Why Use JS Bundling

People might question if we have import maps and JS bundling in Rails requirements. One of the most crucial things to remember is that this choice depends on the project's specifics. While not having to bundle or transpile is a benefit of import maps, we give up some advantages with JS bundling in Rails. Another crucial fact is that some frameworks, like React, which need JSX compilation, do not support import maps. Bundling was introduced to the JavaScript system, a sizable ecosystem, to lower HTTP 1 performance costs. The introduction of several files impacted performance because HTTP 1 could only handle a certain number of queries on a single connection.
Although the performance costs were decreased by HTTP 2, a large portion of the JS ecosystem still necessitates explicit transpiling or bundling. This is because a framework mandates it, or packages are constructed around the need for bundling for performance. If we want to employ some of these Frameworks for the project, we might prefer JS bundling in Rails to import maps.

When To Use JS Bundling

We might question the need for import maps altogether. We would not need to utilise import maps if we used the entire JavaScript ecosystem, right? That is not accurate. Each tool has advantages and disadvantages. It is important to recall that there was a performance penalty for making numerous requests in the era of HTTP 1. With HTTP 2, the performance cost and a considerable benefit of bundling were eliminated. Any modifications to the module that would cause the entire bundle to expire is another drawback of employing JS bundling in Rails and forcing the browser to download and analyse everything once more. Each module is maintained as independent while viewing import maps, saving us from downloading every module again. It is just the performance improvement that might lead us to choose import maps for JS bundling in Rails. Frequently, the response to these choices is not a proper response. Everything depends on the goals we have for the project.
JS bundling in Rails may be considered if we want to react with JSX and do not mind a performance hit. Consider import maps if someone has some modules in mind that do not need transpiling or packaging but would benefit from a performance boost. It is important to note that, depending on the project's needs, one is not necessarily worse than the other. Through JS bundling in Rails, one may access a variety of frameworks like React with JSX and unique capabilities like tree-shaking. In contrast, import maps need not be bundled, and changing one module does not mean updating them.

Webpacker

Even though we occasionally encounter this, it is crucial to be aware that jsbundling-rails, now used by Rails 7, have taken their place. One of the bundlers listed earlier in the lesson should be used if we wish to employ bundling.
It is important to note, though, because Rails 6 has been used for a long time, for use with Webpack, the Webpacker Ruby gem was created. This allowed Rails to use ES6, also known as ECMAScript 6, which was developed to take the place of JavaScript as the time's industry standard. To construct a dependency network and generate code bundles in the Rails environment, Webpacker maps the JavaScript code. When a user accesses that form, Rails will download a pack from app/javascript/packs.
We utilise a Gemfile with Ruby gems and a package.json with Webpacker to manage the JavaScript libraries. The primary distinction is that when using a Gemfile, we must open it, manually add the gem and version, and then run the bundle. To add a library, though, we may utilise Yarn from the terminal thanks to Webpack.

yarn add bootstrap

After that, we could use it by referencing it in the pack file.

Frequently Asked Questions

Can JS Bundling in rails be used with multiple bundlers?

Multiple bundlers can be utilised using jsbundling-rails. Currently, out-of-the-box support is provided for esbuild, rollup, and webpack. However, it could be set up to work with anything that can add a bundle to the app/assets/builds location. Specifically for integrating with webpack, webpacker was created.

Why use jsbundling-rails over webpacker?

The fact that jsbundling-rails is a considerably more lightweight integration than webpacker is crucial in choosing it over the latter. Webpacker offers lesser flexibility because it is more complicated and opinionated.

What is the idea behind jsbundling in Rails?

Jsbundling is based on the notion that Yarn and the package.json file should still be used. Instead of being managed by webpack, the produced bundle enters the asset pipeline download.

Is there a workaround for the lack of glob syntax on Windows?

The app/javascript/*.* glob pattern is used in the esbuild default build script to compile numerous entry points automatically. On Windows, this glob pattern is not by default available. It might be beneficial to manually add a list of the entry points we want to compile to the build script in package.json.

Conclusion

In the article, we read about JS bundling in Rails and the options through which we use it. We also read why and when to use JS Bundling in rails and saw its alternatives in the previous version of Ruby on Rails. There are specific ways in which how Ruby differs from Ruby on rails. You can get many career opportunities after mastering ruby on rails. Refer to our courses on web development and read some articles on Ruby on rails to find out why you should consider Ruby on rails for your web projects. You can also check out some other blogs on ruby on rails to learn everything you wish to know about Ruby on Rails.

Explore Coding Ninjas Studio to find more exciting stuff. Happy Coding!