Junior Full-Stack fejlesztőként a fő hangsúlyom a háttér volt. Meg akartam tanulni, hogyan kell a háttérszerveremet programozni a webalkalmazásom kiszolgálására.

De miután megtanultam a backend alapjait, megtudtam, hogy a frontend ugyanolyan fontos, mint a backend. A webalkalmazás elevenségének növelésének egyik módja a JavaScript hozzáadása.

A JavaScript elengedhetetlen az interaktivitás hozzáadásához a webalkalmazáshoz. Természetesen ennél jóval több lett. Ez egy programozási nyelv, amelyet a böngészők futtatnak. Sok meglátogatott webhely használ valamilyen JavaScript-kódot a kezelőfelületén.

Lehet, hogy elkezdte használni a Ruby on Rails alkalmazást webes alkalmazásának elkészítéséhez, és azon gondolkodott, hogyan lehet JavaScriptet hozzáadni a kódjához. Ebben a cikkben megmutatom, hogyan lehet JavaScript-kódot hozzáadni a Rails alkalmazáshoz.

Miért a JavaScript?

Elképzelhető, hogy miért is van szüksége JavaScriptre a webalkalmazásában? Röviden, ha nem tartalmaz JS-t, akkor a webalkalmazás felhasználói élménye nem lesz jó.

Tegyük fel, hogy van egy űrlapja, amelyet a felhasználó kitölt, és meg akarja ellenőrizni az űrlapot. Ha a felhasználó anélkül nyújtja be az űrlapot, hogy kitöltené a megfelelő értékeket, akkor az űrlap oldalát újra be kell töltenie, el kell ütnie a szervert, és újra fel kell jönnie a felhasználó számára. Ez sok időt vesz igénybe, és valószínűleg bosszantani fogja a felhasználót.

Természetesen néha megúszhatja a HTML-űrlap-ellenőrzést, de ez nem mindig lehetséges. Sokkal jobb egy egyszerű szkript hozzáadása, amely ellenőrzi a felhasználói inputokat, és értesíti őket arról, hogy a helyes információkat kell megadniuk.

Természetesen ez nem azt jelenti, hogy figyelmen kívül hagyhatja a szerveroldali érvényesítést, de ez egy másik cikkre vonatkozik.

Egy másik felhasználási eset a fájlok aszinkron betöltése, amelyet JavaScriptben is megtehet, az egész oldal újratöltése nélkül. Lehet, hogy használt néhány webalkalmazást, amely több képet és cikket tölt be, miközben lefelé görget anélkül, hogy újra és újra frissítenie vagy módosítania kellene az oldalt.

Ezek és más felhasználási esetek nagyszerű okok arra, hogy alkalmazzák a JavaScript-et. Valójában egyre nagyobb a kereslet a JavaScript iránt. Akár a backend megírásához is felhasználhatja.

De szeretjük a Rails-et, ezért egy ideig ragaszkodunk hozzá.

Amivel itt foglalkozunk

Az írás idején a keretrendszer legújabb verziója a Rails 6, és néhány változást hozott a JavaScript-kel való együttműködés módjában.

A Rails 6 előtt volt egy eszközcsatornánk a CSS és a JavaScript fájlok kezelésére. De a Rails 6-tól kezdve a Webpacker az alapértelmezett fordító a JavaScript számára. A CSS-t továbbra is az eszközpálya kezeli, de a WebSpak segítségével is összeállíthatja a CSS-t.

A JavaScript mappát nem ugyanazon a helyen találja, mint az Rails 5-ben. A JavaScript könyvtárstruktúrája az app / javascript / packs / folder könyvtárra változott .

Ebben a mappában megtalálja az application.js fájlt, amely ugyanolyan, mint az application.css fájl. Alapértelmezés szerint az alkalmazás.html.erb fájlba importálja, amikor létrehozza az új Rails alkalmazást.

Az application.html.erb fájlt minden nézet használni fogja.

Az összes nézet által használt szkript hozzáadása

Ha azt szeretné, hogy a JavaScript minden nézetben vagy oldalon elérhető legyen, akkor egyszerűen tegye be az application.js fájlba:

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

Az első négy sor alapértelmezés szerint ott van. Hozzátettem egy console.lognyilatkozatot, amely megmutatja, hogy a JavaScript mindenhol elérhető lesz.

Kipróbálhatja ezt az alkalmazás bármely oldalának megtekintésével és a fejlesztői konzol megnyitásával.

De nem feltétlenül szeretné, ha JavaScript-kódját minden oldalra feltöltenék. Ehelyett a szkriptet csak egy adott oldal felkeresésekor teheti elérhetővé.

Szkript hozzáadása, amelyet egy adott fájl fog használni

Ha azt szeretné, hogy a JavaScript csak egy adott nézethez legyen elérhető, akkor a javascript_pack_tag segítségével importálhatja azt a fájlt:

I want my JS here only

console.log('Hello from My JS')

Ne felejtse el, hogy hozzá kell adnia a fájlt a pack könyvtárba. A javascript_pack_tag- nak utalnia kell a létrehozott JavaScript-fájl nevére is.

Most a szkript csak akkor fog futtatni, ha a javascript_pack_tag címkét tartalmazó nézet betöltődik a böngészőbe.

Csomagolás

Remélem, hogy ez a cikk segít tisztázni az esetleges zavart, amikor frissíti alkalmazását a Rails 6-ra, vagy ha most kezdte a Rails alkalmazást.

Kövess engem a Githubon, ha többet szeretnél megtudni.