Stimulus.js: Uma alternativa de framework JS para aplicações Rails

Eu sei o que estão a pensar... Outro JavaScript quadro? Já existem tantas! Tem razão, mas esta chamou-me a atenção por ter sido criada por Acampamento de base. Provavelmente conhece esta empresa, são os criadores de Rubi sobre Carris. Eles também criaram Turbolinks, e menciono isto porque o Stimulus combina lindamente com ele. Então, talvez valha a pena experimentar o Stimulus?

Como é que funciona?

O Stimulus funciona através da monitorização da página, aguardando que o controlador de dados para aparecer. O atributo controlador de dados liga e desliga os controladores Stimulus. A premissa é simples: tal como a classe é uma ligação entre HTML e CSS, controlador de dados é uma ponte do HTML para o JavaScript. O Stimulus também adiciona a função ação de dados que descreve como os eventos na página devem acionar os métodos do controlador, e o atributo alvo de dados que lhe dá uma forma de encontrar elementos no âmbito do controlador.

Instalação fácil

Se seu aplicativo Rails estiver usando uma gem do webpacker, você pode instalar o Stimulus com um simples comando, pois a gem do webpacker fornece uma tarefa para instalar o Stimulus. Basta executar o seguinte comando no diretório raiz do Rails:

rails webpacker:install:stimulus
Isto acrescenta Estímulo a package.json e cria os dois ficheiros seguintes: app/javascript/controladores/index.js:

importar { Application } from "stimulus" (Aplicação } de "stimulus")
importar { definitionsFromContext } de "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

Você pode ver que o auxiliar require.context do webpack é chamado. Ele então passou o contexto resultante para o método Application#load. Isso significa que nossa aplicação está procurando por arquivos chamados[identificador]_controlador.js no app/javascript/controladores/ onde o identificador corresponde ao identificador do controlador de dados do controlador no seu HTML. Este é exatamente o local onde devemos colocar os controladores Stimulus.
A aplicação/javascript/controladores/hello_controller.js também é gerado. Este é apenas um exemplo de um controlador com o qual podemos brincar.

Utilização básica

Ok, então temos o hello_controller.js ficheiro criado com o seguinte código:

importar { Controller } de "stimulus"

export default class extends Controller {
objectivos estáticos = ["output"]
connect() {
this.outputTarget.textContent = 'Olá, Stimulus!'
}
}

Mas, como sabe, não veremos quaisquer efeitos se não fizermos a ligação entre o HTML e o JavaScript. Vamos adicionar algum código à tua vista HTML. Podes colocar isto sempre que quiseres:

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

E sabes que mais? Isso é tudo! Se recarregar a sua página e vir "Hello, Stimulus!" na sua página, isso significa que a ligação está a funcionar corretamente. Simples, não é?
Ok, mas isto é apenas uma apresentação de texto simples. Podemos ter alguma ação? Sim, podemos! Como mencionei anteriormente, existe também a função ação de dados atributo. Vamos então alterar a nossa vista HTML:

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

E o controlador de estímulo app/javascript/controladores/hello_controller.js:

importar { Controller } de "stimulus"

exportar classe predefinida extends Controller {
objectivos estáticos = ["output", "days"]
connect() {
this.outputTarget.textContent = "Há quanto tempo está em quarentena?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

se (daysLeft < 1) {
  alert('Você está livre!')
}
else {
  alert(`A quantidade de dias que precisa de ficar em quarentena: ${daysLeft}`)
}

}
}

Aqui temos uma aplicação muito simples que calcula quanto tempo temos de ficar em quarentena. Conseguimos fazer isto utilizando o atributo data-action no HTML.
Pode ver que também adicionámos "dias" à lista de objectivos no código JavaScript. Quando fazemos isso, o Stimulus cria automaticamente um this.daysTarget que devolve o primeiro elemento de destino correspondente.

Que mais precisa de saber?

Chamadas de retorno

Provavelmente reparou que existe um ligar() em ambos os exemplos. Este é para as chamadas de retorno incorporadas. Deves conhecer todas elas e o seu ciclo de vida, por isso aqui estão elas:
inicializar: uma vez, quando o controlador é instanciado pela primeira vez,
ligar: sempre que o controlador estiver ligado ao DOM,
desligar: sempre que o controlador é desligado do DOM.

Descritor de ação

O ação de dados valor clique->hello#calcular é chamado um descritor de ação. Este descritor diz o seguinte:

• clique é o nome do evento,
• Olá é o identificador do controlador,
• calcular é o nome do método.

Objectivos

Tal como para as acções, o Estímulo tem um descritor de destino. O olá.dias descritor diz isso: Olá é o identificador do controlador,
dias é o nome do destino.

No exemplo anterior, mencionei que o Stimulus cria o this.daysTarget quando existe a propriedade "days" na lista de objectivos. Também precisa de saber que podem ser criadas mais propriedades. Relativamente ao exemplo, pode ter:

this.daysTarget que avalia até o primeiro alvo no escopo do controlador. Se não existir um alvo, a propriedade assinala um erro,
this.daysTargets avalia até uma matriz de todos os alvos de origem no âmbito do controlador,
this.hasDaysTarget devolve verdadeiro se existir um objetivo ou falso se não existir.

Como pode ver, o Stimulus é simples e pode ser facilmente adicionado à sua aplicação. Está a ganhar alguma popularidade no mercado de RoR e não estou surpreendido. Como programador Ruby, gosto muito de trabalhar com o Stimulus. Então, que tal dar uma volta com ele?

Ler mais:

• Desenvolvimento de aplicações Web: Porque é que vale a pena escolher a tecnologia Ruby on Rails?
• Chegou a altura de uma nova realidade. A era do trabalho remoto começou há um mês
• 5 razões para encontrar programadores Ruby qualificados na Polónia