#154 Front-End Development for Rails
Notes on the book Modern Front-End Development for Rails, By Noel Rappin, pubished by The Pragmatic Programmers.
Notes
See:
Highlights from the Table of Contents
Part I — Getting Started
- Client-Side Rails
- Managing State and Front-End Development
- Installing Webpacker
- Using Webpacker
- Adding Real Features
- Going Generic
- 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
- React
- What Is React?
- Installing React
- Adding Our First Component
- Composing Components
- Tying Into the Page
- Interactivity, State, and Hooks
- Sharing State
- Cascading Style Sheets
- Building CSS in Webpack
- Adding CSS and Assets to Webpack Animating CSS
- CSS Transitions
- CSS and React Components
Part II — Going Deeper
- 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
- Webpack
- Problems Being Solved
- Yarn
- Webpack
- Webpacker
- Webpacker Basics
- Webpacker in Development
- Webpacker in Production
- Customizing Webpacker
- 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
- Immediate Communication with ActionCable
- Stimulus and ActionCable
- React and ActionCable
Part III — Managing State
- Managing State in Stimulus Code
- Sharing State in Stimulus
- Refactoring to the Reducer Pattern
- Managing State in React . .
- Using Context to Share State in React
- Adding Asynchronous Events to Contexts
- Using Redux to Manage State
- Installing and Using Redux
- Adding Asynchronous Actions to Redux
Part IV — Validating Your Code
- Validating Code with Advanced TypeScript
- Creating Union Types
- Union Types and Type Guards
- Specifying Types with Literal Types
- Using Enums and Literal Types
- Building Mapped Types and Utility Types
- TypeScript Configuration Options
- Dealing with Strictness
- Testing with Cypress Why Cypress?
- Installing Cypress
- Configuring Cypress and Rails
- Writing Our First Test
- Understanding How Cypress Works
- More Testing and Troubleshooting Basics
- Writing More Cypress Tests
- Cypress and React
- Cypress Utilities and API
- Troubleshooting
A1. Framework Swap
- The All-Stimulus App
- The All-React App
- Comparison
Getting the Examples Source
wget http://media.pragprog.com/titles/nrclient/code/nrclient-code.zip
tar zxvf nrclient-code.zip
rm nrclient-code.zip
unzips into a code folder.