O que vamos aprender
Vamos ter uma introdução ao Stimulus, novo framework JavaScript lançado pelos criadores do Rails.
Também vamos criar um pequeno projeto para ter um contato inicial com este framework e assimilar os princípios básicos do Stimulus.
Neste artigo saberemos a razão de ter mais esse framework JS na comunidade e saber em que contexto o Stimulus deve ser usado.
Se possível, sigam o passo a passo e construam a aplicação na seção “Passo a Passo da criação do APP”. Assim, os conceitos, como o padrão de arquitetura do Stimulus e alguns outros detalhes podem ficar mais claros.
Espero que gostem… 😉
O que é o Stimulus?
Stimulus é um framework JavaScript, projetado pelos desenvolvedores da Basecamp, criadores do Ruby On Rails e liderados por David H. Hansson (DHH).
Como diz o título, este recém lançado framework, tem ambições mais modestas, não pretendendo assumir o controle do front-end de uma aplicação e apesar de não depender, combinado com Turbolinks, fornece uma solução completa para aplicativos rápidos e convincentes com uma quantidade mínima de esforço.
Na verdade, Stimulus não foi projetado para renderizar, mas para evoluir o HTML existente na página, melhorando a aplicação e agregando comportamento ao Front-end.
Para quais tipos de aplicação é indicado?
É importante notar o contexto: Stimulus não foi criado para as chamadas “Aplicações JavaScript”, onde Angular, EmberJS, VueJS e React são ferramentas mais apropriadas. Seus criadores pensaram neste framework trabalhando com HTML do lado do servidor, onde, nas palavras de DHH, “acrescentar pitadas de JavaScript fazem a aplicação brilhar”.
Quais os benefícios?
Conforme enunciado por DHH, Stimulus permite trazer de volta a produtividade, como era antigamente, quando um único programador poderia fazer progresso sem ficar preso em camadas de sistemas distribuídos. Uma época, antes de todos acharem que o Santo Graal era confinar seu aplicativo do lado do servidor, gerando JSON para um aplicativo de cliente, baseado em JavaScript.
Como funciona?
Para quem desenvolve em Ruby On Rails, model-view-controller é um padrão de arquitetura bem conhecido.
No framework Stimulus, existe o que eu chamo de padrão de arquitetura controller-target-action.
Usando este padrão, mesmo sem saber nada sobre Stimulus, podemos olhar para um único trecho HTML e saber qual comportamento está agindo sobre ele.
Exemplo de código:
|
1 2 3 4 |
<div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet">Greet</button> </div> |
O atributo data-controller da tag div associa este trecho HTML ao arquivo “hello_controller.js”
O atributo data-target, da tag input, indica que existe um atributo chamado “name”, dentro do controller “hello”, descrito acima.
O atributo data-action, da tag button, indica que quando o usuário acionar o botão com um click, o método “greet” do controller “hello” será invocado.
Isto é quase como um pseudocódigo. Muito diferente de ler um pedaço de HTML que tem um arquivo de JavaScript externo aplicando manipuladores de eventos e mecanismos obscuros agindo sobre o mesmo trecho HTML.
Stimulus também mantém a separação de responsabilidade, coisa que foi perdida em muitos frameworks JavaScript contemporâneos.
O que vamos criar?
Para explorar alguns conceitos, vamos manipular uma aplicação bem simples e mostrar o Stimulus em funcionamento.
Para facilitar, usaremos o stimulus-starter, que é um projeto pré configurado do repositório do Stimulus.
Vamos precisar do Yarn neste projeto para gerenciamento de dependências, para instalar acesse: https://yarnpkg.com
*Temos um post explicando em detalhes o que é o Yarn e como usa-lo clicando aqui
Ferramentas
Passo a Passo da criação do APP
1) Faça um clone do projeto:
|
1 |
$ git clone https://github.com/stimulusjs/stimulus-starter.git |
2) Entre na pasta criada no passo anterior:
|
1 |
$ cd stimulus-starter |
3) Como sabemos que o Stimulus está disponível na aplicação?
Vamos implementar o mínimo necessário para nos certificar que o Stimulus está funcionando:
3.01) Em stimulus-starter/public/index.html, digite o que está entre as tags <‘body’> e <‘/body’>:
3.02) Em stimulus-starter/src/controllers/hello_controller.js, inclua o método “connect”:
|
1 2 3 4 5 6 7 |
import { Controller } from "stimulus" export default class extends Controller { connect() { console.log("Stimulus is working!") } } |
4) Agora vamos executar os dois comandos seguintes (para instalar as dependências e subir o servidor):
|
1 2 |
$ yarn install $ yarn start |
5) Abra seu browser e na barra de endereços digite how to start dating again at 45.
Na tela principal do browser não irá aparecer nada, mas no console do browser podemos ver:
“Stimulus is working!”
Sinal que o Stimulus está pronto para ser usado 🙂
6) Lembra do trecho de código que usamos como exemplo anteriormente? Vamos implementá-lo agora.
Faça o arquivo stimulus-starter/public/index.html, ficar da seguinte forma:
Com este pedaço de HTML, queremos que a mensagem “Hello” e mais um nome informado apareça na tela, assim que o usuário acionar o botão com um click.
O atributo data-target da tag input disponibiliza o atributo “name”, que será usado dentro do controller “hello”.
Existe um outro atributo data-target, na tag h3, que disponibiliza o atributo “say_hello”. Ele será usado dentro do controller “hello” para exibição de uma mensagem.
O atributo data-action, da tag button, associa este botão ao método “greet” do controller “hello”. Desta forma, quando o usuário acionar o botão com um click, o método “greet” do controller “hello” será invocado.
A propriedade data-controller, associa a tag div ao arquivo JavaScript “hello_controller.js”, que vem a seguir.
7) Faça o arquivo stimulus-starter/src/controllers/hello_controller.js ficar assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Controller } from "stimulus" export default class extends Controller { connect() { console.log("Stimulus is working!") } greet() { const element = this.targets.find("name") const name = element.value this.targets.find('say_hello').innerHTML = `Hello ${name}` } } |
Muito bem, se tudo deu certo até agora, podemos ver uma tela muito parecida com a seguinte:
Refatorando
Agora vamos refatorar nosso controller “hello_controler.js”.
Usando o arquivo stimulus-starter/src/controllers/hello_controller.js deixe-o conforme o seguinte código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Controller } from "stimulus" export default class extends Controller { connect() { console.log("Stimulus is working!") } greet() { this.outputElement.innerHTML = `Hello ${this.name}` } get name() { return this.inputElement.value } get inputElement() { return this.targets.find("name") } get outputElement() { return this.targets.find("say_hello") } } |
Tudo deve funcionar como antes, mas agora temos um controller refatorado \o/.
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Conclusão
Neste artigo introdutório, tivemos um contato inicial com um novo framework JavaScript, o Stimulus, recém lançado pelos criadores do Ruby On Rails e desenvolvedores do Basecamp.
Acompanhamos na prática, a criação de uma pequena aplicação utilizando os recursos básicos do Stimulus, além de termos ciência de qual o melhor contexto para aplicarmos este framework.
Na parte teórica do artigo, ficamos sabendo que o Stimulus foi projetado para funcionar no modelo de arquitetura controller-target-action, deixando claro para leitura e simplificando o HTML, dispensando regras complexas usadas pelos frameworks JS comumente utilizados hoje em dia.
Além do que foi apresentado, é importante adicionarmos que o Stimulus pode e vem sendo usado em conjunto com o Ruby On Rails. Os próprios criadores do Rails e do Stimulus usam os dois juntos em suas aplicações em produção, na empresa Basecamp.
Espero que o material seja útil e que tenham gostado!
Até breve 😉
Você é novo por aqui?
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.
Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso dating advice over 40 e nosso https://onebitcode.com/angela-and-hodgins-hook-up/, veja os screencasts e talks no https://onebitcode.com/netherlands-dating-sites-free/, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.
Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):
- WorkFlow Super Full Stack
- Desenvolvendo seus projetos como um profissional
- Guia do Freelancer
- PDF com links fundamentais para quem quer ser um freelancer de sucesso
- Guia One Bit Code de Gems
- Baixe gratuitamente seu e-Book com 60 Gems separadas por categorias
Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por dating advice over 40 ou e-mail, estamos aqui para você 🙂
Bem-vindo à família OneBitCode \o/
Para quem quer testar este projeto na versão final aqui apresentada, basta seguir o seguinte passo a passo e executar:
—
https://github.com/sergiosouzalima/stimulus-starter
eu achei mt interessante e curioso pra testar mas fiquei com uma dúvida, eu entendi que o stimulus nao vem pra concorrer com o react e talz mas como ele interage com o next.js, visto que ambos visam o server-side-rendering?
Gabriel, obrigado por ler o post e comentar. Neste caso realmente não posso ajudar. Eu não conheço o next.js.
Você consegue ajuda na comunidade https://onebitcode.com/ . Entre nos canais de comunicação. No Telegram conseguirá ajuda com certeza.
Obrigado!