JavaScript é essencial para adicionar interatividade ao seu aplicativo da web. Claro, tornou-se muito mais do que isso agora. É uma linguagem de programação que os navegadores da web executam. Muitos sites que você visitou usam algum código JavaScript em seu front-end.

Você pode ter começado a usar o Ruby on Rails para criar seu aplicativo da Web e se perguntou como adicionar JavaScript ao seu código. Quero ajudá-lo neste artigo sobre como adicionar seu código JavaScript ao seu aplicativo rails.

Porquê JavaScript?

Você pode se perguntar por que ainda precisa de JavaScript no seu aplicativo da web. Você pode estar certo de se perguntar, mas se você não o incluir, a experiência do usuário do seu aplicativo da web não será boa. Ou, simplesmente, seu aplicativo da Web será muito mais interessante se você adicionar JavaScript.

Digamos que você tenha um formulário preenchido por um usuário e deseje validar o formulário. Se o usuário enviar o formulário sem preencher os valores adequados, a página do formulário deverá ser recarregada novamente, atingindo o servidor e chegando ao usuário. Isso leva muito tempo, o que provavelmente incomodará o usuário.

É claro que você geralmente pode se safar da validação de formulário HTML, mas isso nem sempre é possível. Mas adicionar um script simples que verifique as entradas do usuário e notifique-os de que eles devem inserir as informações corretas é muito melhor. (Obviamente, isso não significa que você deve remover a validação do lado do servidor.)

Outro caso de uso pode estar carregando arquivos de forma assíncrona. Você pode obter arquivos de forma assíncrona em JavaScript sem recarregar a página inteira. Você pode ter usado alguns aplicativos da Web que carregam mais conforme você rola para baixo sem precisar atualizar a página repetidamente.

Esses e outros casos de uso são ótimos motivos para usar JavaScript em seu aplicativo. De fato, a demanda por JavaScript tem aumentado. Você pode até usá-lo no seu back-end - mas nós amamos o Rails. Então, vamos continuar com isso por um tempo.

O que abordaremos aqui

A versão 6 do Rails foi lançada. É a versão mais recente do framework. E o Rails 6 trouxe algumas mudanças na maneira como você interage com o JavaScript.

Antes do Rails 6, tínhamos o pipeline de ativos para gerenciar CSS e JavaScript. Mas a partir do Rails 6, o Webpacker é o compilador padrão para JavaScript. O CSS ainda é gerenciado pelo pipeline de ativos, mas você também pode usar o webpack para compilar o CSS.

Neste artigo, veremos como adicionar JavaScript ao seu aplicativo Rails. Você não encontrará sua pasta JavaScript no mesmo local que no Rails 5. A estrutura de diretórios para JavaScript agora foi alterada para o diretório app / javascript / packs / pasta.

Nessa pasta você encontrará o application.js arquivo que é como o application.css Arquivo. Ele será importado por padrão no application.html.erb quando cria seu novo aplicativo Rails. E a application.html.erb será usado por todas as visualizações.

Adicionando um script que será usado por todas as visualizações

Se você deseja que seu JavaScript esteja disponível em todas as visualizações ou páginas, basta colocá-lo no application.js Arquivo. Ele estará disponível em qualquer lugar.

require("@rails/ujs").start()require("turbolinks").start()require("@rails/activestorage").start()require("channels")console.log('Hello from application.js')
app / javascript / packs / application.js

As quatro primeiras linhas estão lá por padrão. Adicionei um console.log para mostrar que o JavaScript estará disponível em qualquer lugar. Você pode tentar isso inspecionando qualquer página e acessando a seção console no seu navegador. Você nem sempre pode querer isso. Caso contrário, você poderá disponibilizar o script apenas ao visitar uma única página.

Adicionando um script que será usado por um arquivo específico

Se você deseja que seu JavaScript esteja disponível apenas para uma visualização específica, poderá usar o javascript_pack_tag para importar esse arquivo específico.

I want my JS here only
<%= javascript_pack_tag 'my_js' %>
app / views / posts / index.html.erb

console.log('Hello from My JS')
app / javascript / packs / my_js.js

Lembre-se de que você precisa adicionar o arquivo no diretório de pacotes. O javascript_pack_tag também deve se referir ao nome do arquivo javascript que você criou. Agora, o script será executado apenas quando a exibição específica que inclui o javascript_pack_tag for carregada no navegador.

Empacotando

Espero que este artigo ajude a esclarecer qualquer confusão que você possa ter ao atualizar seu aplicativo para o novo Rails 6. Também será útil se você tiver iniciado o Rails. Você pode me seguir Github se você quiser aprender mais.