Як додати 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, якщо хочете дізнатись більше.