Stimulus On Rails: Front-end rápido e com pouco esforço

Stimulus On Rails

No artigo anterior (Stimulus, um modesto framework JavaScript para o HTML que você já tem!), vimos uma introdução ao Stimulus, novo framework JavaScript lançado pelos criadores do Rails. Também criamos um pequeno projeto para ter um contato inicial com este framework e assimilar os princípios básicos do Stimulus.

Agora neste artigo vamos integrar o Stimulus numa aplicação bem simples em Ruby On Rails.

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, a integração com Rails e alguns outros detalhes podem ficar mais claros.

Espero que seja útil.
Enjoy  😉

 

O que é o Stimulus?

Em resumo, o Stimulus não pretende 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.
Isto é o que dizem os desenvolvedores da Basecamp, criadores do Stimulus, o novo e modesto framework JavaScript.

Para mais informações veja o artigo introdutório sobre o Stimulus  (Stimulus, um modesto framework JavaScript para o HTML que você já tem!).

Modesto mas ficando famoso

Tenho acompanhado os “likes” em formato de estrela que o github (github trending) disponibiliza para os desenvolvedores que de uma certa forma, aprovam um determinado repositório de software.
Considerando os últimos 30 dias, o Stimulus está em segundo lugar entre os mais apreciados, se comparado com os outros principais frameworks JavaScript.

 

Stars on Github

vuejs / vue …………. 4,363 stars this month ⭐
facebook / react …….. 3,033 stars this month ⭐
stimulusjs / stimulus … 2,515 stars this month ⭐
angular / angular ……. 1,265 stars this month ⭐

Nada mal para um modesto framework JavaScript  \o/


O que vamos criar?

Para saber como integrar o framework Stimulus com Ruby On Rails, vamos manipular uma aplicação bem simples e mostrar o Stimulus e o Rails em funcionamento.

Obs: Se você quiser pré visualizar a aplicação que criaremos nesse tutorial em funcionamento usando o Stimulus (sem o Ruby On Rails) é só acessar aqui (e o repositório aqui).

Ferramentas

Vamos precisar do Yarn neste projeto, para gerenciamento de dependências. Melhor certificarmos que temos ele instalado.
Neste artigo usamos a versão 2.5.0 do Ruby e a versão 5.1.4 do Ruby On Rails.

Yarn (https://yarnpkg.com/)
Ruby (https://www.ruby-lang.org/en/news/2017/12/25/ruby-2-5-0-released/)
Ruby On Rails (https://rubygems.org/gems/rails/versions/5.1.4)

Temos um post explicando em detalhes o Yarn. Se quiser saber o que é e como usá-lo clique aqui.


Passo a Passo da criação do APP StimulusOnRails

01) Para nosso projeto, vamos criar uma pasta e entrar dentro dela.

02) Execute este passo somente se você usa o gerenciador de versões Ruby, RVM:

03) Agora vamos efetivamente criar nossa aplicação Rails

04) Agora vamos instalar o Stimulus usando o Yarn

05) Para nossa aplicação, usaremos a model Person. Para isso vamos usar o scaffold para facilitar e criar a model, controller, views e rotas, automaticamente 😉 :

06) Em seguida vamos rodar a migration para que o banco e a tabela People seja criada. Para quem não sabe o próprio Rails transforma o nome da model para o plural. Se o nome da nossa model é Person então o nome da tabela será People, que é o plural de Person.

07) Muito bem, depois de preparar o ambiente agora vamos adicionar nosso código.

Em app/javascript/packs/application.js apague seu conteúdo, copie e cole o seguinte código JavaScript que carregará o Stimulus e os controllers do Stimulus que criaremos posteriormente.

08) Agora temos que incluir o arquivo application.js dentro das páginas da aplicação Rails.

Em app/views/layouts/application.html.erb, insira a seguinte linha antes da tag </head>

09) Vamos criar o arquivo que é o controller do Stimulus, e dentro dele vamos implementar o mínimo necessário para sabermos se o Stimulus está funcionando junto com o Rails:

Em app/javascript/packs/controllers/people_controller.js

10) Na view que o Rails criou, insira uma linha que faz o “link” entre o HTML e o controller do Stimulus:
app/views/people/_form.html.erb

11) Será que tudo está funcionando mesmo? 😏 …. suba o servidor Rails e chame o endereço abaixo usando seu browser preferido.

Se as coisas estão funcionando, uma tela parecida com a tela a seguir será apresentada:

 

Agora sim, Stimulus e Rails estão prontos para serem usados juntos 🙋

12) Vamos implementar o primeiro comportamento no front-end usando o Stimulus. O nome da pessoa será transformado em maiúsculo quando o usuário sair do campo nome.

O controller Stimulus app/javascript/packs/controllers/people_controller.js ficará assim:

Explicando o código:

  • Veja que nessa linha aproveitamos e fizemos referência a todos os atributos que iremos usar, que são, “name”, “username”, “document” e “favcolor”.
  • Dessa forma o Stimulus permite usarmos a propriedade Target.
  • Por exemplo, para obter o valor de “name” usaremos “this.nameTarget”.

  • Este método get, usa a propriedade Target que explicamos no ponto anterior.
  • Assim, para obter o valor de “name” podemos usar “this.name.value”.
  • Também criamos um método get para “username” e “favcolor”. No nosso caso não precisaremos criar método get para “document”.

  • Este método “toUpper” será responsável por transformar o nome da pessoa para maiúsculo.

 

13) Agora precisamos alterar nosso HTML para que o código em JavaScript feito até o momento, funcione. Vamos lá.
O trecho a seguir, do arquivo app/views/people/_form.html.erb, deve ficar da seguinte forma:

 

Explicando o código:

  • Aqui criamos uma tag “div” com uma propriedade “data-controller”.
  • Com o valor “people” do “data-controller”, informamos ao Stimulus que dentro dessa “div”, haverá propriedades e ações.
  • Então, com data-controller=”people” ligamos essa “div” ao controller “people_controller.js”.

  • Aqui é bem auto explicativo: target diz ao Stimulus que esse elemento HTML “input-text”, será referenciado como “name” dentro do controller “people”.
  • Action, diz que no evento “change” desse “input-text”, o método “toUpper” será acionado. Ou seja, quando o usuário sair do campo, o nome será transformado para maiúsculo.

14) Neste passo verifique se tudo está ok. Pelo menos o recurso de transformar o nome da pessoa para maiúsculo deverá funcionar.

 

12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



Complementando

Os outros métodos do controller “people_controllers.js” estão a seguir. Eles seguem a mesma filosofia do Stimulus, explicada anteriormente.

Da mesma forma, o HTML tem suas marcações acrescentadas para ligar o controller “people_controllers.js”  ao nosso HTML em “app/views/people/_form.html.erb”.

Então basta utilizar o controller e o HTML listados a seguir para ter o resto das funcionalidades.

Arquivo app/javascript/packs/controllers/people_controller.js

Arquivo app/views/people/_form.html.erb

Mostrando o Resultado

Se tudo ficou dentro do esperado, sua aplicação com Stimulus e Ruby On Rails terá o seguinte comportamento:

 

Se você quiser, pode acessar o repositório deste projeto aqui (https://github.com/sergiosouzalima/stimulusonrails).

Conclusão

Neste artigo, integramos uma aplicação simples em Ruby on Rails com o novo framework JavaScript, o Stimulus, recém lançado pelos criadores do Ruby On Rails, desenvolvedores da Basecamp.

Acompanhamos na prática, a criação de uma pequena solução, aplicando ações do usuário no front-end, utilizando os recursos do Stimulus.

Na parte teórica do artigo, ficamos sabendo como integrar propriedades e ações de um controller feito em JavaScript, com uma view HTML do Rails.

Com base no que foi apresentado, é importante adicionarmos que os recursos implementados foram simples para facilitar a didática. O Stimulus permite implementar recursos bem mais avançados juntamente com o Ruby On Rails, como o uso de rotas e interação direta com informações do banco de dados.

Espero que o artigo seja útil em algum momento, e espero 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/

abril 2, 2018

6
Deixe um comentário

avatar
2 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Sergio Limaromenigld Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
romenigld
Visitante
romenigld

Show!!

romenigld
Visitante
romenigld

Acabei de seguir esse tutorial e unica coisa que ficou faltando foi dar o:
rails webpacker:install

Sergio Lima
Visitante
Sergio Lima

Pelo menos na teoria não precisa, já que foi instalado por default na linha abaixo:

$ rails _5.1.4_ new . –webpack

Mas obrigado pelo comentário.

“rails webpacker:install”, pode ser útil em projetos já existentes.

romenigld
Visitante
romenigld

engraçado por que eu usei essa dash –webpack. Deve ter sido porque nunca usei o webpack alguma vez..
Valeu por responder Sergio e parabéns pelo tutorial.
Vocês acham que esse o Stimulus será melhor que o Vue ou outro framework?
E no caso de ter de aprender javascript para utilizar bem esse framework o q indicam(MDN do firefox, algum livro)?

Sergio Lima
Visitante
Sergio Lima

O que pode acontecer é o Stimulus ocupar o lugar onde VueJS, React e Angular estão ocupando. Mas isso seria para aplicações onde essas ferramentas foram subutilizadas, ou seja, VueJS, React, Angular e similares, foram utilizadas de forma parcial, ou mesmo mau utilizadas, por terem muito mais recursos do que foi realmente necessário usar.

Para aplicações novas, se o desenvolvedor ou a equipe já tiver conhecimento dos recursos necessários e conhecerem os limites e propósito do Stimulus, também acho que este novo framework poderá ser usado.

O tempo dirá … 🙂

Sergio Lima
Visitante
Sergio Lima

Sobre aprender JavaScript eu sempre consulto vários sites. Ainda não tenho um site ou livro específico para indicar.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: