Stimulus and Turbo (Hotwire) in Ruby on Rails - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Stimulus in the context of Hotwire?

Stimulus is a lightweight JavaScript framework that adds behavior to HTML by connecting controllers to elements. It helps you write small, reusable JavaScript pieces that respond to user actions without heavy frameworks.

beginner

What role does Turbo play in Hotwire?

Turbo speeds up web apps by replacing full page reloads with partial updates. It intercepts links and form submissions to update only parts of the page, making apps feel faster and smoother without writing much JavaScript.

beginner

How do Stimulus controllers connect to HTML elements?

Stimulus controllers connect using data attributes like data-controller on HTML elements. This tells Stimulus which controller to use, and you can add actions with data-action to respond to events like clicks.

intermediate

What is a Turbo Frame and how does it improve user experience?

A Turbo Frame is a part of the page that can update independently. When you click a link or submit a form inside a Turbo Frame, only that frame reloads, not the whole page. This makes interactions faster and smoother.

intermediate

How do Turbo Streams help update the page dynamically?

Turbo Streams let the server send small HTML snippets that tell the browser how to update parts of the page (like adding or removing elements) without a full reload. This keeps the page in sync with server changes in real time.

Which attribute connects a Stimulus controller to an HTML element?

A data-turbo

B data-frame

C data-action

D data-controller

The data-controller attribute tells Stimulus which controller to attach to the element.

What does Turbo primarily replace to make web apps faster?

A Full page reloads

B CSS stylesheets

C JavaScript event listeners

D Database queries

Turbo intercepts links and form submissions to avoid full page reloads, updating only parts of the page.

Which Hotwire component allows partial page updates by targeting specific page sections?

A Stimulus Controllers

B Turbo Frames

C Webpack

D Action Cable

Turbo Frames let you update only parts of the page independently, improving speed and user experience.

How do Turbo Streams update the page?

A By running JavaScript timers

B By reloading the entire page

C By sending HTML snippets with instructions to modify the DOM

D By changing CSS styles

Turbo Streams send small HTML fragments that tell the browser how to update parts of the page dynamically.

Which of these is NOT a feature of Stimulus?

A Handling server-side database queries

B Connecting controllers via data attributes

C Responding to user events

D Adding behavior to HTML elements

Stimulus is a JavaScript framework for client-side behavior; it does not handle server-side database queries.

Explain how Stimulus and Turbo work together to improve a Rails web app's user experience.

Think about how small JavaScript pieces and fast page updates combine.

Describe how you would use a Stimulus controller to respond to a button click in a Rails app using Hotwire.

Focus on connecting HTML attributes to controller methods.