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://onebitcode.com/free-houston-dating-sites/)

Temos um post explicando em detalhes o Yarn. Se quiser saber o que é e como usá-lo dating girl with commitment issues

Passo a Passo da criação do APP StimulusOnRails

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

$ mkdir stimulusonrails
$ cd stimulusonrails

1 2	$ mkdir stimulusonrails $ cd stimulusonrails

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

$ rvm use ruby-2.5.0@stimulusonrails --ruby-version --create
$ gem install rails -v 5.1.4 --no-ri --no-rdoc

1 2	$ rvm use ruby-2.5.0@stimulusonrails --ruby-version --create $ gem install rails -v 5.1.4 --no-ri --no-rdoc

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

$ rails _5.1.4_ new . --webpack

1	$ rails _5.1.4_ new . --webpack

04) Agora vamos instalar o Stimulus usando o Yarn

$ yarn add stimulus

1	$ yarn add stimulus

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

$ rails generate scaffold person name username document favcolor

1	$ rails generate scaffold person name username document favcolor

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.

$ rails db:migrate

1	$ rails db:migrate

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.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

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

import { Application } from "stimulus"

import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()

const context = require.context("./controllers", true, /\.js$/)

application.load(definitionsFromContext(context))

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>

<%= javascript_pack_tag 'application' %>

1	<%= javascript_pack_tag 'application' %>

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:

$ mkdir -p app/javascript/packs/controllers/
$ touch app/javascript/packs/controllers/people_controller.js

1 2	$ mkdir -p app/javascript/packs/controllers/ $ touch app/javascript/packs/controllers/people_controller.js

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

import { Controller } from 'stimulus'

export default class extends Controller {

 
 connect() {
   console.log("Stimulus is working!")
 }
 
}

import { Controller } from 'stimulus'

export default class extends Controller {

connect() {

console.log("Stimulus is working!")

}

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

...
 ..
 .
 <% end %>

 <div data-controller="people"> <- nova linha

   <div class="field">
     <%= form.label :name %>
     <%= form.text_field :name, id: :person_name %>
   </div>
   ...
   ..
   .
   <div class="actions">
     <%= form.submit %>
   </div>

 </div> <- nova linha

<% end %>

...

<% end %>

<div data-controller="people"> <- nova linha

<%= form.label :name %>

<%= form.text_field :name, id: :person_name %>

</div>

...

<%= form.submit %>

</div>

</div> <- nova linha

<% end %>

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

$ rails server

1	$ rails server

http://0.0.0.0:3000/people/new

1	http://0.0.0.0:3000/people/new

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:

import { Controller } from 'stimulus'

export default class extends Controller {
 static targets = [ "name", "username", "document", "favcolor" ]
 
 connect() {
   console.log("Stimulus is working!")
 }
 
 toUpper() {
   this.name.value = this.name.value.toUpperCase()
 }

 get name() {
   return this.nameTarget
 }

 get username() {
   return this.usernameTarget
 }

 get favcolor() {
   return this.favcolorTarget
 }
   
}

import { Controller } from 'stimulus'

export default class extends Controller {

static targets = [ "name", "username", "document", "favcolor" ]

connect() {

console.log("Stimulus is working!")

}

toUpper() {

this.name.value = this.name.value.toUpperCase()

}

get name() {

return this.nameTarget

}

get username() {

return this.usernameTarget

}

get favcolor() {

return this.favcolorTarget

}

Explicando o código:

static targets = [ "name", "username", "document", "favcolor" ]

1	static targets = [ "name", "username", "document", "favcolor" ]

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

get name() {
   return this.nameTarget
 }

get name() {

return 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”.

toUpper() {
   this.name.value = this.name.value.toUpperCase()
 }

toUpper() {

this.name.value = this.name.value.toUpperCase()

}

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:

...

..

.

<div data-controller="people">
 <div class="field">
   <%= form.label :name %>
   <%= form.text_field :name,
       id: :name,
       data: {target: "people.name",
              action: "change->people#toUpper"}
   %>
 </div>
 ...
 ..
 .
</div>

...

<%= form.label :name %>

<%= form.text_field :name,

id: :name,

data: {target: "people.name",

action: "change->people#toUpper"}

</div>

...

</div>

Explicando o código:

<div data-controller="people">

1	<div data-controller="people">

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

data: {target: "people.name", action: "change->people#toUpper"}

1	data: {target: "people.name", action: "change->people#toUpper"}

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.

Não perca nenhum conteúdo

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

Isso é obrigatório.

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

import { Controller } from 'stimulus'

export default class extends Controller {
 static targets = [ "name", "username", "document", "favcolor" ]

 connect() {
   console.log("Stimulus is working!")
 }

 toUpper() {
   this.name.value = this.name.value.toUpperCase()
 }

 usernameSuggestion(event) {
   event.preventDefault()
   this.username.value = this.toUsername(this.name.value)
 }

 toUsername(name) {
   return name.toLowerCase().replace(/\s+/g,"") +  "00" + this.rand()
 }

 rand() {
   return Math.floor(Math.random() * 10) + 1
 }

 paste(event) {
   event.preventDefault()
   alert("You cannot paste here.")
 }

 color() {
   this.favcolor.style.backgroundColor = this.favcolor.value
 }

 get name() {
   return this.nameTarget
 }

 get username() {
   return this.usernameTarget
 }

 get favcolor() {
   return this.favcolorTarget
 }

}

import { Controller } from 'stimulus'

export default class extends Controller {

static targets = [ "name", "username", "document", "favcolor" ]

connect() {

console.log("Stimulus is working!")

}

toUpper() {

this.name.value = this.name.value.toUpperCase()

}

usernameSuggestion(event) {

event.preventDefault()

this.username.value = this.toUsername(this.name.value)

}

toUsername(name) {

return name.toLowerCase().replace(/\s+/g,"") + "00" + this.rand()

}

rand() {

return Math.floor(Math.random() * 10) + 1

}

paste(event) {

event.preventDefault()

alert("You cannot paste here.")

}

color() {

this.favcolor.style.backgroundColor = this.favcolor.value

}

get name() {

return this.nameTarget

}

get username() {

return this.usernameTarget

}

get favcolor() {

return this.favcolorTarget

}

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

<%= form_with(model: person, local: true) do |form| %>
 <% if person.errors.any? %>
   <div id="error_explanation">
     <h2><%= pluralize(person.errors.count, "error") %> prohibited this person from being saved:</h2>

     <ul>
     <% person.errors.full_messages.each do |message| %>
       <li><%= message %></li>
     <% end %>
     </ul>
   </div>
 <% end %>

 <div data-controller="people">
   <div class="field">
     <%= form.label :name %>
     <%= form.text_field :name,
         id: :person_name,
         data: {target: "people.name",
                action: "change->people#toUpper"}
     %>
   </div>

   <div class="field">
     <%= form.label :username %>
     <%= form.text_field :username,
         id: :person_username,
         data: {target: "people.username"}
     %>

     <button data-action="click->people#usernameSuggestion">

       USERNAME SUGGESTION

     </button>
   </div>

   <div class="field">
     <%= form.label :document %>
     <%= form.text_field :document,
          id: :person_document,
          data: {target: "people.document",
                 action: "paste->people#paste"}
     %>
   </div>

   <div class="field">
     <%= form.label :favcolor %>
     <%= form.text_field :favcolor,
         id: :person_favcolor,
         data: {target: "people.favcolor",
                action: "blur->people#color"}
     %>
   </div>

   <div class="actions">
     <%= form.submit %>
   </div>

 </div>

<% end %>

<%= form_with(model: person, local: true) do |form| %>

<% if person.errors.any? %>

<h2><%= pluralize(person.errors.count, "error") %> prohibited this person from being saved:</h2>

<ul>

<% person.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form.label :name %>

<%= form.text_field :name,

id: :person_name,

data: {target: "people.name",

action: "change->people#toUpper"}

</div>

<%= form.label :username %>

<%= form.text_field :username,

id: :person_username,

data: {target: "people.username"}

<button data-action="click->people#usernameSuggestion">

USERNAME SUGGESTION

</button>

</div>

<%= form.label :document %>

<%= form.text_field :document,

id: :person_document,

data: {target: "people.document",

action: "paste->people#paste"}

</div>

<%= form.label :favcolor %>

<%= form.text_field :favcolor,

id: :person_favcolor,

data: {target: "people.favcolor",

action: "blur->people#color"}

</div>

<%= form.submit %>

</div>

<% end %>

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://onebitcode.com/dating-a-danish-man/).

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!):

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 Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

0 0 votes

Article Rating

janeiro 17, 2020

Posts | Cursos

Sergio Lima

Analista de Desenvolvimento de Sistemas numa empresa de serviços financeiros, trabalha com tecnologias diversas principalmente back-end e entre elas Ruby On Rails. Dedica-se a praticar corridas de rua e artes marciais. Nos fins de semana gosta de ler, assistir filmes, preparar palestras e escrever para blogs ツ

Website : https://github.com/sergiosouzalima

6 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

romenigld

5 anos atrás

Show!!

Responder

romenigld

5 anos atrás

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

Responder

Sergio Lima

5 anos atrás

Reply to romenigld

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.

Responder

romenigld

5 anos atrás

Reply to Sergio Lima

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)?

Responder

Sergio Lima

5 anos atrás

Reply to romenigld

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á … 🙂

Responder

Sergio Lima

5 anos atrás

Reply to romenigld

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

Responder