Modern Front-End Development for Rails, 2nd Edition

Table of contents

1.  Acknowledgments
2.  So You Want to Write Some Client-Side Code
   1. Basic Assumptions
   2. The Tools We’ll Use
   3. How This Book Is Organized
   4. Let’s Build an App
   5. The Sample Code
   6. Sample Code Troubleshooting
   7. What’s Next
3. Part I. Getting Started
   1. 1. Getting Started with Client-Side Rails
      1. Managing State and Front-End Development
      2. Configuring Rails for Front-End Development
      3. Running the App
      4. Adding TypeScript
      5. What’s Next
   2. 2. Hotwire and Turbo
      1. The Hotwire Way
      2. Installing Turbo
      3. What Is Turbo Drive?
      4. Adding Interactivity with Turbo Frames
      5. Navigating Outside a Turbo Frame
      6. Extending Our Page with Turbo Streams
      7. Turbo Frames vs. Turbo Streams
      8. Lazy Loading a Turbo Frame
      9. What’s Next
   3. 3. Stimulus
      1. What Is Stimulus?
      2. Installing Stimulus
      3. Adding Our First Controller
      4. Creating an Action
      5. Adding a Target
      6. Using Values
      7. Automating Value Changes
      8. Stimulus Has Class
      9. Going Generic
      10. Stimulus Quick Reference
      11. What’s Next
   4. 4. React
      1. What Is React?
      2. Installing React
      3. Adding Our First Component
      4. Composing Components
      5. Connecting to the Page
      6. Interactivity, State, and Hooks
      7. Sharing State
      8. What’s Next
   5. 5. Cascading Style Sheets
      1. Building CSS in cssbundling-rails
      2. Using Asset Files
      3. Animating CSS
      4. Adding CSS Transitions
      5. Animating Turbo Streams with Animate.css
      6. Using CSS and React Components
      7. What’s Next
4. Part II. Going Deeper
   1. 6. TypeScript
      1. Using TypeScript
      2. Understanding Basic TypeScript Types
      3. Static vs. Dynamic Typing
      4. Adding Type Annotations to Variables
      5. Adding Type Annotations to Functions
      6. Adding Type Annotations to Classes
      7. Defining Interfaces
      8. Type Checking Classes and Interfaces
      9. Getting Type Knowledge to TypeScript
      10. What’s Next
   2. 7. Bundling
      1. Yarn Holds It All Together
      2. esbuild and Friends
      3. CSS Bundling
      4. Propshaft
      5. Import Maps
      6. What’s Next
5. Part III. Managing Servers and State
   1. 8. Talking to the Server
      1. Using Stimulus to Manage Forms
      2. Stimulus and Ajax
      3. Using Data in Stimulus
      4. Acquiring Data in React with useState
      5. What’s Next
   2. 9. Immediate Communication with ActionCable
      1. Installing ActionCable
      2. Turbo Streams and ActionCable
      3. Stimulus and ActionCable
      4. React and ActionCable
      5. What’s Next
   3. 10. Managing State in Stimulus Code
      1. Using Data Values for Logic
      2. Observing and Responding to DOM Changes
      3. Rendering CSS with Data Attributes
      4. Using Kredis to Store Short-Term State
      5. What’s Next
   4. 11. Managing State in React
      1. Using Reducers
      2. Using Context to Share State
      3. Adding Asynchronous Events to Contexts
      4. What’s Next
   5. 12. Using Redux to Manage State
      1. Installing and Using Redux
      2. Adding Asynchronous Actions to Redux
      3. What’s Next
6. Part IV. Validating Your Code
   1. 13. Validating Code with Advanced TypeScript
      1. Creating Union Types
      2. Specifying Types with Literal Types
      3. Using Enums and Literal Types
      4. Building Mapped Types and Utility Types
      5. TypeScript Configuration Options
      6. Dealing with Strictness
      7. What’s Next
   2. 14. Testing with Cypress
      1. Why Cypress?
      2. Installing Cypress
      3. Configuring Cypress and Rails
      4. Writing the First Test
      5. Understanding How Cypress Works
      6. What’s Next
   3. 15. More Testing and Troubleshooting
      1. Writing More Cypress Tests
      2. Testing the Schedule Filter
      3. Cypress and React
      4. Cypress Utilities and API
      5. Troubleshooting
      6. What’s Next
   4. A1. Framework Swap
      1. Import Maps
      2. The All-Hotwire App
      3. The All-React App
      4. Comparison