Introduction to Using Rails on the Client-side
Get introduced to how Rails, a server-side framework, is also effectively used on the client-side using certain tools.
We'll cover the following
Client-side rails
Every modern web application uses client-side features in an effort to improve the experience for the end user. Even though Rails is a server-side framework, it has always offered tools that made it easier to deliver client-side code to the browser. From the very beginning of Rails, its ability to make client-side coding easier has been a selling point.
Over time the client-side tools have become more powerful, which is great, but they have also become more complicated. One thing that hasn’t changed, though, is that Rails still has opinions about how to deal with the client tools.
In this course, we’re going to take a basic Rails application and add client-side interactivity. There are a lot of tools in the JavaScript ecosystem that will allow you to work with Rails. We’re going to focus on a few that work well with Rails, support simple logic, and which I happen to like using.
Two of the tools we’ll use are libraries for frameworks that let you structure your client-side display code.
Stimulus
The first is Stimulus, which comes from the same Basecamp team that supports Rails.
Stimulus is designed to be written as an extension to the HTML markup you are already writing and is very well suited to small interactions that don’t need to manage a lot of state, or where the majority of the state is managed by the server application.
React
The second tool we’ll use is React. React replaces your HTML markup with a custom hybrid of JavaScript and HTML called JSX. React automatically updates the DOM when data changes and is suited for more complicated and larger interactions where state is stored on the client.
In addition, we’ll use two other tools that are more foundational: TypeScript and Webpacker.
Typescript
The code that we’ll write is in TypeScript, which is a language that extends JavaScript by allowing us to specify the type of any variable, class attribute, function argument, or function return value. I like using TypeScript because there are a whole bunch of mistakes I normally make in JavaScript that TypeScript catches for me. TypeScript’s syntax is JavaScript with a few extra features. For the first few chapters, I’ll explain the TypeScript syntax as we need it, and then we’ll discuss TypeScript itself in more detail in later chapters.
Finally, 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.
webpack allows us to take all the code we write, whether it is JavaScript, TypeScript, CSS, or even static images, and write it in a structure of our choice and then package everything in a way that is easy for the browser to manage.
We’ll start by learning about some of these tools and adding interactivity using TypeScript without a framework. This will let us get used to TypeScript and also illustrate some of the limitations of framework-less development.
In this chapter, I’ll show you how to create the initial version of the code which sets up Webpacker by adding some TypeScript code. By the end of this chapter, we’ll be ready for a framework that manages some of the boilerplate code for us.