Ca dezvoltator junior Full-Stack, accentul meu principal a fost backend-ul. Am vrut să învăț cum să-mi programez serverul backend pentru a-mi servi aplicația web.

Dar, după ce am învățat elementele de bază ale backend-ului, am aflat că frontend-ul era la fel de important ca backend-ul. Și o modalitate de a spori vivacitatea aplicației dvs. web este prin adăugarea JavaScript.

JavaScript este esențial pentru a adăuga interactivitate aplicației dvs. web. Desigur, a devenit mult mai mult decât atât acum. Este un limbaj de programare pe care îl rulează browserele web. Multe site-uri web pe care le-ați vizitat folosesc un cod JavaScript în frontend.

Este posibil să fi început să utilizați Ruby on Rails pentru a vă crea aplicația web și v-ați întrebat cum să adăugați JavaScript la codul dvs. În acest articol, vă voi arăta cum să adăugați cod JavaScript în aplicația dvs. Rails.

De ce JavaScript?

S-ar putea să vă întrebați de ce aveți nevoie chiar de JavaScript în aplicația dvs. web. Pe scurt, dacă nu includeți niciun JS, atunci experiența de utilizare a aplicației dvs. web nu va fi bună.

Să presupunem că aveți un formular pe care îl completează un utilizator și doriți să faceți validarea formularului. Dacă utilizatorul trimite formularul fără a completa valorile corespunzătoare, pagina formularului trebuie să se reîncarce din nou, lovind serverul și revenind din nou pentru utilizator. Acest lucru durează mult timp și probabil îl va enerva pe utilizator.

Desigur, uneori puteți scăpa de validarea formularului HTML, dar acest lucru nu este întotdeauna posibil. Adăugarea unui script simplu care verifică intrările utilizatorului și îi notifică că ar trebui să introducă informațiile corecte este mult mai bună.

Desigur, acest lucru nu înseamnă că puteți ignora validarea pe partea de server, dar asta este pentru un alt articol.

Un alt caz de utilizare este încărcarea fișierelor în mod asincron, lucru pe care îl puteți face în JavaScript fără a reîncărca întreaga pagină. Este posibil să fi folosit unele aplicații web care încarcă mai multe imagini și articole pe măsură ce derulați în jos, fără a fi nevoie să reîmprospătați sau să schimbați pagina de mai multe ori.

Aceste și alte cazuri de utilizare sunt motive excelente pentru a utiliza JavaScript în aplicația dvs. De fapt, cererea pentru JavaScript a crescut. Îl puteți folosi chiar și pentru a vă scrie backend-ul.

Dar ne place Rails, așa că vom rămâne cu el o vreme.

Ce vom acoperi aici

La momentul scrierii, ultima versiune a cadrului este Rails 6 și a adus câteva modificări modului în care interacționați cu JavaScript.

Înainte de Rails 6, aveam conducta activelor pentru a gestiona fișiere CSS și JavaScript. Dar pornind de la Rails 6, Webpacker este compilatorul implicit pentru JavaScript. CSS este încă gestionat de conducta activelor, dar puteți utiliza și Webpack pentru a compila CSS.

Nu veți găsi folderul JavaScript în același loc ca în Rails 5. Structura directorului pentru JavaScript s-a schimbat în app / javascript / pachete / pliant.

În acel folder veți găsi fișierul application.js fișier, care este la fel ca application.css fişier. Acesta va fi importat în mod implicit în application.html.erb fișier când creați noua aplicație Rails.

application.html.erb fișierul va fi utilizat de toate vizualizările.

Adăugarea unui script care va fi folosit de toate vizualizările

Dacă doriți ca JavaScript să fie disponibil în toate vizualizările sau paginile, îl puteți pune doar în application.js fişier:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

console.log('Hello from application.js')
app / javascript / packs / application.js

Primele patru linii sunt acolo în mod implicit. Am adăugat un console.log declarație pentru a vă arăta că JavaScript va fi disponibil peste tot.

Puteți testa acest lucru vizualizând orice pagină din aplicația dvs. și deschizând consola pentru dezvoltatori.

Dar este posibil să nu doriți întotdeauna ca codul dvs. JavaScript să fie încărcat pe fiecare pagină. În schimb, puteți face scriptul disponibil numai atunci când vizitați o anumită pagină.

Adăugarea unui script care va fi utilizat de un anumit fișier

Dacă doriți ca JavaScript să fie disponibil doar pentru o anumită vizualizare, atunci puteți utiliza fișierul javascript_pack_tag pentru a importa acel fișier specific:

<h1 class="text-center">I want my JS here only</h1>

<%= javascript_pack_tag 'my_js' %>
app / views / posts / index.html.erb
console.log('Hello from My JS')
app / javascript / packs / my_js.js

Amintiți-vă că trebuie să adăugați fișierul în pachete director. javascript_pack_tag ar trebui să se refere și la numele fișierului JavaScript pe care l-ați creat.

Acum scriptul va rula numai atunci când vizualizarea specifică care include fișierul javascript_pack_tag este încărcat în browser.

Înfășurându-se

Sper că acest articol vă va ajuta să clarificați orice confuzie pe care o puteți avea atunci când vă actualizați aplicația la Rails 6 sau dacă tocmai ați început cu Rails

Poți să mă urmărești mai departe Github dacă vrei să afli mai multe.