Stimulus Explained: Just Enough JavaScript for Server-Rendered Pages

Introduction

Not every page needs a single-page app. If your server already renders good HTML — the Rails, Laravel, and Django way — bolting on React for a dropdown or a toggle is overkill, but writing jQuery spaghetti is no fun either. Stimulus, released in 2018 by the Rails team at 37signals, is the middle path: a modest JavaScript framework that attaches behaviour to HTML you already have, using conventions instead of a build step or a virtual DOM. It is JavaScript for the 90% of pages that are mostly server-rendered.

Controllers, targets, and values

Stimulus organises behaviour around three ideas, all declared in plain HTML:

  • Controllers — small JavaScript classes that connect to an element via a data-controller attribute and run when that element appears on the page.
  • Targets — named elements inside a controller's scope, declared with data-hello-target, so code reads this.nameTarget instead of querying the DOM by hand.
  • Values and actions — typed data passed through data-hello-name-value attributes, and behaviour wired with data-action="click->hello#greet", keeping the HTML readable and the JavaScript small.

A greeting controller shows the whole model — HTML declares the wiring, JavaScript supplies the behaviour:

// hello_controller.js
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
  static targets = ["name", "output"];
  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`;
  }
}
<div data-controller="hello">
  <input data-hello-target="name" type="text">
  <button data-action="click->hello#greet">Greet</button>
  <span data-hello-target="output"></span>
</div>

No build step required, no state to synchronise, no virtual DOM: the HTML is the source of truth, and Stimulus just makes it interactive.

The honest trade

Stimulus's trade is scope: it deliberately does not do routing, global state, or complex client-side rendering, so a genuinely app-like interface will outgrow it. Its ecosystem is also smaller than React's or Vue's. The rule of thumb: Stimulus when your pages are mostly server-rendered and need sprinkles of interactivity; a full framework when the interface itself is the product.

Takeaway

Stimulus is just enough JavaScript for server-rendered pages: controllers, targets, and actions declared in HTML, with no build step and no virtual DOM. It trades app-framework power for simplicity — and for most pages, simplicity is exactly what you need.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and, unusually for a systems language, genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally use ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small: fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy: threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait; it start...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls: everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them, each a widget, composed by nesting. Layout widgets (like Row, Column, and Padding) do the arranging, so there is n...
Read more