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 the Webpacker gem 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!
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.
What You Need:
This book requires Ruby on Rails 6.0+, React 16.8.0+. Other dependencies will be added by Rails.
Author(s): Noel Rappin
Edition: 1
Publisher: Pragmatic Bookshelf
Year: 2021
Language: English
Commentary: Vector PDF
Pages: 380
City: Raleigh, NC
Tags: Ruby; Web Applications; TypeScript; CSS; Testing; Rails; Frontend Development; Cypress; React.js; Hotwire; Stimulus; Turbo
Cover
Table of Contents
Change History
Beta 9—June 9, 2021
Beta 8—April 27, 2021
Beta 7—March 11, 2021
Beta 6—August 11, 2020
Beta 5—June 5, 2020
Beta 4—March 23, 2020
Beta 3—February 9, 2020
Beta 2—December 4, 2019
Beta 1—October 30, 2019
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
Part I—Getting Started
1. Getting Started with Client-Side Rails
Managing State and Front-End Development
Configuring Webpacker
Using Webpacker
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 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
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. webpack
Understanding Why webpack Exists
Managing Dependencies with Yarn
Understanding webpack Configuration
What’s Next
8. Webpacker
Webpacker Basics
Writing Code Using Webpacker
Integrating Webpacker with Frameworks
Running webpack
Deploying Webpacker in Production
Customizing Webpacker
What’s Next
Part III—Managing Servers and State
9. 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
10. Immediate Communication with ActionCable
Installing ActionCable
Turbo Streams and ActionCable
Stimulus and ActionCable
React and ActionCable
What’s Next
11. Managing State in Stimulus Code
Using Data Values for Logic
Observing and Responding to DOM Changes
Rendering CSS with Data Attributes
What’s Next
12. Managing State in React
Using Reducers
Using Context to Share State
Adding Asynchronous Events to Contexts
What’s Next
13. Using Redux to Manage State
Installing and Using Redux
Adding Asynchronous Actions to Redux
What’s Next
Part IV—Validating Your Code
14. 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
15. Testing with Cypress
Why Cypress?
Installing Cypress
Configuring Cypress and Rails
Writing Our First Test
Understanding How Cypress Works
What’s Next
16. 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
The All-Hotwire App
The All-React App
Comparison
Index
– SYMBOLS –
– DIGITS –
– A –
– B –
– C –
– D –
– E –
– F –
– G –
– H –
– I –
– J –
– K –
– L –
– M –
– N –
– O –
– P –
– Q –
– R –
– S –
– T –
– U –
– V –
– W –
– X –
– Y –
