Stimulus, um modesto framework JavaScript para o HTML que você já tem!

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:

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

Yarn
Stimulus Starter

Passo a Passo da criação do APP

1) Faça um clone do projeto:

2) Entre na pasta criada no passo anterior:

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”:

4) Agora vamos executar os dois comandos seguintes (para instalar as dependências e subir o servidor):

5) Abra seu browser e na barra de endereços digite http://localhost:9000.

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:

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:

Tudo deve funcionar como antes, mas agora temos um controller refatorado \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 Facebook e nosso Twitter, veja os screencasts e talks no Youtube, 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!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por
Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

Janeiro 29, 2018

1 responses on "Stimulus, um modesto framework JavaScript para o HTML que você já tem!"

  1. 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

Deixe uma resposta

Feito com s2 por OneBitCode
%d blogueiros gostam disto: