Modern Front-End Development for Rails

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.

Table of Contents

Part I- Getting Started

1. Getting Started with Client-Side Rails

2. Hotwire and Turbo

3. Stimulus

4. React

5. Cascading Style Sheets

Part I I- Going Deeper

6. TypeScript

7. Bundling

Part I I I-Managing Servers and State

8. Talking to the Server

9. Immediate Communication with ActionCable

10. Managing State in Stimulus Code

11. Managing State in React

12. Using Redux to Manage State

Part IV-Validating Your Code

13. Validating Code with Advanced Typescript

14. Testing with Cypress

15. More Testing and Troubleshooting

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.