Buh-Bye Webpack y Node.js, Hello Rails e Importar mapas

Disfruto pasar tiempo aprendiendo nuevas tecnologías. Sin embargo, a menudo el mayor inconveniente de trabajar con nuevas tecnologías son los inevitables puntos débiles que conlleva la adopción temprana. Vi esto bastante cuando me estaba poniendo al día con Web3 en " Cómo hacer la transición de desarrollador Full-Stack a Web3 Pioneer en 2022 ".

Como ingenieros de software, estamos acostumbrados a aceptar estos desafíos de los primeros usuarios cuando probamos una nueva tecnología. Lo que funciona mejor para mí es mantener una lista actualizada de notas y comandos que he ejecutado, ya que los pasos aparentemente ilógicos no permanecen en mi memoria.

Además de Web3, también encontré este desafío en el espacio JavaScript, con los requisitos semiestándar de usar Node.js y Webpack. Quería identificar una solución en la que pudiera usar JavaScript tal cual sin tener que trabajar duro con Node.js y Webpack. Recientemente leí cómo la versión Rails 7 abordó esta misma situación . Ese es el caso de uso que cubriré en este artículo.

Acerca de los rieles

Para ser completamente transparente, mi experiencia con Ruby y Ruby on Rails es poca o ninguna. Recuerdo haber visto a alguien emitir algunos comandos para crear un servicio completamente funcional hace años y pensé: "Vaya, eso se ve increíble". Pero nunca he pasado tiempo jugando con este enfoque para crear servicios y aplicaciones.

Estoy bastante seguro de que vi esa demostración a principios de 2006 porque Rails surgió por primera vez a finales de 2005. Como vi en la demostración, el resultado final fue un servicio que admitía el patrón de diseño modelo-vista-controlador (MVC), un patrón que Estaba familiarizado con mi uso inicial de los marcos Spring, Struts, JSF y Seam.

Rails mantiene la promesa de mantener las cosas sencillas y al mismo tiempo seguir las prácticas DRY (no repetirse). Para ayudar a cumplir esta promesa, Ruby utiliza Gems para que los ingenieros introduzcan dependencias compartidas en sus proyectos.

Aspectos destacados de la versión 7

A finales de 2021, la séptima versión principal de Rails introdujo algunas características interesantes:

• Consultas asincrónicas: evitar ejecutar consultas en serie
• Capa de base de datos cifrada: protección de datos entre las capas de servicio y persistencia
• Validador de comparación: permite la validación de objetos antes de la persistencia
• Importar mapas: ya no se requieren Node.js y Webpack para bibliotecas de JavaScript

Esa última característica es la que me impulsó a escribir este artículo.

¿Cómo funciona la importación de mapas?

En un nivel alto, la gema importmaps-rails permite a los desarrolladores importar mapas a sus aplicaciones. El uso de /bin/importmap permite a los ingenieros actualizar, anclar o desanclar dependencias según sea necesario. Esto es similar a cómo funcionan Maven y Gradle en proyectos basados en Java.

Esto elimina la necesidad de lidiar con las complejidades relacionadas con la agrupación de paquetes y la transpilación de ES6 y Babel. ¡Adiós Webpack! ¡Adiós Node.js!

construyamos algo

Como ni siquiera había tocado Ruby on Rails en casi dos décadas, lo primero que tenía que hacer era seguir esta guía para instalar Ruby 3.3 en mi MacBook Pro. Una vez instalado, solo necesitaba instalar el complemento Ruby como parte de mi IDE IntelliJ IDEA.

Luego, creé un nuevo proyecto Ruby on Rails en IntelliJ llamado import-map y especifiqué el uso de Importmap para el marco de JavaScript:

Una vez creado el proyecto, lo primero que quería ver era lo fácil que sería utilizar una biblioteca JavaScript local. Entonces, creé un nuevo archivo JavaScript llamado /public/jvc_utilities.js con el siguiente contenido:

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

La función predeterminada simplemente repite algunos comandos en la consola de JavaScript.

A continuación, creé un archivo HTML ( /public/jvc-utilities.html ) con el siguiente contenido:

 <!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 ejemplo demuestra cómo se puede utilizar un archivo JavaScript local con un archivo HTML público, sin ningún trabajo adicional.

A continuación, creé un nuevo controlador llamado Example :

 bin/rails generate controller Example index

Quería usar la biblioteca Lodash para este ejemplo, así que usé el siguiente comando para agregar la biblioteca a mi proyecto import-map :

 bin/importmap pin lodash

Para agregar alguna funcionalidad basada en JavaScript al controlador, actualicé javascript/controllers/example_controller.js para que se vea así:

 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(', ')}` } }

Esta lógica establece una matriz de tres valores y luego duplica los valores. Utilizo el método Lodash map() para hacer esto.

Finalmente, actualicé views/example/index.html.erb para que contenga lo siguiente:

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

En este punto, los siguientes URI ya están disponibles:

• /jvc-utilities.html
• /example/index

Implementemos y validemos

En lugar de ejecutar el servicio Rails localmente, pensé en usar Heroku. De esta manera, podría asegurarme de que mi servicio fuera accesible para otros consumidores.

Usando mi cuenta de Heroku, seguí la guía " Introducción a Heroku con Ruby ". Según mi proyecto, mi primer paso fue agregar un archivo llamado Procfile con el siguiente contenido:

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

A continuación, utilicé la CLI de Heroku para crear una nueva aplicación en Heroku:

 heroku login heroku create

Con el comando create , tenía la siguiente aplicación en funcionamiento:

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

Este paso también creó el control remoto Git que utiliza el ecosistema Heroku.

Ahora, todo lo que necesitaba hacer era enviar mis últimas actualizaciones a Heroku e implementar la aplicación:

 git push heroku main

Con eso, mi código fue enviado a Heroku, que luego compiló e implementó mi aplicación. En menos de un minuto, vi lo siguiente, haciéndome saber que mi aplicación estaba lista para usar:

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

Luego, navegué a la página /example/index usando mi URL de Heroku (que es exclusiva de mi aplicación, pero desde entonces la eliminé): https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Esto es lo que vi:

Y cuando vi la consola JavaScript en mi navegador, aparecieron los siguientes registros:

Al navegar a /jvc-utilities.html , vi la siguiente información:

Cuando vi la consola JavaScript en mi navegador, vi los siguientes registros:

Éxito. Pude usar una biblioteca JavaScript independiente y también la biblioteca pública Lodash JavaScript en mi aplicación Rails 7, todo usando Import Maps y sin necesidad de lidiar con Webpack o Node.js. ¡Adiós, Webpack y Node.js!

Conclusión

Mis lectores tal vez recuerden mi declaración de misión personal, que creo que puede aplicarse a cualquier profesional de TI:

“Concentre su tiempo en ofrecer características/funcionalidades que amplíen el valor de su propiedad intelectual. Aproveche los marcos, productos y servicios para todo lo demás”. —J. Vester

En este artículo, me sumergí de cabeza en Rails 7 y utilicé Import Maps para mostrar con qué facilidad se pueden usar bibliotecas de JavaScript sin el esfuerzo adicional de tener que usar Webpack y Node.js. Me impresionó bastante la pequeña cantidad de tiempo que se requirió para lograr mis objetivos a pesar de que habían pasado más de dos décadas desde la última vez que vi Rails en acción.

Desde una perspectiva de implementación, el esfuerzo para implementar la aplicación Rails en la plataforma Heroku consistió en la creación de un Procfile y tres comandos CLI.

En ambos casos, Rails y Heroku se adhieren a mi declaración de misión al permitirme permanecer enfocado en brindar valor a mis clientes y no empantanarme con los desafíos con las tareas de Webpack, Node.js o incluso DevOps.

Si bien estoy seguro de que seguiremos enfrentándonos a puntos débiles no tan ideales al explorar nuevas tecnologías, también confío en que, con el tiempo, veremos logros similares a los que demostré en este artículo.

Como siempre, mi código fuente se puede encontrar en GitLab aquí .

¡Que tengas un gran día!