Modern Front-End Development for Rails: Hotwire, Stimulus, Turbo, and React

by Noel Rappin

Overview

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!

It's hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for integrating with them, all change continuously. Rails 7 simplifies client-side integration with the Hotwire gem. It's a great way to build client interaction with server-side HTML and a small amount of JavaScript.

In the latest edition of this book, learn how to use Rails 7 and its front-end bundling tools to build rich front-end logic into your Rails applications. The job is even easier with Stimulus, a library that brings Rails conventions to JavaScript tools. And you can also add in React, a larger framework that automatically updates the browser when your data changes.

Learn the basics of Turbo, Stimulus, and TypeScript, and add pizazz to your application. Structure your web application to best manage your state. Learn how to interact with data on the server while still keeping the user experience interactive. Use the type system in TypeScript to expand on JavaScript and help prevent error conditions. Debug and test your front-end application with tools specific to each framework.

There are a lot of ways to do client-side coding, and Rails is here to help.

What You Need:

This book requires Ruby on Rails 7.0 or later, React 17.0.0 or later. Other dependencies will be added by Rails.

Product Details

ISBN-13:	9781680509618
Publisher:	Pragmatic Bookshelf
Publication date:	10/18/2022
Edition description:	2nd ed.
Pages:	410
Product dimensions:	7.50(w) x 9.25(h) x (d)

About the Author

Noel Rappin is a Staff Software Engineer at Chime Financial. He is the author of multiple technical books including Rails 5 Test Prescriptions and Take My Money: Accepting Payments on the Web, and was the host of the Tech Done Right Podcast. Follow Noel on Twitter @noelrap, and online at noel.rappin.com.

Table of Contents

Acknowledgments ix

So You Want to Write Some Client-Side Code xi

Part I Getting Started

1 Getting Started with Client-Side Rails 3

Managing State and Front-End Development 4

Configuring Webpacker 9

Using Webpacker 15

What's Next 17

2 Hotwire and Turbo 19

The Hotwire Way 19

Installing Turbo 20

What Is Turbo Drive? 22

Adding Interactivity with Turbo Frames 22

Navigating Outside a Turbo Frame 26

Extending Our Page with Turbo Streams 30

Turbo Frames vs. Turbo Streams 33

Lazy Loading a Turbo Frame 34

What's Next 36

3 Stimulus 37

What Is Stimulus? 37

Installing Stimulus 39

Adding Our First Controller 41

Creating an Action 44

Adding a Target 46

Using Values 49

Automating Value Changes 52

Stimulus Has Class 53

Going Generic 56

Stimulus Quick Reference 60

What's Next 61

4 React 63

What Is React? 63

Installing React 64

Adding Our First Component 66

Composing Components 70

Connecting to the Page 74

Interactivity, State, and Hooks 76

Sharing State 80

What's Next 89

5 Cascading Style Sheets 91

Building CSS in webpack 92

Adding CSS and Assets to webpack 94

Animating CSS 95

Adding CSS Transitions 99

Animating Turbo Streams with Animate.css 102

Using CSS and React Components 105

What's Next 112

Part II Going Deeper

6 TypeScript 115

Using TypeScript 116

Understanding Basic TypeScript Types 116

Static vs. Dynamic Typing 118

Adding Type Annotations to Variables 120

Adding Type Annotations to Functions 121

Adding Type Annotations to Classes 125

Defining Interfaces 127

Type Checking Classes and Interfaces 128

Getting Type Knowledge to TypeScript 130

What's Next 131

7 Webpack 133

Understanding Why webpack Exists 134

Managing Dependencies with Yarn 135

Understanding webpack Configuration 140

What's Next 147

8 Webpacker 149

Webpacker Basics 149

Writing Code Using Webpacker 150

Integrating Webpacker with Frameworks 152

Running webpack 154

Deploying Webpacker in Production 155

Customizing Webpacker 155

What's Next 157

Part III Managing Servers and State

9 Talking to the Server 161

Using Stimulus to Manage Forms 161

Stimulus and Ajax 169

Using Data in Stimulus 170

Acquiring Data in React with useState 174

What's Next 186

10 Immediate Communication with ActionCable 187

Installing ActionCable 188

Turbo Streams and ActionCable 189

Stimulus and ActionCable 197

React and ActionCable 202

What's Next 209

11 Managing State in Stimulus Code 211

Using Data Values for Logic 211

Observing and Responding to DOM Changes 214

Rendering CSS with Data Attributes 220

What's Next 226

12 Managing State in React 227

Using Reducers 227

Using Context to Share State 229

Adding Asynchronous Events to Contexts 247

What's Next 251

13 Using Redux to Manage State 253

Installing and Using Redux 254

Adding Asynchronous Actions to Redux 259

What's Next 266

Part IV Validating Your Code

14 Validating Code with Advanced TypeScript 269

Creating Union Types 269

Specifying Types with Literal Types 274

Using Enums and Literal Types 277

Building Mapped Types and Utility Types 280

TypeScript Configuration Options 281

Dealing with Strictness 283

What's Next 287

15 Testing with Cypress 289

Why Cypress? 290

Installing Cypress 290

Configuring Cypress and Rails 294

Writing Our First Test 298

Understanding How Cypress Works 302

What's Next 308

16 More Testing and Troubleshooting 309

Writing More Cypress Tests 309

Testing the Schedule Filter 311

Cypress and React 314

Cypress Utilities and API 316

Troubleshooting 317

What's Next 320

A1 Framework Swap 321

The All-Hotwire App 323

The All-React App 336

Comparison 354

Index 357