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 „   “ mit Web3 vertraut machte. So werden Sie 2022 vom Full-Stack-Entwickler zum Web3-Pionier  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   angegangen ist. Das ist also der Anwendungsfall, den ich in diesem Artikel behandeln werde. genau diese Situation  Ü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   Entwicklern, Maps in ihre Anwendungen zu importieren. Die Verwendung von   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. importmaps-rails /bin/importmap  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   folgen, um Ruby 3.3 auf meinem MacBook Pro zu installieren. Nach der Installation musste ich nur noch   . dieser Anleitung das Ruby-Plugin als Teil meiner IntelliJ IDEA IDE installieren  Anschließend habe ich in IntelliJ ein neues Ruby on Rails-Projekt namens „   erstellt und die Verwendung von   für das JavaScript-Framework angegeben:  import-map Importmap 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   mit folgendem Inhalt: /public/jvc_utilities.js   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 (   ) mit folgendem Inhalt erstellt: /public/jvc-utilities.html   <!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   erstellt: Example   bin/rails generate controller Example index  Ich wollte für dieses Beispiel die   verwenden und habe daher den folgenden Befehl verwendet, um die Bibliothek zu meinem   Projekt hinzuzufügen: Lodash-Bibliothek import-map   bin/importmap pin lodash  Um dem Controller einige JavaScript-basierte Funktionen hinzuzufügen, habe ich   aktualisiert, sodass es wie folgt aussieht: javascript/controllers/example_controller.js   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   aktualisiert, sodass es Folgendes enthält: views/example/index.html.erb   <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 „   “ befolgt. Basierend auf meinem Projekt bestand mein erster Schritt darin, eine Datei namens   mit folgendem Inhalt hinzuzufügen: Erste Schritte mit Heroku und Ruby Procfile   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   habe ich die folgende Anwendung zum Laufen gebracht: create   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   navigiert:  /example/index 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   navigierte, sah ich die folgenden Informationen:  /jvc-utilities.html 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   und drei CLI-Befehlen. Procfile  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   auf GitLab. hier  Habt einen richtig schönen Tag!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

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

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps