Course Organization and Tools

The tools we’ll use

Throughout this course, we’ll walk through the basics of getting Rails set up to use Webpacker to serve JavaScript and CSS to the browser. Then we will write some code to get the browser to do things. We’ll talk primarily about three tools—TypeScript, webpack, and Webpacker—which will be the foundation of our application:

• TypeScript is an extension of JavaScript that provides type checking and type inference, which means that TypeScript enforces that the expressions (variables, functions, etc.) in your code have the correct types. It’s a superset of JavaScript, which means that any JavaScript program is valid TypeScript, but it also allows you to add some basic type checking to your code. More advanced usage allows you to use the type system to prevent invalid states at compile-time and can prevent run-time errors.

• Webpack calls itself a “static module bundler,” which I think is pretty jargony, not that anybody asked me. Webpack’s entire purpose is to convert developer-friendly inputs to browser-friendly outputs. The inputs are the code you write—JavaScript, TypeScript, CSS, what have you—all arranged in a logical structure. Webpack converts all the files to JavaScript and CSS that the browser can understand, which involves translating code and also resolving references to code in different files. The converted HTML, CSS, and JS files can then be sent to a browser.

• Webpacker is a Rails-specific front-end wrapper around webpack. I realize the similarity in names here is confusing; I’ll try to make it as clear as possible when I’m referring to one tool or the other. The most important thing Webpacker gives is some Rails-style convention over configuration structure to your Webpack builds. It also builds in support for common tools and adds default setups for common frameworks like the ones we’ll be using in this course.

Course structure

This course is divided into four parts comprising of 15 chapters:

• Part I (Client-side Rails - Cascading Style Sheets): we’ll get an introduction to Rails tools we need for the front-end. We’ll use Stimulus and then React for richer interactions. Then we’ll augment both tools (Stimulus and React) by showing some great ways to use CSS tools in our applications.

• Part II (TypeScript - Talking to the Server): we’ll take a deeper look at TypeScript, Webpack, and webpacker. Later on, we’ll look at an important concern for front-end code: communicating with the server.

• Part III (Managing State in Stimulus Code - Using Redux to Manage State): we’ll look at managing the state of the data in the client-side application. We’ll look at a common JavaScript pattern called a reducer and then talk about Redux, a library that implements the reducer pattern and is commonly used with React.

• Part IV (Validating Code with Advanced TypeScript - More Testing and Troubleshooting Basics): we’ll go a little further into TypeScript, learning how we can use the type system to prevent error conditions. We’ll then talk about debugging and testing our applications.