2,856 leituras

Buh-Bye Webpack e Node.js, Hello Rails e Import Maps

por John Vester7m2024/08/07

Muito longo; Para ler

Rails 7 introduziu novos recursos que facilitam o uso de Node.js e Webpack. O novo recurso Importar mapas permite que os desenvolvedores importem mapas para seus aplicativos. Isso elimina a necessidade de lidar com complexidades relacionadas ao agrupamento de pacotes e à transpilação do ES6 e do Babel. Este artigo explica como usar o novo recurso Importar Mapas com Ruby on Ruby.

featured image - Buh-Bye Webpack e Node.js, Hello Rails e Import Maps

Gosto de passar tempo aprendendo novas tecnologias. No entanto, muitas vezes a maior desvantagem de trabalhar com novas tecnologias são os inevitáveis problemas que surgem com a adoção precoce. Eu vi isso com bastante frequência quando estava me familiarizando com o Web3 em “ Como fazer a transição do desenvolvedor Full-Stack para o Web3 Pioneer em 2022 ”.

Como engenheiros de software, estamos acostumados a aceitar esses desafios dos primeiros usuários ao testar novas tecnologias. O que funciona melhor para mim é manter uma lista contínua de notas e comandos que executei, já que etapas aparentemente ilógicas não permanecem na minha memória.

Além do Web3, também encontrei esse desafio no espaço JavaScript, com os requisitos semipadrão de uso de Node.js e Webpack. Eu queria identificar uma solução onde eu pudesse usar JavaScript como está, sem me esforçar com Node.js e Webpack. Li recentemente como o lançamento do Rails 7 abordou essa situação . Então, esse é o caso de uso que abordarei neste artigo.

Sobre trilhos

Para ser totalmente transparente, minha experiência com Ruby e Ruby on Rails é pouca ou nenhuma. Lembro-me de ver alguém emitir alguns comandos para criar um serviço totalmente funcional anos atrás e pensei: “Uau, isso parece incrível”. Mas nunca passei muito tempo brincando com essa abordagem para criar serviços e aplicativos.

Tenho quase certeza de que vi essa demonstração no início de 2006 porque o Rails surgiu no final de 2005. Como vi na demonstração, o resultado final foi um serviço que suportava o padrão de design model-view-controller (MVC), um padrão que Eu estava familiarizado com o uso inicial das estruturas Spring, Struts, JSF e Seam.

Rails mantém a promessa de manter as coisas simples enquanto adere às práticas DRY (não se repita). Para ajudar a honrar essa promessa, Ruby usa Gems para engenheiros introduzirem dependências compartilhadas em seus projetos.

Destaques da versão 7

No final de 2021, a sétima versão principal do Rails introduziu alguns recursos interessantes:

Consulta assíncrona – evitando a execução de consultas em série
Camada de banco de dados criptografada – protegendo os dados entre as camadas de serviço e de persistência
Validador de comparação – permite validação de objeto antes da persistência
Importar mapas – não requer mais Node.js e Webpack para bibliotecas JavaScript

Essa última característica foi o que me levou a escrever este artigo.

Como funciona a importação de mapas?

Em alto nível, o gem importmaps-rails permite que os desenvolvedores importem mapas para seus aplicativos. O uso de /bin/importmap permite que os engenheiros atualizem, fixem ou desafixem dependências conforme necessário. Isso é semelhante ao modo como Maven e Gradle funcionam em projetos baseados em Java.

Isso elimina a necessidade de lidar com as complexidades relacionadas ao agrupamento de pacotes e à transpilação do ES6 e do Babel. Adeus Webpack! Adeus Node.js!

Vamos construir algo

Como eu não tocava em Ruby on Rails há quase duas décadas, a primeira coisa que precisei fazer foi seguir este guia para instalar Ruby 3.3 em meu MacBook Pro. Depois de instalado, só precisei instalar o plugin Ruby como parte do meu IDE IntelliJ IDEA.

Então, criei um novo projeto Ruby on Rails no IntelliJ chamado import-map e especifiquei o uso de Importmap para o framework JavaScript:

Com o projeto criado, primeiro queria ver como seria fácil usar uma biblioteca JavaScript local. Então, criei um novo arquivo JavaScript chamado /public/jvc_utilities.js com o seguinte conteúdo:

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

A função padrão simplesmente ecoa alguns comandos no console JavaScript.

A seguir, criei um arquivo HTML ( /public/jvc-utilities.html ) com o seguinte conteúdo:

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

Este exemplo demonstra como um arquivo JavaScript local pode ser usado com um arquivo HTML público — sem qualquer trabalho adicional.

A seguir, criei um novo controlador chamado Example :

 bin/rails generate controller Example index

Eu queria usar a biblioteca Lodash para este exemplo, então usei o seguinte comando para adicionar a biblioteca ao meu projeto import-map :

 bin/importmap pin lodash

Para adicionar algumas funcionalidades baseadas em JavaScript ao controlador, atualizei javascript/controllers/example_controller.js para ficar assim:

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

Essa lógica estabelece uma matriz de três valores e depois duplica os valores. Eu uso o método Lodash map() para fazer isso.

Por fim, atualizei views/example/index.html.erb para conter o seguinte:

 <h3>Example Controller</h3> <div data-controller="example"></div>

Neste ponto, os seguintes URIs estão disponíveis:

/jvc-utilities.html
/example/index

Vamos implantar e validar

Em vez de executar o serviço Rails localmente, pensei em usar o Heroku. Dessa forma, eu poderia ter certeza de que meu serviço estaria acessível para outros consumidores.

Usando minha conta Heroku, segui o guia “ Introdução ao Heroku com Ruby ”. Com base no meu projeto, meu primeiro passo foi adicionar um arquivo chamado Procfile com o seguinte conteúdo:

 web: bundle exec puma -C config/puma.rb

Em seguida, usei o Heroku CLI para criar um novo aplicativo no Heroku:

 heroku login heroku create

Com o comando create , eu tinha o seguinte aplicativo instalado e funcionando:

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

Esta etapa também criou o Git remoto que o ecossistema Heroku usa.

Agora, tudo que eu precisava fazer era enviar minhas atualizações mais recentes para o Heroku e implantar o aplicativo:

 git push heroku main

Com isso, meu código foi enviado para o Heroku, que então compilou e implantou minha aplicação. Em menos de um minuto, vi o seguinte, informando que meu aplicativo estava pronto para uso:

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

Em seguida, naveguei até a página /example/index usando meu URL Heroku (que é exclusivo para meu aplicativo, mas já o removi): https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Isto é o que eu vi:

E quando visualizei o console JavaScript em meu navegador, os seguintes logs apareceram:

Navegando para /jvc-utilities.html , vi as seguintes informações:

Quando visualizei o console JavaScript em meu navegador, vi os seguintes logs:

Sucesso. Consegui usar uma biblioteca JavaScript independente e também a biblioteca pública Lodash JavaScript em meu aplicativo Rails 7 - tudo usando Import Maps e sem precisar lidar com Webpack ou Node.js. Adeus, Webpack e Node.js!

Conclusão

Meus leitores talvez se lembrem da minha declaração de missão pessoal, que acredito poder ser aplicada a qualquer profissional de TI:

“Concentre seu tempo em fornecer recursos/funcionalidades que ampliem o valor de sua propriedade intelectual. Aproveite estruturas, produtos e serviços para todo o resto.” - J. Vester

Neste artigo, mergulhei de cabeça no Rails 7 e usei Import Maps para mostrar como é fácil usar bibliotecas JavaScript sem o esforço extra de precisar usar Webpack e Node.js. Fiquei bastante impressionado com o pouco tempo necessário para atingir meus objetivos, apesar de já terem passado mais de duas décadas desde a última vez que vi Rails em ação.

Do ponto de vista da implantação, o esforço para implantar a aplicação Rails na plataforma Heroku consistiu na criação de um Procfile e três comandos CLI.

Em ambos os casos, Rails e Heroku aderem à minha declaração de missão, permitindo-me permanecer focado em entregar valor aos meus clientes e não ficar atolado em desafios com Webpack, Node.js ou mesmo tarefas DevOps.

Embora eu tenha certeza de que continuaremos a enfrentar pontos problemáticos não tão ideais ao explorar novas tecnologias, também estou confiante de que, com o tempo, veremos realizações semelhantes às demonstradas neste artigo.

Como sempre, meu código-fonte pode ser encontrado no GitLab aqui .

Tenha um ótimo dia!