Modern Front-End Development for Rails

 Cover

Table of Contents

Change History

Beta 9—June 9, 2021

Beta 8—April 27, 2021

Beta 7—March 11, 2021

Beta 6—August 11, 2020

Beta 5—June 5, 2020

Beta 4—March 23, 2020

Beta 3—February 9, 2020

Beta 2—December 4, 2019

Beta 1—October 30, 2019

Acknowledgments

So You Want to Write Some Client-Side Code

Basic Assumptions

The Tools We’ll Use

How This Book Is Organized

Let’s Build an App

The Sample Code

Part I—Getting Started

1. Getting Started with Client-Side Rails

Managing State and Front-End Development

Configuring Webpacker

Using Webpacker

What’s Next

2. Hotwire and Turbo

The Hotwire Way

Installing Turbo

What Is Turbo Drive?

Adding Interactivity with Turbo Frames

Navigating Outside a Turbo Frame

Extending Our Page with Turbo Streams

Turbo Frames vs. Turbo Streams

Lazy Loading a Turbo Frame

What’s Next

3. Stimulus

What Is Stimulus?

Installing Stimulus

Adding Our First Controller

Creating an Action

Adding a Target

Using Values

Automating Value Changes

Stimulus Has Class

Going Generic

Stimulus Quick Reference

What’s Next

4. React

What Is React?

Installing React

Adding Our First Component

Composing Components

Connecting to the Page

Interactivity, State, and Hooks

Sharing State

What’s Next

5. Cascading Style Sheets

Building CSS in webpack

Adding CSS and Assets to webpack

Animating CSS

Adding CSS Transitions

Animating Turbo Streams with Animate.css

Using CSS and React Components

What’s Next

Part II—Going Deeper

6. TypeScript

Using TypeScript

Understanding Basic TypeScript Types

Static vs. Dynamic Typing

Adding Type Annotations to Variables

Adding Type Annotations to Functions

Adding Type Annotations to Classes

Defining Interfaces

Type Checking Classes and Interfaces

Getting Type Knowledge to TypeScript

What’s Next

7. webpack

Understanding Why webpack Exists

Managing Dependencies with Yarn

Understanding webpack Configuration

What’s Next

8. Webpacker

Webpacker Basics

Writing Code Using Webpacker

Integrating Webpacker with Frameworks

Running webpack

Deploying Webpacker in Production

Customizing Webpacker

What’s Next

Part III—Managing Servers and State

9. Talking to the Server

Using Stimulus to Manage Forms

Stimulus and Ajax

Using Data in Stimulus

Acquiring Data in React with useState

What’s Next

10. Immediate Communication with ActionCable

Installing ActionCable

Turbo Streams and ActionCable

Stimulus and ActionCable

React and ActionCable

What’s Next

11. Managing State in Stimulus Code

Using Data Values for Logic

Observing and Responding to DOM Changes

Rendering CSS with Data Attributes

What’s Next

12. Managing State in React

Using Reducers

Using Context to Share State

Adding Asynchronous Events to Contexts

What’s Next

13. Using Redux to Manage State

Installing and Using Redux

Adding Asynchronous Actions to Redux

What’s Next

Part IV—Validating Your Code

14. Validating Code with Advanced TypeScript

Creating Union Types

Specifying Types with Literal Types

Using Enums and Literal Types

Building Mapped Types and Utility Types

TypeScript Configuration Options

Dealing with Strictness

What’s Next

15. Testing with Cypress

Why Cypress?

Installing Cypress

Configuring Cypress and Rails

Writing Our First Test

Understanding How Cypress Works

What’s Next

16. More Testing and Troubleshooting

Writing More Cypress Tests

Testing the Schedule Filter

Cypress and React

Cypress Utilities and API

Troubleshooting

What’s Next

A1. Framework Swap

The All-Hotwire App

The All-React App

Comparison

Index

Improve the user experience for your Rails app with rich, engaging client-side interactions. Learn to use the Rails 7 tools and simplify the complex JavaScript ecosystem.It's easier than ever to build user interactions with Hotwire, Turbo, and Stimulus. You can add great front-end flair without much extra complication. Use React to build a more complex set of client-side features. Structure your code for different levels of client-side needs with these powerful options. Add to your toolkit today!