- Ruby on Rails - Home
- Ruby on Rails - Introduction
- Ruby on Rails - Installation
- Ruby on Rails - IDEs
- Ruby on Rails - Hello World
- Ruby on Rails - Framework
- Ruby on Rails - Directory Structure
- Ruby on Rails - Rails Console
- Ruby on Rails - Bundler
- Ruby on Rails - Examples
- Ruby on Rails - Database Setup
- Ruby on Rails - Active Records
- Ruby on Rails - Validation
- Active Record Associations
- Active Record Query
- Ruby on Rails - Migrations
- Ruby on Rails - Active Model
- Ruby on Rails - Controllers
- Cookies and Session
- Ruby on Rails - Authentication
- Ruby on Rails - Routes
- Ruby on Rails - Views
- Ruby on Rails - Rendering
- Ruby on Rails - Layouts
- Ruby on Rails - Scaffolding
- Ruby on Rails - Forms
- Ruby on Rails - Active Jobs
- Ruby on Rails - Action Text
- Ruby on Rails - Active Storage
- Ruby on Rails - JavaScript
- Ruby on Rails - Propshaft
- Ruby on Rails - ImportMap
- Ruby on Rails - AJAX
- Ruby on Rails - WebSockets
- Ruby on Rails - Action Cable
- Ruby on Rails - File Uploading
- Ruby on Rails - Send Emails
- Ruby on Rails - Rack
- Ruby on Rails - Error Handling
- Ruby on Rails - Deployment
- Ruby on Rails Resources
- Ruby on Rails - References Guide
- Ruby on Rails - Quick Guide
- Ruby on Rails - Resources
- Ruby on Rails - Discussion
- Ruby Tutorial
- Ruby Tutorial
Ruby on Rails - JavaScript
In this chapter, you will learn how to integrate JavaScript functionality into your Rails application, and how you can use external JavaScript packages. This chapter also introduces Turbo which is used for creating fast, modern web applications without having to reach for a client-side JavaScript framework.
In modern web development, we often break our JavaScript into many smaller, manageable files (modules). We take these separate JavaScript files (along with assets like CSS and images) and bundle them into a smaller number of optimized files that the browser can then load more efficiently. This process is performed by JS bundlers.
The Role of JS Bundlers
A JS bundler typically does the following −
- Module Resolution: Creates a dependency graph based on the relationships between your JavaScript files
- Bundling: Take the dependent modules and combine them into one or more bundle files to reduce the number of HTTP requests by the browser. Bundlers also integrate with other tools to transform your code. For example, transpilation which means Converting newer JavaScript syntax (ES6+, JSX, TypeScript) into older, more widely supported JavaScript versions; minification (to reduce its file size) and apply various optimizations.
- Asset Handling: Some bundlers can also handle other types of assets, like CSS, images, and fonts, often processing them through loaders and plugins.
When you create a new Rails application, you can specify the JavaScript bundler webpack, esbuild, rollup, etc.
Webpack JS Bundler
Webpack is a static module bundler for modern JavaScript applications. It builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, as the static assets to serve your content from.
Rails new myapp --javascript=webpack
Esbuild JS Bundler
esbuild is a very fast bundler, good for modern apps. It is a free and open-source module bundler and minifier for JavaScript and CSS written in Go. It supports TypeScript, JSX, tree-shaking and is extensible through plugins.
Rails new myapp --javascript=esbuild
Rollup JS Bundler
Rollup is another JS module bundler which compiles small pieces of code into something larger libraries by using the new standardized format for code modules included in the ES6 revision of JavaScript.
Rails new myapp --javascript=rollup
To skip JavaScript support, you can create a Rails application with the following command line
Rails new myapp --skip-javascript
Since version 7, Rails uses ES modules with no build step. ImportMap is the default.
Rails new myapp --javascript=importmap
Installing a JavaScript Runtime
If you are using esbuild, Rollup.js, or Webpack to bundle your JavaScript in your Rails application, Node.js and Yarn must be installed.
Install Node.js
For Windows, download the installer (https://nodejs.org/dist/v22.15.0/node-v22.15.0-x64.msi) from the official website and run the wizard. For other OS platforms, obtain the download files from https://nodejs.org/en/download.
Install Yarn
It is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system.
Once you have npm installed, you can run the following both to install and upgrade Yarn −
npm install --global yarn
Turbo
Rails also installs Turbo to speed up your application. It reduces the amount of custom JavaScript that most web applications will need to write and fast, modern, progressively enhanced web applications.
Turbo Drive, Turbo Frame and Turbo Streams are the components of Turbo.
- Turbo Drive speeds up the page load process.
- Turbo Frame allows predefined parts of a page to be updated on request.
- Turbo Streams allow you to broadcast changes made by other users over WebSockets and update pieces of a page after a Form submission without requiring a full page load.
Turbo lets you send HTML from the server which updates parts of the page dynamically, without any custom JavaScript.