Cara Menambahkan JavaScript ke Aplikasi Rails 6 Anda

Sebagai pengembang Full-Stack junior, fokus utama saya adalah backend. Saya ingin belajar bagaimana memprogram server backend saya untuk melayani aplikasi web saya.

Tetapi setelah mempelajari dasar-dasar backend, saya mengetahui bahwa frontend sama pentingnya dengan backend. Dan salah satu cara untuk meningkatkan keaktifan aplikasi web Anda adalah dengan menambahkan JavaScript.

JavaScript sangat penting untuk menambahkan interaktivitas ke aplikasi web Anda. Tentu saja, sekarang sudah jauh lebih dari itu. Ini adalah bahasa pemrograman yang dijalankan browser web. Banyak situs web yang Anda kunjungi menggunakan beberapa kode JavaScript di bagian depannya.

Anda mungkin sudah mulai menggunakan Ruby on Rails untuk membangun aplikasi web Anda dan bertanya-tanya bagaimana cara menambahkan JavaScript ke kode Anda. Di artikel ini, saya akan menunjukkan cara menambahkan kode JavaScript ke aplikasi Rails Anda.

Mengapa JavaScript?

Anda mungkin bertanya-tanya mengapa Anda membutuhkan JavaScript di aplikasi web Anda. Singkatnya, jika Anda tidak menyertakan JS, maka pengalaman pengguna aplikasi web Anda tidak akan baik.

Katakanlah Anda memiliki formulir yang diisi pengguna dan Anda ingin melakukan validasi formulir. Jika pengguna mengirimkan formulir tanpa mengisi nilai yang benar, halaman untuk formulir harus memuat ulang lagi, masuk ke server dan muncul lagi untuk pengguna. Itu membutuhkan banyak waktu dan mungkin akan mengganggu pengguna.

Tentu saja terkadang Anda bisa lolos dengan validasi formulir HTML, tetapi itu tidak selalu memungkinkan. Menambahkan skrip sederhana yang memeriksa input pengguna dan memberi tahu mereka bahwa mereka harus memasukkan informasi yang benar jauh lebih baik.

Tentu saja ini tidak berarti Anda dapat mengabaikan validasi sisi server, tetapi itu untuk artikel lain.

Kasus penggunaan lainnya adalah memuat file secara asinkron, yang dapat Anda lakukan di JavaScript tanpa memuat ulang seluruh halaman. Anda mungkin telah menggunakan beberapa aplikasi web yang memuat lebih banyak gambar dan artikel saat Anda menggulir ke bawah tanpa harus menyegarkan atau mengubah halaman berulang kali.

Ini dan kasus penggunaan lainnya adalah alasan yang bagus untuk menggunakan JavaScript di aplikasi Anda. Faktanya, permintaan JavaScript telah meningkat. Anda bahkan dapat menggunakannya untuk menulis backend Anda.

Tapi kami menyukai Rails, jadi kami akan mematuhinya untuk sementara waktu.

Apa yang akan kita bahas di sini

Pada saat penulisan, versi terbaru dari framework ini adalah Rails 6, dan telah membawa beberapa perubahan pada cara Anda berinteraksi dengan JavaScript.

Sebelum Rails 6, kami memiliki jalur aset untuk mengelola file CSS dan JavaScript. Tetapi mulai dari Rails 6, Webpacker adalah kompiler default untuk JavaScript. CSS masih dikelola oleh pipa aset, tetapi Anda juga dapat menggunakan Webpack untuk mengompilasi CSS.

Anda tidak akan menemukan folder JavaScript Anda di tempat yang sama seperti yang Anda temukan di Rails 5. Struktur direktori untuk JavaScript telah berubah menjadi folder app / javascript / packs / .

Di folder tersebut Anda akan menemukan file application.js yang mirip dengan file application.css . Ini akan diimpor secara default di file application.html.erb saat Anda membuat aplikasi Rails baru.

File application.html.erb akan digunakan oleh semua tampilan.

Menambahkan skrip yang akan digunakan oleh semua tampilan

Jika Anda ingin JavaScript Anda tersedia di semua tampilan atau halaman, Anda bisa meletakkannya di file application.js :

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

Empat baris pertama ada di sana secara default. Saya telah menambahkan console.logpernyataan untuk menunjukkan kepada Anda bahwa JavaScript akan tersedia di mana saja.

Anda dapat mengujinya dengan melihat halaman mana pun di aplikasi Anda dan membuka konsol pengembang.

Tetapi Anda mungkin tidak selalu ingin kode JavaScript Anda dimuat di setiap halaman. Alih-alih, Anda dapat membuat skrip hanya tersedia saat mengunjungi halaman tertentu.

Menambahkan skrip yang akan digunakan oleh file tertentu

Jika Anda ingin JavaScript Anda tersedia hanya untuk tampilan tertentu, Anda dapat menggunakan javascript_pack_tag untuk mengimpor file spesifik tersebut:

I want my JS here only

console.log('Hello from My JS')

Ingatlah bahwa Anda perlu menambahkan file ke direktori paket . The javascript_pack_tag juga harus mengacu pada nama file JavaScript Anda buat.

Sekarang skrip hanya akan berjalan ketika tampilan spesifik yang menyertakan javascript_pack_tag dimuat di browser.

Membungkus

Saya harap artikel ini membantu menghilangkan kebingungan yang mungkin Anda alami saat memperbarui aplikasi Anda ke Rails 6, atau jika Anda baru saja memulai dengan Rails.

Anda dapat mengikuti saya di Github jika Anda ingin mempelajari lebih lanjut.