Roberto Nogueira
BSd EE, MSd CE
Solution Integrator Experienced - Certified by Ericsson
About
Learn everything you need to about the subject of this eBook
project.
So you want to write some client-side code
[x] Basic assumptions
[x] The tools we'll use
[x] How the book is organized
[x] The sample code
Part I -- Getting started
1. Getting Started
[ ] Getting Started with Client-Side Rails excerpt
[ ] 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 excerpt
[ ] 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 excerpt
[ ] 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 your code
[ ] 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