Modern Front-End Development for Rails
Hotwire, Stimulus, Turbo, and React
by Noel Rappin
Improve the user experience for your Rails app with rich, engaging
client-side interactions. Learn to use the Rails 6 tools and simplify
the complex JavaScript ecosystem. It’s easier than ever to build user
interactions with Hotwire, Turbo, Stimulus, and Webpacker. 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 6 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. Learn how to use Rails 6 and Webpacker 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 webpack, Webpacker, 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 6.0 or later, React 16.8.0 or later.
Other dependencies will be added by Rails.
Resources
Releases:
- P1.0 2021/06/29
- B9.0 2021/06/10
- B8.0 2021/04/27
- B7.0 2021/03/11
- Introduction
- Getting Started
- Getting Started with Client-Side Rails
excerpt
- Managing State and Front-End Development
- Configuring Webpacker
- Using Webpacker
- What’s Next
- 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
- 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
- React
- What Is React?
- Installing React
- Adding Our First Component
- Composing Components
- Connecting to the Page
- Interactivity, State, and Hooks
excerpt
- Sharing State
- What’s Next
- 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
- Going Deeper
- 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
- webpack
- Understanding Why webpack Exists
- Managing Dependencies with Yarn
- Understanding webpack Configuration
- What’s Next
- Webpacker
excerpt
- Webpacker Basics
- Writing Code Using Webpacker
- Integrating Webpacker with Frameworks
- Running webpack
- Deploying Webpacker in Production
- Customizing Webpacker
- What’s Next
- Managing Servers and State
- 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
- Immediate Communication with ActionCable
- Installing ActionCable
- Turbo Streams and ActionCable
- Stimulus and ActionCable
- React and ActionCable
- What’s Next
- Managing State in Stimulus Code
- Using Data Values for Logic
- Observing and Responding to DOM Changes
- Rendering CSS with Data Attributes
- What’s Next
- Managing State in React
- Using Reducers
- Using Context to Share State
- Adding Asynchronous Events to Contexts
- What’s Next
- Using Redux to Manage State
- Installing and Using Redux
- Adding Asynchronous Actions to Redux
- What’s Next
- Validating Your Code
- 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
- Testing with Cypress
- Why Cypress?
- Installing Cypress
- Configuring Cypress and Rails
- Writing Our First Test
- Understanding How Cypress Works
- What’s Next
- More Testing and Troubleshooting
- Writing More Cypress Tests
- Testing the Schedule Filter
- Cypress and React
- Cypress Utilities and API
- Troubleshooting
- What’s Next
- Framework Swap
- The All-Hotwire App
- The All-React App
- Comparison
Author
Noel Rappin is a Staff Software Engineer at Root Insurance. Noel is
the author of multiple technical books, including Modern CSS with
Tailwind
and Rails 5 Test
Prescriptions.
Follow Noel on Twitter @noelrap, and
online at noelrappin.com.