Introduction to Using Rails on the Client-side

Client-side rails

Every modern web application uses client-side features to improve the end-user experience. Even though Rails is a server-side framework, it has always offered tools that make it easier to deliver client-side code to the browser. Rails’ ability to make client-side coding easier has been a selling point from the beginning.

In this course, we’re going to take a basic Rails application and add client-side interactivity. The JavaScript ecosystem includes many tools that allow us to work with Rails. For our purposes, we’re going to focus on two patterns that work well with Rails.

1. In one pattern, the server communicates with the client by sending HTML, and the client’s job is mainly to direct that HTML to the correct part of the page and add some client-only interactions.

2. In the other pattern, the server communicates by sending data (usually in JSON format), and the client is responsible for the logic to convert that data into HTML and for client-only interactions.

Hotwire

To demonstrate the first pattern, we’ll use the Hotwire family of tools, which comes from Basecamp and is a more or less an official add-on to Rails.

Turbo

Hotwire consists of Turbo, a library that manages user navigation and communication with the server without needing custom JavaScript, and Stimulus, which supports client-side interactions written in JavaScript.

Stimulus

Stimulus is designed to be written as an extension to the HTML markup we are already writing. It is well suited to small interactions that don’t need to manage a lot of states or where the server application manages the majority of the state.

Note: A third tool that manages interactions with native mobile devices, called Strada, has not yet been released.

React

Many frameworks support the JSON interaction pattern and create their own markup on the client. We’ll use React to represent those tools. React replaces our HTML markup with a custom hybrid of JavaScript and HTML called JSX. React automatically updates the DOM when data changes and is suited to interactions where many states are stored on the client.

Typescript

In addition, we’ll use two other tools that are more foundational. We’ll write our code in TypeScript, a language that extends JavaScript by allowing us to specify the type of any variable, class attribute, function argument, or function return value.

TypeScript is often used because it catches many common mistakes people make in JavaScript. TypeScript’s syntax is JavaScript but with a few extra features. The first few chapters cover the TypeScript syntax as we need it, and then we’ll discuss TypeScript itself in more detail in TypeScript and Validating Code with Advanced TypeScript.

Webpacker and webpack

Also, we’ll use Webpacker to put all of these pieces together. Webpacker is a Rails tool that provides sensible defaults and useful conventions for the webpack build tool.

Finally, webpack allows us to write all our code—be it JavaScript, TypeScript, CSS, or even static images—in a structure of our choice and package it in a way that is easy for the browser to manage.

To start, we’ll install these tools and show what Hotwire and Turbo allow us to do without custom JavaScript. But first, before we dive in and write code, let’s talk about web applications, Rails, and JavaScript.