Как да добавите JavaScript към приложението си Rails 6

Като млад разработчик на Full-Stack, основният ми фокус беше бекендът. Исках да науча как да програмирам моя бекенд сървър да обслужва моето уеб приложение.

Но след като научих основите на бекенда, научих, че интерфейсът е също толкова важен, колкото и бекенда. И един от начините да увеличите оживеността на вашето уеб приложение е като добавите JavaScript.

JavaScript е от съществено значение за добавяне на интерактивност към вашето уеб приложение. Разбира се, стана много повече от това сега. Това е език за програмиране, който уеб браузърите изпълняват. Много уебсайтове, които сте посетили, използват някои JavaScript кодове във фронта си.

Може би сте започнали да използвате Ruby on Rails за изграждане на вашето уеб приложение и сте се чудили как да добавите JavaScript към кода си. В тази статия ще ви покажа как да добавите JavaScript код към вашето приложение Rails.

Защо JavaScript?

Може би се чудите защо изобщо имате нужда от JavaScript във вашето уеб приложение. Накратко, ако не включите никакъв JS, потребителският опит на вашето уеб приложение няма да е добър.

Да предположим, че имате формуляр, който потребителят попълва и искате да направите проверка на формуляра. Ако потребителят изпрати формуляра, без да попълва правилните стойности, страницата за формуляра трябва да се презареди отново, като удари сървъра и се появи отново за потребителя. Това отнема много време и вероятно ще дразни потребителя.

Разбира се, понякога можете да се измъкнете с валидиране на HTML форма, но това не винаги е възможно. Добавянето на прост скрипт, който проверява потребителските въведения и ги уведомява, че трябва да въведат правилната информация, е много по-добре.

Разбира се, това не означава, че можете да игнорирате валидирането от страна на сървъра, но това е за друга статия.

Друг случай на употреба е зареждането на файлове асинхронно, което можете да направите в JavaScript, без да презареждате цялата страница. Може да сте използвали някои уеб приложения, които зареждат повече снимки и статии, докато превъртате надолу, без да се налага да опреснявате или променяте страницата отново и отново.

Тези и други случаи на употреба са чудесни причини да използвате JavaScript във вашето приложение. Всъщност търсенето на JavaScript се увеличава. Можете дори да го използвате, за да напишете вашия бекенд.

Но ние обичаме Rails, така че ще продължим с него известно време.

Какво ще разгледаме тук

По време на писането най-новата версия на рамката е Rails 6 и тя внесе някои промени в начина на взаимодействие с JavaScript.

Преди Rails 6 имахме конвейер за активи за управление на CSS и JavaScript файлове. Но като се започне от Rails 6, Webpacker е компилаторът по подразбиране за JavaScript. CSS все още се управлява от конвейера на активите, но можете също да използвате Webpack за компилиране на CSS.

Няма да намерите папката си JavaScript на същото място, както в Rails 5. Структурата на директориите за JavaScript се е променила в папката app / javascript / packs / .

В тази папка ще намерите файла application.js , който е точно като файла application.css . Той ще бъде импортиран по подразбиране във файла application.html.erb, когато създавате новото си приложение Rails.

Файлът application.html.erb ще се използва от всички изгледи.

Добавяне на скрипт, който ще се използва от всички изгледи

Ако искате вашият JavaScript да бъде достъпен във всички изгледи или страници, можете просто да го поставите във файла application.js :

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

Първите четири реда са там по подразбиране. Добавих console.logизявление, за да ви покажа, че JavaScript ще бъде достъпен навсякъде.

Можете да тествате това, като прегледате всяка страница в приложението си и отворите конзолата за програмисти.

Но може да не винаги искате вашият JavaScript код да се зарежда на всяка страница. Вместо това можете да направите скрипта достъпен само при посещение на определена страница.

Добавяне на скрипт, който ще се използва от определен файл

Ако искате JavaScript да бъде достъпен само за конкретен изглед, тогава можете да използвате javascript_pack_tag, за да импортирате този конкретен файл:

I want my JS here only

console.log('Hello from My JS')

Не забравяйте, че трябва да добавите файла в директорията на пакетите . В javascript_pack_tag също трябва да се обърнете към името на файла, JavaScript, която сте създали.

Сега скриптът ще се изпълнява само когато конкретният изглед, който включва javascript_pack_tag, е зареден в браузъра.

Обобщавайки

Надявам се, че тази статия помага да се изчисти объркването, което може да възникне при актуализиране на приложението ви до Rails 6 или ако току-що сте започнали работа с Rails.

Можете да ме последвате в Github, ако искате да научите повече.