Stimulus — O estímulo que o seu HTML precisa
Muitas vezes queremos dar uma melhorada em nosso site o dando novas funcionalidades, mas na maior parte dos casos, para fazer isso é necessário mexer em muito código ou mesmo trocar todo o front-end do seu site de uma tecnologia x para y, somente para aceitar as novas mudanças.
Para aqueles que desejam apenas dar uma polida em seu HTML, lhes apresento o framework Stimulus. Como o próprio nome já induz, a ideia desta tecnologia não é se preocupar em como o seu HTML será processado, ao invés disso, ele é projetado para incrementar o seu código para “fazê-lo brilhar”. O Stimulus combina maravilhosamente com o Turbolinks para fornecer uma solução completa para aplicativos rápidos e convincentes com uma quantidade mínima de esforço.
Parece estranho? Na verdade é tudo bem simples.
Como funciona?
Pegue o seu HTML já existe e coloque alguns atributos mágicos de controle, alvo e ação nas tags. Como neste exemplo:
Reparem que no exemplo acima, colocamos os atributos data-controller, data-target e data-action nas tags de div, input e button respectivamente. Feito isso, basta escrevermos um Controller que seja compatível com estas tags que o Stimulus o traz a vida “automagicamente”:
O Stimulus observa continuamente a página, agindo sempre que atributos mágicos aparecem ou desaparecem. Ele funciona com qualquer atualização na DOM, independentemente de ser um recarregamento completo, uma mudança de página do Turbolinks ou uma solicitação do Ajax. O Stimulus gerencia todo o ciclo de vida.
Como instalar
Há várias maneiras de se usar o Stimulus. Se você já possui um bundler na sua aplicação, tal com o webpack, ele é facilmente integrável. Se o seu projeto for mais old school, basta inserir uma tag <script> no seu HTML e iniciar o framework:
Para demais integrações, basta ler as instruções neste link.
Revelando o truque
O Stimulus funciona monitorando continuamente a página, esperando que apareça o atributo mágico data-controller. Assim como o atributo class, podemos colocar mais de um valor dentro dele. Mas em vez de aplicar ou remover nomes de classe CSS, os valores do data-controller conectam e desconectam os controladores Stimulus.
Pense nisso assim: da mesma forma que o class é a ponte que liga HTML ao CSS, o data-controller é uma ponte de HTML para JavaScript.
Em cima desta base, o Stimulus adiciona o atributo data-action, que descreve como os eventos na página desencadeiam métodos do controlador e o atributo mágico data-target, que lhe dá uma alça para encontrar elementos no escopo do controlador.
Conclusão
Bem bacana a ideia por trás do framework, não é? Ao invés de querer dominar todo o seu framework, ele apenas quer dar um estímulo a mais ao HTML para fazê-lo melhor. Só precisamos ficar atento em relação a compatibilidade com navegadores antiquados, como o Internet Explorer.
Para quem quiser mais detalhes, os desenvolvedores estão elaborando um Handbook com dicas práticas de como utilizar todo o potencial do framework. Vale a pena conferir, basta clicar aqui.
Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação e compartilhe!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube
