Saltar al contenido
Framework Ecosystems LabsUn contrato, muchos ecosistemas, la misma prueba.

✨ Stimulus — 2018#

⬅️ Atlas · 🟨 Ecosistema JavaScript · 🗂️ Índice

Stimulus es deliberadamente pequeño. Su propuesta: el HTML ya existe y lo genera el servidor; JavaScript solo lo anima. Es el complemento de Turbo y el opuesto exacto de un framework que construye la página desde datos.
Aparición 2018, creado por Basecamp
Clasificación ui-library
Ecosistema JavaScript
Licencia MIT
Estado 🟢 Activo
Documentación https://stimulus.hotwired.dev/handbook/introduction

💡 El HTML dice qué hace#

<div data-controller="contador" data-contador-maximo-value="10">
  <button data-action="click->contador#incrementar">+1</button>
  <span data-contador-target="salida">0</span>
</div>
export default class extends Controller {
  static targets = ["salida"];
  static values = { maximo: Number };

  incrementar() {
    this.salidaTarget.textContent = Math.min(+this.salidaTarget.textContent + 1, this.maximoValue);
  }
}

Lo notable es dónde vive la información: leyendo el HTML sabes qué comportamiento tiene ese bloque, qué elementos usa y con qué parámetros. No hay que buscar en un archivo aparte qué se enganchó a ese div.

Es la misma idea que la ficha de Alpine.js desarrolla —comportamiento declarado junto al marcado— con una diferencia: Stimulus saca la lógica a una clase, así que el HTML declara qué y el JavaScript define cómo.

🧭 Lo que no hace, a propósito#

No renderiza. No mantiene un estado global. No hay DOM virtual ni reactividad. Si el contenido cambia, lo genera el servidor y Turbo lo sustituye.

Esa renuncia es la que hace que funcione con lo que el servidor ya genera: se puede añadir a una aplicación existente sin reescribir nada, que es exactamente la propiedad que el módulo 10 busca en una estrategia de modernización incremental.

Y marca su límite: una interfaz con estado compartido entre muchas regiones, o con mucha lógica en el cliente, no encaja. Ahí el módulo 03 pide un framework con modelo de estado propio.

🎓 Las dos lecciones#

1. Un comportamiento declarado en el HTML se encuentra leyendo el HTML. Menos indirección es menos carga cognitiva [sweller-cognitive-load-theory].

2. Una biblioteca que no renderiza se puede añadir a lo que ya existe. Es la condición para modernizar sin reescribir.

🔗 Enlaces#

Fuentes#