Gain insights into building applications using Rails Webpacker, Webpack, and TypeScript. Explore Stimulus, React, state management, and communication with servers for richer interactions.

railspostgresssl.tar.gz

introduction/01

introduction/02

introduction/03

introduction/04

introduction/05

introduction/06

stimulus/01

stimulus/02

stimulus/03

stimulus/04

stimulus/05

stimulus/06

react/01

react/02

react/03

react/04

css/01

css/02

css/03

server/01

server/02

server/03

server/04

server/05

server/06

state/01

state/02

state/03

state/04

state/05

state/06

adv_types/01

adv_types/02

adv_types/03

testing/01

testing/03

all_stimulus/01

all_react/01

introduction/01_testing

testJob

introduction/01-copy

introduction/02-copy

introduction/03-copy

introduction/04-copy

introduction/05-copy

introduction/06-copy

stimulus/01-copy

stimulus/02-copy

stimulus/03-copy

stimulus/04-copy

stimulus/05-copy

stimulus/06-copy

react/01-copy

react/02-copy

react/03-copy

react/04-copy

css/01-copy

css/02-copy

css/03-copy

server/01-copy

server/02-copy

server/03-copy

server/04-copy

server/05-copy

server/06-copy

state/01-copy

state/02-copy

state/03-copy

state/04-copy

state/05-copy

state/06-copy

adv_types/01-copy

adv_types/02-copy

adv_types/03-copy

all_stimulus/01-copy

introduction/01-copy-r0guf3

react/02-copy-copy

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.

To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquainted with Stimulus and React which will help with creating richer interactions.

In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your Stimulus code, as well as how to test and troubleshoot your application.

By the end of this course, you will be well equipped to create larger, more complex applications that make use of modern tools.

Modern Front-end Development for Rails



Now that we've implemented some show/hide toggle interactivity using TypeScript without a JavaScript framework and started to feel some of the difficulty there, it's time to look at a tool that makes writing these interactive parts much easier. We have a schedule page in our sample app, and it’s got some filters that haven’t been implemented yet.

In this chapter, we're going to use the Stimulus library to start adding these features. Along the way, we’ll explore Stimulus’ basic concepts and then combine those concepts to build complex functionality into our app.


# What is Stimulus?

[Stimulus](https://stimulusjs.org) is a tool with relatively small goals. Its own website describes it as "a modest JavaScript framework for the HTML you already have." Where  React tries to replace your entire view layer, Stimulus is mostly trying to allow you to handle common JavaScript patterns quickly and without much extra complication. That pattern is: “an event happens, and I’d like to respond to it.”



Stimulus' main concepts simplify the process of creating the relationship between an event and the code that gets invoked in response. If you weren't using Stimulus, you'd likely try to handle these interactions with jQuery or without a framework at all, just using native DOM methods. Stimulus, like Rails, was originally built by Basecamp, and has many 
#concept=convention_over_configuration#convention_over_configuration#concept#
 design features that are reminiscent of the way Rails works. 



Stimulus is particularly good for interactions that are relatively small, are expansions of existing browser capabilities, and don't need much internal state. Stimulus is great at adding relatively small, contained areas of interactivity to your application, like augmented forms, or simple navigation.  In this chapter, we will use Stimulus to implement our show-hide button and use it for typeahead search within our page.

Stimulus revolves around a few concepts that describe how your HTML markup relates to your JavaScript code. All of these items are inserted into your application by adding specific `data` attributes to DOM elements in the markup that you send to the browser. When the page is loaded, Stimulus looks for these special attributes and uses them to set up event listeners behind the scenes. These listeners dispatch events to the controller method specified in your actions.

- Controllers: Controllers are where your code goes and largely contain methods that are responses to events that happen.

- Actions: Actions declare that you are interested in having Stimulus do something in response to an event on the page.

- Targets: Targets are DOM elements that are of interest to a controller, typically because either the controller is using the element to determine the state of the page, or the controller is using the state of the page to change the element.

- Data maps and Values: Data maps and values are state that is stored in the DOM that are of interest to a controller. Stimulus allows you to declare the type of these values in your controller, though as we'll see that conflicts a little bit with TypeScript.

- Classes: A very common use of data maps and values is to represent CSS classes. Stimulus provides a special mechanism for managing updating CSS classes on DOM elements.

Stimulus and React represent two different sides of a long-standing debate over how to structure a web application. Stimulus is of the opinion that a web application primarily is based on the server, and the role of the client is to provide some interactivity, but on top of the markup that is rendered on the server. 

Stimulus makes extensive use of HTML markup to specify the interaction between HTML and JavaScript. This is unlike React, which uses its own JSX markup, and also unlike jQuery, which tries to keep JavaScript data outside the HTML markup.


Get an overview of how Stimulus allows us to build complex interactive functionality into our app.

Introduction

Getting Started

Client-side Rails

Stimulus

React

Cascading Style Sheets

TypeScript

Webpack

Webpacker

Talking to the Server

Managing State in Stimulus Code

Managing State in React

Using Redux to Manage State

Validating Code with Advanced TypeScript

Testing with Cypress

More Testing and Troubleshooting Basics

Appendix

Introduction to Stimulus