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

J'aime passer du temps à apprendre de nouvelles technologies. Cependant, le plus gros inconvénient du travail avec les nouvelles technologies réside souvent dans les inévitables problèmes liés à une adoption précoce. J'ai souvent vu cela lorsque je me familiarisais avec Web3 dans «  Comment passer d'un développeur Full-Stack à un pionnier du Web3 en 2022 ».

En tant qu'ingénieurs logiciels, nous sommes habitués à relever les défis des premiers utilisateurs lorsque nous testons une nouvelle technologie. Ce qui fonctionne le mieux pour moi, c'est de conserver une liste courante des notes et des commandes que j'ai exécutées, car les étapes apparemment illogiques ne restent pas dans ma mémoire.

Outre le Web3, j'ai également trouvé ce défi dans l'espace JavaScript, avec les exigences semi-standard liées à l'utilisation de Node.js et Webpack. Je voulais identifier une solution où je pourrais simplement utiliser JavaScript tel quel sans m'embêter avec Node.js et Webpack. J'ai récemment lu comment la version Rails 7 résolvait cette situation . C'est donc le cas d'utilisation que je vais aborder dans cet article.

À propos de Rails

Pour être totalement transparent, mon expérience avec Ruby et Ruby on Rails est minime, voire nulle. Je me souviens avoir vu quelqu'un émettre des commandes pour créer un service entièrement fonctionnel il y a des années, et je me suis dit : « Wow, ça a l'air génial. » Mais je n’ai jamais passé de temps à jouer avec cette approche de création de services et d’applications.

Je suis presque sûr d'avoir vu cette démo début 2006, car Rails est apparu pour la première fois fin 2005. Comme je l'ai vu dans la démonstration, le résultat final était un service prenant en charge le modèle de conception modèle-vue-contrôleur (MVC), un modèle qui Je connaissais grâce à mes premières utilisations des frameworks Spring, Struts, JSF et Seam.

Rails tient la promesse de garder les choses simples tout en adhérant aux pratiques DRY (ne vous répétez pas). Pour aider à honorer cette promesse, Ruby utilise Gems pour les ingénieurs afin d'introduire des dépendances partagées dans leurs projets.

Points forts de la version 7

Fin 2021, la septième version majeure de Rails a introduit des fonctionnalités intéressantes :

• Requêtes asynchrones : éviter d'exécuter des requêtes en série
• Couche de base de données cryptée – sécurisation des données entre les couches de service et de persistance
• Validateur de comparaison – permet la validation des objets avant la persistance
• Importer des cartes – ne nécessite plus les bibliothèques Node.js et Webpack pour JavaScript

C’est cette dernière fonctionnalité qui m’a poussé à écrire cet article.

Comment fonctionne l'importation de cartes ?

À un niveau élevé, la gemme importmaps-rails permet aux développeurs d'importer des cartes dans leurs applications. L'utilisation de /bin/importmap permet aux ingénieurs de mettre à jour, d'épingler ou de désépingler les dépendances selon les besoins. Ceci est similaire à la façon dont Maven et Gradle fonctionnent dans les projets basés sur Java.

Cela évite d’avoir à gérer les complexités liées au regroupement de packages et à la transpilation d’ES6 et Babel. Au revoir Webpack ! Adieu Node.js !

Construisons quelque chose

Comme je n'avais même pas touché à Ruby on Rails depuis près de deux décennies, la première chose que je devais faire était de suivre ce guide pour installer Ruby 3.3 sur mon MacBook Pro. Une fois installé, il me suffisait d' installer le plugin Ruby dans le cadre de mon IDE IntelliJ IDEA.

Ensuite, j'ai créé un nouveau projet Ruby on Rails dans IntelliJ appelé import-map et spécifié l'utilisation de Importmap pour le framework JavaScript :

Une fois le projet créé, je voulais d'abord voir à quel point il serait facile d'utiliser une bibliothèque JavaScript locale. J'ai donc créé un nouveau fichier JavaScript appelé /public/jvc_utilities.js avec le contenu suivant :

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

La fonction par défaut renvoie simplement certaines commandes à la console JavaScript.

Ensuite, j'ai créé un fichier HTML ( /public/jvc-utilities.html ) avec le contenu suivant :

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

Cet exemple montre comment un fichier JavaScript local peut être utilisé avec un fichier HTML public, sans aucun travail supplémentaire.

Ensuite, j'ai créé un nouveau contrôleur appelé Example :

 bin/rails generate controller Example index

Je voulais utiliser la bibliothèque Lodash pour cet exemple, j'ai donc utilisé la commande suivante pour ajouter la bibliothèque à mon projet import-map :

 bin/importmap pin lodash

Pour ajouter des fonctionnalités basées sur JavaScript au contrôleur, j'ai mis à jour javascript/controllers/example_controller.js pour ressembler à ceci :

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

Cette logique établit un tableau de trois valeurs, puis double les valeurs. J'utilise la méthode Lodash map() pour ce faire.

Enfin, j'ai mis à jour views/example/index.html.erb pour contenir les éléments suivants :

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

À ce stade, les URI suivants sont désormais disponibles :

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

Déployons et validons

Plutôt que d'exécuter le service Rails localement, j'ai pensé utiliser Heroku à la place. De cette façon, je pourrais m'assurer que mon service pourrait être accessible à d'autres consommateurs.

En utilisant mon compte Heroku, j'ai suivi le guide « Démarrer sur Heroku avec Ruby ». Sur la base de mon projet, ma première étape a été d'ajouter un fichier nommé Procfile avec le contenu suivant :

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

Ensuite, j'ai utilisé la CLI Heroku pour créer une nouvelle application dans Heroku :

 heroku login heroku create

Avec la commande create , j'avais l'application suivante opérationnelle :

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

Cette étape a également créé la télécommande Git utilisée par l'écosystème Heroku.

Il ne me restait plus qu'à envoyer mes dernières mises à jour vers Heroku et à déployer l'application :

 git push heroku main

Avec cela, mon code a été transmis à Heroku, qui a ensuite compilé et déployé mon application. En moins d'une minute, j'ai vu ce qui suit, m'indiquant que mon application était prête à être utilisée :

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

Ensuite, j'ai accédé à la page /example/index en utilisant mon URL Heroku (qui est unique à mon application, mais je l'ai depuis supprimée) : https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Voilà ce que j'ai vu :

Et lorsque j'ai consulté la console JavaScript dans mon navigateur, les journaux suivants sont apparus :

En accédant à /jvc-utilities.html , j'ai vu les informations suivantes :

Lorsque j'ai consulté la console JavaScript dans mon navigateur, j'ai vu les journaux suivants :

Succès. J'ai pu utiliser une bibliothèque JavaScript autonome ainsi que la bibliothèque JavaScript publique Lodash dans mon application Rails 7, le tout en utilisant Import Maps et sans avoir à gérer Webpack ou Node.js. Au revoir, Webpack et Node.js !

Conclusion

Mes lecteurs se souviendront peut-être de mon énoncé de mission personnel, qui, à mon avis, peut s'appliquer à tout professionnel de l'informatique :

« Concentrez votre temps sur la fourniture de caractéristiques/fonctionnalités qui augmentent la valeur de votre propriété intellectuelle. Tirez parti des frameworks, des produits et des services pour tout le reste. —J.Vester

Dans cet article, j'ai plongé tête première dans Rails 7 et utilisé Import Maps pour montrer avec quelle facilité vous pouvez utiliser les bibliothèques JavaScript sans l'effort supplémentaire lié à l'utilisation de Webpack et Node.js. J'ai été assez impressionné par le peu de temps nécessaire pour atteindre mes objectifs, même si cela faisait plus de deux décennies que je n'avais pas vu Rails en action pour la dernière fois.

Du point de vue du déploiement, l'effort de déploiement de l'application Rails sur la plateforme Heroku a consisté en la création d'un Procfile et de trois commandes CLI.

Dans les deux cas, Rails et Heroku adhèrent à mon énoncé de mission en me permettant de rester concentré sur la fourniture de valeur à mes clients et de ne pas m'enliser dans les défis liés aux tâches Webpack, Node.js ou même DevOps.

Même si je suis certain que nous continuerons à être confrontés à des problèmes pas si idéaux lors de l'exploration de nouvelles technologies, je suis également convaincu qu'avec le temps, nous verrons des réalisations similaires à celles que j'ai démontrées dans cet article.

Comme toujours, mon code source peut être trouvé sur GitLab ici .

Passez une très bonne journée !