Kako dodati JavaScript u svoju aplikaciju Rails 6

Kao mlađem programeru Full-Stacka, moj glavni fokus bio je pozadina. Želio sam naučiti kako programirati svoj pozadinski poslužitelj tako da služi mojoj web aplikaciji.

Ali nakon što sam naučio osnove pozadine, saznao sam da je sučelje jednako važno kao i pozadina. A jedan od načina za povećanje živosti vaše web aplikacije je dodavanje JavaScript-a.

JavaScript je neophodan za dodavanje interaktivnosti vašoj web aplikaciji. Naravno, sada je to postalo daleko više od toga. To je programski jezik koji pokreću web preglednici. Mnoga web mjesta koja ste posjetili koriste neki JavaScript kôd u svom sučelju.

Možda ste počeli koristiti Ruby on Rails za izgradnju svoje web aplikacije i pitali se kako dodati JavaScript u svoj kôd. U ovom članku pokazat ću vam kako dodati JavaScript kôd u svoju aplikaciju Rails.

Zašto JavaScript?

Možda se pitate zašto vam uopće treba JavaScript u web aplikaciji. Ukratko, ako ne uključite nijedan JS, korisničko iskustvo vaše web aplikacije neće biti dobro.

Recimo da imate obrazac koji korisnik ispunjava i da želite provjeriti valjanost obrasca. Ako korisnik preda obrazac bez popunjavanja odgovarajućih vrijednosti, stranica se mora ponovno učitati, pogodivši poslužitelj i ponovo otvorivši se za korisnika. To oduzima puno vremena i vjerojatno će zasmetati korisniku.

Naravno, ponekad se možete izvući s provjerom HTML obrasca, ali to nije uvijek moguće. Puno je bolje dodati jednostavnu skriptu koja provjerava unose korisnika i obavještava ih da bi trebali unijeti točne podatke.

To naravno ne znači da možete zanemariti provjeru na strani poslužitelja, ali to je za drugi članak.

Sljedeći je slučaj asinhrono učitavanje datoteka, što možete učiniti u JavaScript-u bez ponovnog učitavanja cijele stranice. Možda ste koristili neke web aplikacije koje učitavaju više slika i članaka dok se pomičete prema dolje, a da stranicu ne morate stalno osvježavati ili mijenjati.

Ovi i drugi slučajevi upotrebe sjajni su razlozi za upotrebu JavaScript-a u vašoj aplikaciji. Zapravo se potražnja za JavaScriptom povećava. Možete ga čak koristiti i za pisanje pozadine.

Ali volimo Rails, pa ćemo ga se zadržati neko vrijeme.

Što ćemo ovdje pokriti

U vrijeme pisanja ovog članka, najnovija verzija okvira je Rails 6 i donio je neke promjene u načinu interakcije s JavaScriptom.

Prije Rails 6 imali smo cjevovod sredstava za upravljanje CSS i JavaScript datotekama. No, počevši od Rails 6, Webpacker je zadani prevoditelj za JavaScript. CSS-om još uvijek upravlja cjevovod sredstava, ali također možete koristiti Webpack za sastavljanje CSS-a.

Nećete pronaći svoju JavaScript mapu na istom mjestu kao u Rails 5. Struktura direktorija za JavaScript promijenila se u mapu app / javascript / packs / .

U toj mapi naći ćete datoteku application.js , koja je baš poput datoteke application.css . Bit će uvezen prema zadanim postavkama u datoteku application.html.erb kada kreirate novu aplikaciju Rails.

Datoteka application.html.erb koristit će se u svim prikazima.

Dodavanje skripte koju će koristiti svi prikazi

Ako želite da vaš JavaScript bude dostupan u svim prikazima ili na stranicama, možete ga samo staviti u datoteku application.js :

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

Prva su četiri retka tamo prema zadanim postavkama. Dodao sam console.logizjavu kako bih vam pokazao da će JavaScript biti dostupan svugdje.

To možete testirati pregledavanjem bilo koje stranice u svojoj aplikaciji i otvaranjem konzole za programere.

Ali možda nećete uvijek željeti da se vaš JavaScript kôd učita na svakoj stranici. Umjesto toga, skriptu možete učiniti dostupnom samo kada posjetite određenu stranicu.

Dodavanje skripte koju će koristiti određena datoteka

Ako želite da vaš JavaScript bude dostupan samo za određeni prikaz, tada možete upotrijebiti javascript_pack_tag za uvoz te određene datoteke:

I want my JS here only

console.log('Hello from My JS')

Zapamtite da datoteku morate dodati u direktorij paketa . Javascript_pack_tag također treba uputiti na ime JavaScript datoteku koju ste stvorili.

Sada će se skripta pokrenuti samo kada se u preglednik učita određeni prikaz koji uključuje javascript_pack_tag .

Završavati

Nadam se da ovaj članak pomaže u uklanjanju zabune koju biste mogli imati prilikom ažuriranja aplikacije na Rails 6 ili ako ste tek započeli s Railsom.

Možete me pratiti na Githubu ako želite saznati više.