Sådan tilføjes JavaScript til dine Rails 6 App

Som junior Full-Stack-udvikler var mit hovedfokus backend. Jeg ville lære at programmere min backend-server til at betjene min webapplikation.

Men efter at have lært det grundlæggende i backend'en lærte jeg, at frontend var lige så vigtig som backend. Og en måde at øge livligheden i din webapplikation er ved at tilføje JavaScript.

JavaScript er vigtigt for at tilføje interaktivitet til din webapplikation. Selvfølgelig er det blevet langt mere end det nu. Det er et programmeringssprog, som webbrowsere kører. Mange websteder, du har besøgt, bruger nogle JavaScript-koder i deres frontend.

Du er muligvis begyndt at bruge Ruby on Rails til at opbygge din webapplikation og spekulerede på, hvordan du tilføjer JavaScript til din kode. I denne artikel viser jeg dig, hvordan du tilføjer JavaScript-kode til din Rails-app.

Hvorfor JavaScript?

Du undrer dig måske over, hvorfor du overhovedet har brug for JavaScript i din webapplikation. Kort sagt, hvis du ikke inkluderer nogen JS, vil din webapplikations brugeroplevelse ikke være god.

Lad os sige, at du har en formular, som en bruger udfylder, og at du vil foretage formularvalidering. Hvis brugeren sender formularen uden at udfylde de korrekte værdier, skal siden for formularen indlæses igen, ramme serveren og komme op igen for brugeren. Det tager meget tid og vil sandsynligvis irritere brugeren.

Selvfølgelig kan du nogle gange slippe af med HTML-formularvalidering, men det er ikke altid muligt. Tilføjelse af et simpelt script, der kontrollerer brugerindgange og underretter dem om, at de skal indtaste de korrekte oplysninger, er meget bedre.

Selvfølgelig betyder det ikke, at du kan ignorere serversidevalidering, men det er for en anden artikel.

En anden brugssag er at indlæse filer asynkront, hvilket du kan gøre i JavaScript uden at genindlæse hele siden. Du har muligvis brugt nogle webapps, der indlæser flere billeder og artikler, når du ruller ned uden at skulle opdatere eller ændre siden igen og igen.

Disse og andre brugssager er gode grunde til at bruge JavaScript i din applikation. Faktisk har efterspørgslen efter JavaScript været stigende. Du kan endda bruge den til at skrive din backend.

Men vi elsker skinner, så vi holder fast ved det et stykke tid.

Hvad vi dækker her

I skrivende stund er den seneste version af rammen Rails 6, og den har medført nogle ændringer i den måde, du interagerer med JavaScript på.

Før Rails 6 havde vi aktivpipelinen til at styre CSS- og JavaScript-filer. Men startende fra Rails 6 er Webpacker standard compiler til JavaScript. CSS administreres stadig af aktivpipelinen, men du kan også bruge Webpack til at kompilere CSS.

Du finder ikke din JavaScript-mappe det samme sted som i Rails 5. Directory-strukturen til JavaScript er ændret til appen / javascript / packs / folder.

I den mappe finder du filen application.js , som er ligesom application.css- filen. Det importeres som standard i filen application.html.erb , når du opretter din nye Rails-app.

Den application.html.erb fil vil blive brugt af alle visninger.

Tilføjelse af et script, der vil blive brugt af alle visninger

Hvis du vil have din JavaScript til at være tilgængelig i alle visninger eller sider, kan du bare lægge den i filen application.js :

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

De første fire linjer er der som standard. Jeg har tilføjet en console.logerklæring for at vise dig, at JavaScript vil være tilgængeligt overalt.

Du kan teste dette ved at se en hvilken som helst side i din applikation og åbne udviklerkonsollen.

Men du vil måske ikke altid have din JavaScript-kode indlæst på hver side. I stedet kan du kun gøre scriptet tilgængeligt, når du besøger en bestemt side.

Tilføjelse af et script, der vil blive brugt af en bestemt fil

Hvis du vil have, at din JavaScript kun skal være tilgængelig til en bestemt visning, kan du bruge javascript_pack_tag til at importere den specifikke fil:

I want my JS here only

console.log('Hello from My JS')

Husk at du skal tilføje filen i packs- biblioteket. Den javascript_pack_tag bør også henvise til navnet på den JavaScript-fil, du oprettede.

Nu kører scriptet kun, når den specifikke visning, der inkluderer javascript_pack_tag, er indlæst i browseren.

Afslutter

Jeg håber, at denne artikel hjælper med at rydde enhver forvirring, du måtte have, når du opdaterer din app til Rails 6, eller hvis du lige er startet med Rails.

Du kan følge mig på Github, hvis du vil lære mere.