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

Length: 410 pages
Edition: 2
Language: English
Publisher: Pragmatic Bookshelf
Publication Date: 2022-10-18
ISBN-10: 1680509616
ISBN-13: 9781680509618
Sales Rank: #1279667 (See Top 100 Books)

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.

 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