Modern Front-End Development for Rails

Webpacker, Stimulus, 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 Webpacker gem, TypeScript, and Stimulus. You can add great front-end flair without much extra complication. Add React to build an even more extensive set of client-side features. Structure your code for different levels of client-side needs with these powerful options. Add to your toolkit today!

The current version of this book is a complete draft of how to use Stimulus and React to build great websites backed by Rails.

We are waiting to release the final version of the book so that it can include the latest versions of Stimulus tooling, which have not yet been released publicly. We are excited to include these tools, which represent the Rails core team’s newest guidance on how to do front-end coding.

Current owners of the book will automatically receive an upgrade with a discussion of the new tools as soon as they are released.

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 Webpacker gem. It’s the default tool for building client-side assets for use by web browsers. 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. Add in some React, a popular 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.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• B6.0 2020/08/11
• B5.0 2020/06/05
• B4.0 2020/03/23
• B3.0 2020/02/09

Note: Contents and extracts of beta books will change as the book is developed.

• Introduction
• Beginning
  • Client-Side Rails excerpt
    • Managing State and Front-End Development
    • Installing Webpacker
    • Using Webpacker
    • Adding Real Features
    • Going Generic
    • What’s Next
  • Stimulus
    • What Is Stimulus?
    • Installing Stimulus
    • Adding Our First Controller
    • Creating an Action
    • Adding a Target
    • Stimulus Has Class
    • Using Values
    • A Little More Stimulus
    • Stimulus Quick Reference
    • Using Stimulus with Haml or Slim
    • What’s Next
  • React
    • What Is React?
    • Installing React
    • Adding Our First Component
    • Composing Components
    • Tying Into 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
    • CSS Transitions
    • CSS and React Components
    • What’s Next
• Intermediate
  • TypeScript
    • Understanding Basic TypeScript Types
    • Static versus Dynamic Typing
    • Variables and Type Annotations
    • Functions and Type Annotations
    • Classes and Type Annotations
    • Defining Interfaces
    • Type Checking Classes and Interfaces
    • Getting Type Knowledge to TypeScript
    • What’s Next?
  • Webpack
    • Problems Being Solved
    • Yarn
    • Webpack
    • What’s Next
  • Webpacker excerpt
    • Webpacker Basics
    • Webpacker in Development
    • Webpacker in Production
    • Customizing Webpacker
    • What’s Next
  • Talking to the Server
    • Cheating with the Gon gem
    • Using Gon In Stimulus
    • Stimulus and Ajax
    • Using Data In Stimulus
    • Acquiring Data In React with useState
    • Remote Authentication
    • Stimulus and ActionCable
    • React and ActionCable
    • Error Handling
  • Managing State
    • Sharing State between Stimulus Controllers
    • Microstates
    • Sharing State between related React Components
    • Sharing State between unrelated React Components
• Advanced
  • Advanced Types
    • Advanced TypeScript Types
  • Testing
  • Debugging