Stimulus.js: Una alternativa de framework JS para aplicaciones Rails

Sé lo que estás pensando... Otro JavaScript marco? Ya hay tantos. Tienes razón, pero éste me llamó la atención porque fue creado por Campamento base. Probablemente conozcas esta empresa, son los creadores de Ruby on Rails. También crearon Turbolinks, y lo menciono porque Stimulus combina de maravilla con él. Así que, ¿tal vez merezca la pena probar Stimulus?

¿Cómo funciona?

El estímulo funciona monitorizando la página, esperando a que el controlador de datos para que aparezca. La dirección controlador de datos conecta y desconecta los controladores de Stimulus. La premisa es simple: al igual que la clase es una conexión entre HTML y CSS, controlador de datos es un puente entre HTML y JavaScript. Stimulus también añade el datos-acción que describe cómo los eventos de la página deben activar los métodos del controlador, y el atributo datos-objetivo que permite encontrar elementos en el ámbito del controlador.

Fácil instalación

Si tu aplicación Rails utiliza una gema webpacker, puedes instalar Stimulus con un simple comando, ya que la gema webpacker proporciona una tarea para instalar Stimulus. Sólo tienes que ejecutar el siguiente comando en el directorio raíz de Rails:

rails webpacker:install:stimulus
Esto añade estímulo a paquete.json y crea los dos archivos siguientes: app/javascript/controllers/index.js:

import { Aplicación } de "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const aplicación = Aplicación.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definicionesDeContexto(contexto))

Puedes ver que se llama al ayudante require.context de webpack. Luego pasa el contexto resultante al método Application#load. Esto significa que nuestra aplicación está buscando archivos llamados[identificador]_controlador.js en el app/javascript/controllers/ donde el identificador se corresponde con el identificador del controlador de datos en su HTML. Este es exactamente el lugar donde debemos poner los controladores Stimulus.
La aplicación/javascript/controllers/hello_controller.js también se genera. Esto es sólo un controlador de ejemplo con el que podemos jugar.

Uso básico

Ok, así que tenemos el hello_controller.js creado con lo siguiente código:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["salida"]
connect() {
this.outputTarget.textContent = '¡Hola, Stimulus!'
}
}

Pero, como sabes, no veremos ningún efecto si no hacemos la conexión entre HTML y JavaScript. Vamos a añadir algo de código a tu vista HTML. Puedes poner esto cuando quieras:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

¿Y sabes qué? Eso es todo. Si recargas tu página y ves "¡Hola, Estímulo!" en tu página, significa que la conexión funciona correctamente. Sencillo, ¿verdad?
Ok, pero esto es sólo una visualización de texto plano. ¿Podemos tener algo de acción? Pues sí. Como he mencionado antes, también existe la función datos-acción atributo. Cambiemos entonces nuestra vista HTML:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Calcule</button></p>
</div>

Y el controlador de estímulo app/javascript/controllers/hello_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["salida", "días"]
connect() {
this.outputTarget.textContent = '¿Cuánto tiempo has estado en cuarentena?'
}
calculate() {
const elemento = this.daysTarget
const días = element.valor
const lockdownDays = 14
let daysLeft = días de cierre - días

if (daysLeft < 1) {
  alert('¡Eres libre!')
}
else {
  alert(`Cantidad de días que debe permanecer en cuarentena: ${daysLeft}`)
}

}
}

Aquí tenemos una aplicación muy sencilla que calcula cuánto tiempo debemos permanecer en cuarentena. Lo conseguimos utilizando el atributo data-action en HTML.
Puede ver que también hemos añadido "días" a la lista de objetivos en el código JavaScript. Cuando hacemos esto, Stimulus crea automáticamente un this.daysTarget que devuelve el primer elemento de destino coincidente.

¿Qué más necesita saber?

Devoluciones de llamada

Probablemente se habrá dado cuenta de que hay un conectar() en ambos ejemplos. Este es para los callbacks incorporados. Usted debe saber todos ellos y su ciclo de vida, así que aquí están:
inicializaruna vez, cuando el controlador se instancie por primera vez,
conecte: siempre que el controlador esté conectado al DOM,
desconectar: cada vez que el controlador se desconecta del DOM.

Descriptor de la acción

En datos-acción valor clic->hello#calcular se llama descriptor de acción. Este descriptor dice que:

• haga clic en es el nombre del evento,
• hola es el identificador del controlador,
• calcular es el nombre del método.

Objetivos

Al igual que para las acciones, Estímulo tiene un descriptor de objetivo. La dirección hola.días descriptor dice que: hola es el identificador del controlador,
días es el nombre del objetivo.

En el ejemplo anterior, mencioné que Estímulo crea el this.daysTarget cuando hay "días" en la lista de objetivos. También debe saber que se pueden crear más propiedades. En relación con el ejemplo, usted puede tener:

this.daysTarget que evalúa hasta el primer objetivo en el ámbito del controlador. Si no hay ningún objetivo, la propiedad indica un error,
this.daysTargets evalúa hasta un array de todos los objetivos fuente en el ámbito del controlador,
this.hasDaysTarget devuelve true si hay un objetivo o false en caso contrario.

Como puedes ver, Stimulus es sencillo y puede añadirse fácilmente a tu aplicación. Está ganando cierta popularidad en la comunidad RoR y no me sorprende. Como desarrollador de Ruby, me gusta mucho trabajar con Stimulus. ¿Qué te parece si lo pruebas?

Más información:

• Desarrollo de aplicaciones web: ¿Por qué merece la pena elegir la tecnología Ruby on Rails?
• Ha llegado la hora de una nueva realidad. Hace un mes comenzó la era del trabajo a distancia
• 5 razones por las que encontrarás desarrolladores Ruby cualificados en Polonia