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.
Author(s): Noel Rappin
Series: The Pragmatic Programmers
Edition: 2
Publisher: Pragmatic Bookshelf
Year: 2022
Language: English
Pages: 410
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
Sample Code Troubleshooting
What’s Next
Part I. Getting Started
1. Getting Started with Client-Side Rails
Managing State and Front-End Development
Configuring Rails for Front-End Development
Running the App
Adding TypeScript
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 cssbundling-rails
Using Asset Files
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. Bundling
Yarn Holds It All Together
esbuild and Friends
CSS Bundling
Propshaft
Import Maps
What’s Next
Part III. Managing Servers and State
8. 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
9. Immediate Communication with ActionCable
Installing ActionCable
Turbo Streams and ActionCable
Stimulus and ActionCable
React and ActionCable
What’s Next
10. Managing State in Stimulus Code
Using Data Values for Logic
Observing and Responding to DOM Changes
Rendering CSS with Data Attributes
Using Kredis to Store Short-Term State
What’s Next
11. Managing State in React
Using Reducers
Using Context to Share State
Adding Asynchronous Events to Contexts
What’s Next
12. Using Redux to Manage State
Installing and Using Redux
Adding Asynchronous Actions to Redux
What’s Next
Part IV. Validating Your Code
13. 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
14. Testing with Cypress
Why Cypress?
Installing Cypress
Configuring Cypress and Rails
Writing the First Test
Understanding How Cypress Works
What’s Next
15. 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
Import Maps
The All-Hotwire App
The All-React App
Comparison
