JavaScript toevoegen aan uw Rails 6-app

Als junior Full-Stack ontwikkelaar lag mijn belangrijkste focus op de backend. Ik wilde leren hoe ik mijn backend-server moest programmeren om mijn webtoepassing te bedienen.

Maar nadat ik de basis van de backend had geleerd, leerde ik dat de frontend net zo belangrijk was als de backend. En een manier om de levendigheid van uw webapplicatie te vergroten, is door JavaScript toe te voegen.

JavaScript is essentieel om interactiviteit aan uw webapplicatie toe te voegen. Het is nu natuurlijk veel meer dan dat. Het is een programmeertaal die door webbrowsers wordt uitgevoerd. Veel websites die u hebt bezocht, gebruiken JavaScript-code in hun frontend.

U bent misschien begonnen met het gebruik van Ruby on Rails om uw webtoepassing te bouwen en vroeg zich af hoe u JavaScript aan uw code kunt toevoegen. In dit artikel laat ik je zien hoe je JavaScript-code toevoegt aan je Rails-app.

Waarom JavaScript?

U vraagt ​​zich misschien af ​​waarom u überhaupt JavaScript in uw webapplicatie nodig heeft. Kortom, als u geen JS opneemt, zal de gebruikerservaring van uw webapplicatie niet goed zijn.

Stel dat u een formulier heeft dat een gebruiker invult en dat u formuliervalidatie wilt uitvoeren. Als de gebruiker het formulier indient zonder de juiste waarden in te vullen, moet de pagina voor het formulier opnieuw worden geladen, de server raken en weer verschijnen voor de gebruiker. Dat kost veel tijd en zal de gebruiker waarschijnlijk ergeren.

Natuurlijk kom je soms weg met HTML-formuliervalidatie, maar dat is niet altijd mogelijk. Het is veel beter om een ​​eenvoudig script toe te voegen dat de invoer van de gebruiker controleert en hen laat weten dat ze de juiste informatie moeten invoeren.

Dit betekent natuurlijk niet dat u validatie aan de serverzijde kunt negeren, maar dat is voor een ander artikel.

Een ander gebruiksvoorbeeld is het asynchroon laden van bestanden, wat u in JavaScript kunt doen zonder de hele pagina opnieuw te laden. Mogelijk hebt u enkele web-apps gebruikt die meer afbeeldingen en artikelen laden terwijl u naar beneden scrolt zonder dat u de pagina steeds opnieuw hoeft te vernieuwen of wijzigen.

Deze en andere use-cases zijn goede redenen om JavaScript in uw applicatie te gebruiken. In feite is de vraag naar JavaScript toegenomen. U kunt het zelfs gebruiken om uw backend te schrijven.

Maar we houden van Rails, dus we gaan er een tijdje mee door.

Wat we hier behandelen

Op het moment van schrijven is de nieuwste versie van het framework Rails 6, en het heeft enkele wijzigingen aangebracht in de manier waarop u met JavaScript omgaat.

Voorafgaand aan Rails 6 hadden we de asset pipeline om CSS- en JavaScript-bestanden te beheren. Maar vanaf Rails 6 is Webpacker de standaardcompiler voor JavaScript. CSS wordt nog steeds beheerd door de asset pipeline, maar je kunt ook Webpack gebruiken om CSS te compileren.

U zult uw JavaScript-map niet op dezelfde plaats vinden als in Rails 5. De directorystructuur voor JavaScript is gewijzigd in de map app / javascript / packs / .

In die map vindt u het bestand application.js , net als het bestand application.css . Het wordt standaard geïmporteerd in het bestand application.html.erb wanneer u uw nieuwe Rails-app maakt.

Het bestand application.html.erb wordt door alle weergaven gebruikt.

Een script toevoegen dat door alle weergaven zal worden gebruikt

Als u wilt dat uw JavaScript in alle weergaven of pagina's beschikbaar is, kunt u deze gewoon in het bestand application.js plaatsen :

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

De eerste vier regels zijn er standaard. Ik heb een console.logverklaring toegevoegd om u te laten zien dat JavaScript overal beschikbaar zal zijn.

U kunt dit testen door een pagina in uw applicatie te bekijken en de ontwikkelaarsconsole te openen.

Maar u wilt misschien niet altijd dat uw JavaScript-code op elke pagina wordt geladen. In plaats daarvan kunt u het script alleen beschikbaar maken wanneer u een specifieke pagina bezoekt.

Een script toevoegen dat door een specifiek bestand zal worden gebruikt

Als u wilt dat uw JavaScript alleen beschikbaar is voor een specifieke weergave, kunt u de javascript_pack_tag gebruiken om dat specifieke bestand te importeren:

I want my JS here only

console.log('Hello from My JS')

Onthoud dat u het bestand in de map packs moet toevoegen . De javascript_pack_tag moet ook verwijzen naar de naam van het JavaScript-bestand dat u hebt gemaakt.

Nu wordt het script alleen uitgevoerd als de specifieke weergave die de javascript_pack_tag bevat, in de browser is geladen.

Afsluiten

Ik hoop dat dit artikel helpt om eventuele verwarring op te lossen die je zou kunnen hebben bij het updaten van je app naar Rails 6, of als je net bent begonnen met Rails.

Je kunt me volgen op Github als je meer wilt weten.