Fork me on GitHub

Project Notes

Modern Front-End Development for Rails

Notes on the book Modern Front-End Development for Rails, By Noel Rappin, pubished by The Pragmatic Programmers.



Highlights from the Table of Contents

Part I — Getting Started

  1. Client-Side Rails
  • Managing State and Front-End Development
  • Installing Webpacker
  • Using Webpacker
  • Adding Real Features
  • Going Generic
  1. 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
  1. React
  • What Is React?
  • Installing React
  • Adding Our First Component
  • Composing Components
  • Tying Into the Page
  • Interactivity, State, and Hooks
  • Sharing State
  1. 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

  1. 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
  1. Webpack
  • Problems Being Solved
  • Yarn
  • Webpack
  1. Webpacker
  • Webpacker Basics
  • Webpacker in Development
  • Webpacker in Production
  • Customizing Webpacker
  1. 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

  1. Managing State in Stimulus Code
  • Sharing State in Stimulus
  • Refactoring to the Reducer Pattern
  1. Managing State in React . .
  • Using Context to Share State in React
  • Adding Asynchronous Events to Contexts
  1. Using Redux to Manage State
  • Installing and Using Redux
  • Adding Asynchronous Actions to Redux

Part IV — Validating Your Code

  1. 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
  1. Testing with Cypress Why Cypress?
  • Installing Cypress
  • Configuring Cypress and Rails
  • Writing Our First Test
  • Understanding How Cypress Works
  1. 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

tar zxvf

unzips into a code folder.

Credits and References

About LCK#148 rubyrailsjavascriptbook
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.