Introducción a Stimulus.js
Interfaz de Usuario Web
El frontend es responsable de la presentación y la interacción del usuario con la aplicación web. Esta capa se construye utilizando tecnologías como HTML, CSS y JavaScript, y puede incluir frameworks y bibliotecas que facilitan el desarrollo y mejoran la experiencia de usuario. En este epígrafe se analizan las principales arquitecturas empleadas en el desarrollo frontend, un framework minimalista orientado a la interactividad ligera y las herramientas más utilizadas para la representación de gráficos en esta capa.
Arquitectura Frontend
Las aplicaciones web tradicionales se basan en el renderizado del lado del servidor o SSR clásico (Server-Side Rendering), en el que el HTML se genera en el servidor y se envía al cliente. Aunque efectivo, este enfoque puede resultar menos dinámico, ya que cada interacción requiere una nueva solicitud al servidor. En este grupo se encuentran frameworks como Ruby on Rails o Django.
Por su parte, las Single Page Applications (SPA) cargan una única página HTML y actualizan dinámicamente el contenido en el cliente, ofreciendo una experiencia más interactiva. Este modelo, adoptado por frameworks como React, Vue.js o Angular, ha cobrado fuerza gracias al aumento en la potencia de los dispositivos y la mejora de las conexiones de red.
El SSR moderno representa una evolución del renderizado en servidor, ya que combina la generación inicial del HTML en el servidor con la hidratación del cliente, lo que permite una carga inicial rápida y posteriormente una navegación fluida. Frameworks como Next.js y Nuxt.js implementan este enfoque híbrido.
En paralelo, ha emergido el modelo JAMstack (JavaScript, APIs y Markup), que se basa en la pre-renderización de contenido estático y la utilización de APIs para añadir interactividad. Esta arquitectura favorece un rendimiento elevado y tiempos de carga reducidos, con ejemplos destacados como Gatsby y Jekyll.
Single Page Applications (SPA)
Ha día de hoy, las aplicaciones de una sola página (SPA) son un enfoque popular en el desarrollo frontend y se pueden distinguir dos enfoques principales. Por un lado, las SPA clásicas, representadas por frameworks como React o Vue.js, que permiten desarrollar interfaces altamente interactivas y complejas, aunque conllevan una mayor carga en el cliente y tiempos de desarrollo más elevados. Por otro, las llamadas SPA ligeras o HTML-first, como Stimulus.js, Alpine.js o Preact, que priorizan la simplicidad y el rendimiento al añadir interactividad directamente sobre el HTML renderizado en servidor, reduciendo así la sobrecarga de una SPA completa. Este segundo enfoque resulta especialmente adecuado cuando se busca agilidad en el desarrollo y un menor consumo de recursos, sin renunciar a una experiencia de usuario fluida.
Stimulus
Stimulus es un framework de JavaScript ligero diseñado para agregar interactividad a páginas web sin la necesidad de desarrollar una SPA (Single Page Application). Su funcionamiento se basa en controladores que se vinculan a elementos HTML mediante atributos específicos, lo que facilita una integración sencilla y eficiente con el HTML existente. Creado por Basecamp, Stimulus forma parte del ecosistema Hotwire, lo que lo hace especialmente útil en aplicaciones con renderizado del lado del servidor. Además, su origen está ligado a los mismos creadores de Ruby on Rails, lo que refuerza su relevancia en entornos donde se prioriza la simplicidad y la productividad.
Principios de funcionamiento
Como ya se mencionó, Stimulus se basa en controladores, los cuales se asocian a elementos HTML mediante el atributo data-controller, al cual se puede dotar de acciones a eventos específicos mediante el atributo data-action. En el siguiente ejemplo se muestra como al controlador example se le asigna el evento de click en el botón. Esto quiere decir que cuando el botón es clicado, se invoca el método handleClick del controlador example. @stimulusjs
<div data-controller="example">
<button data-action="click->example#handleClick">Click me</button>
</div>Por otra parte, se tiene el código JavaScript correspondiente al controlador example donde se define el método handleClick al que se ha delegado el evento de click. @stimulusjs
import { Controller } from "stimulus";
export default class extends Controller {
handleClick(event) {
alert("Button clicked!");
}
}Otro poder importante de Stimulus es su capacidad de asociarlo con elementos específicos del DOM a través de los targets. Los targets son elementos dentro del controlador que pueden ser referenciados fácilmente en el código JavaScript utilizando el atributo data-<controller-name>-target. Por ejemplo, en el siguiente código se define un target llamado message dentro del controlador example. Este target es un párrafo que inicialmente muestra “Hello, Stimulus!”. Cuando se hace clic en el botón, el método handleClick actualiza el contenido del párrafo a “Button clicked!”.
<div data-controller="example">
<p data-example-target="message">Hello, Stimulus!</p>
<button data-action="click->example#handleClick">Click me</button>
</div>import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["message"];
handleClick(event) {
this.messageTarget.textContent = "Button clicked!";
}
}En aplicaciones más complejas es necesario almacenar estados de las variables, y para ello se cuenta con los values. Los values son una forma de definir propiedades reactivas dentro de los controladores de Stimulus, permitiendo que el estado de la interfaz de usuario se mantenga sincronizado con los datos externos. A continuación se muestra un ejemplo de cómo se pueden utilizar los values en un controlador de Stimulus.
<div
data-controller="example"
data-example-count-value="0"
>
<p data-example-target="counter">0</p>
<button data-action="click->example#increment">Increment</button>
</div>En este ejemplo se define un value llamado count con un valor inicial de 0. El párrafo muestra el valor actual del contador, y el botón incrementa este valor cada vez que se hace clic en él. El controlador correspondiente maneja la lógica para incrementar el contador y actualizar la interfaz de usuario.
import { Controller } from "stimulus";
export default class extends Controller {
static values = {
count: Number
};
static targets = ["counter"];
increment() {
this.countValue++;
}
countValueChanged() {
this.counterTarget.textContent = this.countValue;
}
}Un punto a destacar sobre los values es que se puede capturar sus eventos de cambios a través del método <name>ValueChanged. De este modo, se puede reaccionar a los cambios en los valores y actualizar la interfaz de usuario en consecuencia. Siguiendo el ejemplo el anterior, se podría implementar un método countValueChanged para manejar los cambios en el contador.
import { Controller } from "stimulus";
export default class extends Controller {
static values = {
count: Number
};
static targets = ["counter"];
increment() {
this.countValue++;
this.counterTarget.textContent = this.countValue;
}
countValueChanged() {
this.counterTarget.textContent = this.countValue;
}
}Como se observa, Stimulus potencia el DOM en lugar de reemplazarlo, a diferencia de frameworks como React o Vue. Su integración con HTML existente es sencilla y su curva de aprendizaje es baja. Además, dispone de una documentación clara y una comunidad activa, lo que facilita la resolución de dudas y problemas.
Limitaciones
A pesar de sus ventajas, Stimulus también presenta algunas limitaciones. En primer lugar, su enfoque en la simplicidad puede llevar a una menor flexibilidad en comparación con frameworks más complejos. Además, aunque Stimulus es adecuado para aplicaciones pequeñas y medianas, puede no ser la mejor opción para proyectos a gran escala que requieren una gestión de estado más robusta. En modo general, su comunidad es pequeña en comparación con otros frameworks más establecidos y anteriormente mencionados.
Relevancia
A pesar de las limitaciones mencionadas, Stimulus sigue siendo una opción relevante para proyectos que requieren bajo consumo de recursos. Si bien las SPA desarrolladas con React o Vue pueden ofrecer eficiencia y funcionalidad avanzada, suelen ser más exigentes en términos de memoria y procesamiento. Por ello, en entornos con navegadores de recursos limitados o dispositivos de gama baja, Stimulus resulta una alternativa más ligera y adecuada, permitiendo mantener la interactividad sin sacrificar el rendimiento.