Javascript

We use Hotwire as our Javascript solution.

Now Hotwire mainly contains two parts, Turbo and Stimulus

Turbo

Turbo contains four parts:

1. Turbo Drive: accelerates links and form submissions
2. Turbo Frames: decompose pages into independent contexts like HTML iframe
3. Turbo Streams: deliver page changes over WebSocket, SSE or in response to form submissions using just HTML and a set of CRUD-like actions
4. Turbo Native: help build hybrid apps for iOS and Android.

You can check https://turbo.hotwired.dev/ to learn more.

We import Turbo in frontend/src/application/app.js

Stimulus

Stimulus is a JavaScript framework with modest ambitions. Unlike other front-end frameworks, Stimulus is designed to enhance static or server-rendered HTML—the “HTML you already have”—by connecting JavaScript objects to elements on the page using simple annotations.

We can:

1. Use the classic dev frameworks such as Django, Rails to render HTML.
2. Use Stimulus to attach JS to the DOM elements.

You can check https://stimulus.hotwired.dev/ to learn more.

tip

We have created some Stimulus controllers for you, and you can find them in frontend/src/controllers.