Tschüß Webpack und Node.js, hallo Rails und Import Maps

Ich verbringe gern Zeit damit, neue Technologien zu lernen. Der größte Nachteil bei der Arbeit mit neuen Technologien sind jedoch oft die unvermeidlichen Probleme, die mit der frühen Einführung einhergehen. Das habe ich ziemlich oft gesehen, als ich mich in „ So werden Sie 2022 vom Full-Stack-Entwickler zum Web3-Pionier “ mit Web3 vertraut machte.

Als Softwareentwickler sind wir es gewohnt, diese Herausforderungen der Early Adopter zu akzeptieren, wenn wir neue Technologien testen. Am besten funktioniert es für mich, eine fortlaufende Liste der Notizen und Befehle zu führen, die ich ausgeführt habe, da scheinbar unlogische Schritte nicht in meinem Gedächtnis haften bleiben.

Abgesehen von Web3 fand ich diese Herausforderung auch im JavaScript-Bereich, mit den halbstandardmäßigen Anforderungen der Verwendung von Node.js und Webpack. Ich wollte eine Lösung finden, bei der ich JavaScript einfach so verwenden konnte, wie es ist, ohne mich mit Node.js und Webpack herumschlagen zu müssen. Ich habe kürzlich gelesen, wie die Rails 7-Version genau diese Situation angegangen ist. Das ist also der Anwendungsfall, den ich in diesem Artikel behandeln werde.

Über Rails

Um ganz ehrlich zu sein, ich habe kaum bis gar keine Erfahrung mit Ruby und Ruby on Rails. Ich erinnere mich, wie ich vor Jahren jemandem dabei zusah, wie er ein paar Befehle ausgab, um einen voll funktionsfähigen Dienst zu erstellen, und dachte: „Wow, das sieht toll aus.“ Aber ich habe nie Zeit damit verbracht, mit diesem Ansatz zum Erstellen von Diensten und Anwendungen herumzuspielen.

Ich bin ziemlich sicher, dass ich diese Demo Anfang 2006 gesehen habe, da Rails erstmals Ende 2005 auf den Markt kam. Wie ich in der Demonstration sah, war das Endergebnis ein Dienst, der das Model-View-Controller-Entwurfsmuster (MVC) unterstützte, ein Muster, mit dem ich durch meine frühe Verwendung der Frameworks Spring, Struts, JSF und Seam vertraut war.

Rails hält das Versprechen, die Dinge unkompliziert zu halten und gleichzeitig DRY-Praktiken (Don't Repeat Yourself) einzuhalten. Um dieses Versprechen einzuhalten, verwendet Ruby Gems, damit Entwickler gemeinsame Abhängigkeiten in ihre Projekte einführen können.

Highlights der Version 7

Ende 2021 führte die siebte Hauptversion von Rails einige spannende Funktionen ein:

• Asynchrone Abfragen – Weg von der seriellen Ausführung von Abfragen
• Verschlüsselte Datenbankebene – Sicherung der Daten zwischen der Service- und Persistenzebene
• Vergleichsvalidator – ermöglicht die Objektvalidierung vor der Persistenz
• Karten importieren – Node.js und Webpack für JavaScript-Bibliotheken nicht mehr erforderlich

Diese letzte Eigenschaft hat mich dazu veranlasst, diesen Artikel zu schreiben.

Wie funktioniert das Importieren von Karten?

Auf einer hohen Ebene ermöglicht das Gem importmaps-rails Entwicklern, Maps in ihre Anwendungen zu importieren. Die Verwendung von /bin/importmap ermöglicht es Ingenieuren, Abhängigkeiten nach Bedarf zu aktualisieren, zu fixieren oder zu lösen. Dies ähnelt der Funktionsweise von Maven und Gradle in Java-basierten Projekten.

Dadurch müssen Sie sich nicht mehr mit den Komplexitäten im Zusammenhang mit der Paketbündelung und der Transpilierung von ES6 und Babel befassen. Auf Wiedersehen, Webpack! Auf Wiedersehen, Node.js!

Lass uns etwas bauen

Da ich Ruby on Rails seit fast zwei Jahrzehnten nicht mehr benutzt hatte, musste ich zunächst dieser Anleitung folgen, um Ruby 3.3 auf meinem MacBook Pro zu installieren. Nach der Installation musste ich nur noch das Ruby-Plugin als Teil meiner IntelliJ IDEA IDE installieren .

Anschließend habe ich in IntelliJ ein neues Ruby on Rails-Projekt namens „ import-map erstellt und die Verwendung von Importmap für das JavaScript-Framework angegeben:

Nachdem das Projekt erstellt war, wollte ich zunächst sehen, wie einfach es wäre, eine lokale JavaScript-Bibliothek zu verwenden. Also erstellte ich eine neue JavaScript-Datei namens /public/jvc_utilities.js mit folgendem Inhalt:

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

Die Standardfunktion gibt einfach einige Befehle an die JavaScript-Konsole zurück.

Als nächstes habe ich eine HTML-Datei ( /public/jvc-utilities.html ) mit folgendem Inhalt erstellt:

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

Dieses Beispiel zeigt, wie eine lokale JavaScript-Datei mit einer öffentlichen HTML-Datei verwendet werden kann – ohne zusätzlichen Aufwand.

Als nächstes habe ich einen neuen Controller namens Example erstellt:

 bin/rails generate controller Example index

Ich wollte für dieses Beispiel die Lodash-Bibliothek verwenden und habe daher den folgenden Befehl verwendet, um die Bibliothek zu meinem import-map Projekt hinzuzufügen:

 bin/importmap pin lodash

Um dem Controller einige JavaScript-basierte Funktionen hinzuzufügen, habe ich javascript/controllers/example_controller.js aktualisiert, sodass es wie folgt aussieht:

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

Diese Logik erstellt ein Array mit drei Werten und verdoppelt dann die Werte. Ich verwende dazu die Lodash-Methode map() .

Schließlich habe ich views/example/index.html.erb aktualisiert, sodass es Folgendes enthält:

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

Derzeit sind die folgenden URIs verfügbar:

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

Lassen Sie uns bereitstellen und validieren

Anstatt den Rails-Dienst lokal auszuführen, dachte ich, ich würde stattdessen Heroku verwenden. Auf diese Weise könnte ich sicherstellen, dass mein Dienst für andere Verbraucher zugänglich ist.

Ich habe mit meinem Heroku-Konto die Anleitung „ Erste Schritte mit Heroku und Ruby “ befolgt. Basierend auf meinem Projekt bestand mein erster Schritt darin, eine Datei namens Procfile mit folgendem Inhalt hinzuzufügen:

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

Als Nächstes habe ich die Heroku CLI verwendet, um eine neue Anwendung in Heroku zu erstellen:

 heroku login heroku create

Mit dem Befehl create habe ich die folgende Anwendung zum Laufen gebracht:

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

Mit diesem Schritt wurde auch das Git-Remote erstellt, das das Heroku-Ökosystem verwendet.

Jetzt musste ich nur noch meine neuesten Updates auf Heroku übertragen und die Anwendung bereitstellen:

 git push heroku main

Damit wurde mein Code an Heroku gesendet, das dann meine Anwendung kompilierte und bereitstellte. In weniger als einer Minute sah ich Folgendes und wusste, dass meine Anwendung einsatzbereit war:

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

Dann bin ich mithilfe meiner Heroku-URL (die für meine Anwendung eindeutig ist, die ich inzwischen aber entfernt habe) zur Seite /example/index navigiert: https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Das habe ich gesehen:

Und als ich die JavaScript-Konsole in meinem Browser anzeigte, erschienen die folgenden Protokolle:

Als ich zu /jvc-utilities.html navigierte, sah ich die folgenden Informationen:

Als ich die JavaScript-Konsole in meinem Browser angezeigt habe, habe ich die folgenden Protokolle gesehen:

Erfolg. Ich konnte eine eigenständige JavaScript-Bibliothek und auch die öffentliche Lodash JavaScript-Bibliothek in meiner Rails 7-Anwendung verwenden – alles mithilfe von Import Maps und ohne mich mit Webpack oder Node.js befassen zu müssen. Tschüß, Webpack und Node.js!

Abschluss

Meine Leser erinnern sich vielleicht an mein persönliches Leitbild, das meiner Meinung nach auf jeden IT-Experten zutrifft:

„Konzentrieren Sie sich auf die Bereitstellung von Features/Funktionalitäten, die den Wert Ihres geistigen Eigentums steigern. Nutzen Sie Frameworks, Produkte und Services für alles andere.“ – J. Vester

In diesem Artikel habe ich mich kopfüber in Rails 7 gestürzt und mithilfe von Import Maps gezeigt, wie einfach Sie JavaScript-Bibliotheken verwenden können, ohne den zusätzlichen Aufwand von Webpack und Node.js. Ich war ziemlich beeindruckt von der geringen Zeit, die ich brauchte, um meine Ziele zu erreichen, obwohl es über zwei Jahrzehnte her war, seit ich Rails das letzte Mal in Aktion gesehen hatte.

Aus Bereitstellungsperspektive bestand der Aufwand zum Bereitstellen der Rails-Anwendung auf der Heroku-Plattform aus der Erstellung einer Procfile und drei CLI-Befehlen.

In beiden Fällen entsprechen Rails und Heroku meinem Leitbild, indem sie es mir ermöglichen, mich voll und ganz auf die Wertschöpfung für meine Kunden zu konzentrieren und nicht durch Herausforderungen mit Webpack, Node.js oder sogar DevOps-Aufgaben aufgehalten zu werden.

Ich bin zwar sicher, dass wir bei der Erforschung neuer Technologien auch weiterhin auf weniger ideale Probleme stoßen werden, bin jedoch auch zuversichtlich, dass wir mit der Zeit ähnliche Erfolge erzielen werden, wie ich sie in diesem Artikel aufgezeigt habe.

Wie immer finden Sie meinen Quellcode hier auf GitLab.

Habt einen richtig schönen Tag!