So fügen Sie Ihrer Rails 6-App JavaScript hinzu

Als Junior Full-Stack-Entwickler lag mein Hauptaugenmerk auf dem Backend. Ich wollte lernen, wie ich meinen Backend-Server für meine Webanwendung programmiere.

Nachdem ich die Grundlagen des Backends gelernt hatte, stellte ich fest, dass das Frontend genauso wichtig ist wie das Backend. Eine Möglichkeit, die Lebendigkeit Ihrer Webanwendung zu erhöhen, ist das Hinzufügen von JavaScript.

JavaScript ist wichtig, um Ihrer Webanwendung Interaktivität hinzuzufügen. Natürlich ist es jetzt weit mehr als das geworden. Es ist eine Programmiersprache, die von Webbrowsern ausgeführt wird. Viele Websites, die Sie besucht haben, verwenden JavaScript-Code in ihrem Frontend.

Möglicherweise haben Sie Ruby on Rails zum Erstellen Ihrer Webanwendung verwendet und sich gefragt, wie Sie Ihrem Code JavaScript hinzufügen können. In diesem Artikel werde ich Ihnen zeigen, wie Sie Ihrer Rails-App JavaScript-Code hinzufügen.

Warum JavaScript?

Sie fragen sich vielleicht, warum Sie überhaupt JavaScript in Ihrer Webanwendung benötigen. Kurz gesagt, wenn Sie kein JS einschließen, ist die Benutzererfahrung Ihrer Webanwendung nicht gut.

Angenommen, Sie haben ein Formular, das ein Benutzer ausfüllt, und Sie möchten eine Formularüberprüfung durchführen. Wenn der Benutzer das Formular sendet, ohne die richtigen Werte einzugeben, muss die Seite für das Formular erneut geladen werden, den Server erreichen und für den Benutzer erneut angezeigt werden. Das nimmt viel Zeit in Anspruch und wird den Benutzer wahrscheinlich nerven.

Natürlich kann man manchmal mit der Validierung von HTML-Formularen durchkommen, aber das ist nicht immer möglich. Das Hinzufügen eines einfachen Skripts, das die Benutzereingaben überprüft und sie darüber informiert, dass sie die richtigen Informationen eingeben sollen, ist viel besser.

Dies bedeutet natürlich nicht, dass Sie die serverseitige Validierung ignorieren können, aber das ist für einen anderen Artikel.

Ein weiterer Anwendungsfall ist das asynchrone Laden von Dateien, was Sie in JavaScript tun können, ohne die gesamte Seite neu zu laden. Möglicherweise haben Sie einige Web-Apps verwendet, die beim Scrollen nach unten mehr Bilder und Artikel laden, ohne die Seite immer wieder aktualisieren oder ändern zu müssen.

Diese und andere Anwendungsfälle sind gute Gründe, JavaScript in Ihrer Anwendung zu verwenden. Tatsächlich hat die Nachfrage nach JavaScript zugenommen. Sie können es sogar verwenden, um Ihr Backend zu schreiben.

Aber wir lieben Rails, also werden wir eine Weile dabei bleiben.

Was wir hier behandeln werden

Zum Zeitpunkt des Schreibens ist die neueste Version des Frameworks Rails 6, und es wurden einige Änderungen an der Art und Weise vorgenommen, wie Sie mit JavaScript interagieren.

Vor Rails 6 hatten wir die Asset-Pipeline zum Verwalten von CSS- und JavaScript-Dateien. Ab Rails 6 ist Webpacker der Standard-Compiler für JavaScript. CSS wird weiterhin von der Asset-Pipeline verwaltet. Sie können jedoch auch Webpack zum Kompilieren von CSS verwenden.

Sie finden Ihren JavaScript-Ordner nicht an derselben Stelle wie in Rails 5. Die Verzeichnisstruktur für JavaScript wurde in den Ordner app / javascript / packs / geändert .

In diesem Ordner finden Sie die Datei application.js , die genau der Datei application.css entspricht . Es wird standardmäßig in die Datei application.html.erb importiert, wenn Sie Ihre neue Rails-App erstellen.

Die Datei application.html.erb wird von allen Ansichten verwendet.

Hinzufügen eines Skripts, das von allen Ansichten verwendet wird

Wenn Sie möchten, dass Ihr JavaScript in allen Ansichten oder Seiten verfügbar ist, können Sie es einfach in die Datei application.js einfügen:

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") console.log('Hello from application.js')

Die ersten vier Zeilen sind standardmäßig vorhanden. Ich habe eine console.logErklärung hinzugefügt , um Ihnen zu zeigen, dass das JavaScript überall verfügbar sein wird.

Sie können dies testen, indem Sie eine beliebige Seite in Ihrer Anwendung anzeigen und die Entwicklerkonsole öffnen.

Möglicherweise möchten Sie jedoch nicht immer, dass Ihr JavaScript-Code auf jeder Seite geladen wird. Stattdessen können Sie das Skript nur beim Besuch einer bestimmten Seite verfügbar machen.

Hinzufügen eines Skripts, das von einer bestimmten Datei verwendet wird

Wenn Sie möchten, dass Ihr JavaScript nur für eine bestimmte Ansicht verfügbar ist, können Sie diese bestimmte Datei mit javascript_pack_tag importieren:

I want my JS here only

console.log('Hello from My JS')

Denken Sie daran, dass Sie die Datei im Paketverzeichnis hinzufügen müssen . Das javascript_pack_tag sollte sich auch auf den Namen der von Ihnen erstellten JavaScript-Datei beziehen.

Jetzt wird das Skript nur ausgeführt, wenn die spezifische Ansicht, die den javascript_pack_tag enthält , in den Browser geladen ist.

Einpacken

Ich hoffe, dieser Artikel hilft Ihnen dabei, Verwirrung zu beseitigen, wenn Sie Ihre App auf Rails 6 aktualisieren oder wenn Sie gerade erst mit Rails begonnen haben.

Sie können mir auf Github folgen, wenn Sie mehr erfahren möchten.