Pengantar Stimulus.js

Web bergerak cukup cepat dan memilih pendekatan untuk frontend Anda yang akan terasa masuk akal dalam waktu satu tahun itu rumit. Ketakutan terbesar saya sebagai pengembang adalah mengambil proyek yang belum tersentuh untuk sementara waktu, dan menemukan dokumentasi untuk pendekatan apa pun yang mereka gunakan tidak ada atau tidak mudah ditemukan secara online.

Sekitar setahun yang lalu, saya mulai menggunakan Stimulus dan saya merasa sangat senang dengan kode yang saya kirimkan. Ini adalah perpustakaan ~30kb yang mendorong taburan kecil JavaScript yang dapat digunakan kembali dalam aplikasi Anda, diatur sedemikian rupa sehingga meninggalkan sedikit petunjuk di HTML Anda yang dapat diakses tentang di mana menemukan JavaScript yang terhubung dengannya. Itu membuat pemahaman bagaimana sepotong JavaScript akan berinteraksi dengan halaman Anda hampir seperti membaca pseudocode.

Stimulus dibuat oleh tim di Basecamp — mereka baru saja merilis layanan email HEY — untuk membantu memelihara JavaScript yang mereka tulis untuk aplikasi web mereka. Secara historis, Basecamp cukup baik dalam memelihara proyek sumber terbuka mereka, jadi saya merasa cukup yakin bahwa Stimulus telah diuji secara menyeluruh, dan akan dipertahankan selama beberapa tahun ke depan.

Stimulus telah memungkinkan saya untuk membangun aplikasi dengan cara yang terasa dapat digunakan kembali dan didekati. Meskipun saya tidak berpikir Stimulus akan mengambil alih web seperti yang dimiliki React dan Vue, saya pikir itu adalah alat yang berharga untuk dipelajari.

Terminologi

Seperti semua kerangka kerja, Stimulus lebih menyukai istilah untuk menggambarkan hal-hal tertentu. Untungnya (dan salah satu alasan utama saya menyukai Stimulus), hanya ada dua yang perlu Anda ketahui:

• Pengontrol
  Ini merujuk pada instance kelas JavaScript yang merupakan blok pembangun aplikasi Anda. Aman untuk mengatakan bahwa ketika kita berbicara tentang Pengontrol Stimulus, kita berbicara tentang kelas JavaScript.
• pengenal
  Ini adalah nama yang akan kami gunakan untuk mereferensikan pengontrol kami di HTML kami menggunakan atribut data yang umum untuk basis kode Stimulus.
  

Mari Langsung ke Stimulus!

Dalam beberapa contoh berikut, saya akan menggunakan kode yang dapat Anda masukkan ke browser untuk segera memulai melalui perpustakaan yang didistribusikan melalui unpkg.com. Nanti, saya akan membahas pendekatan webpack yang sangat dianjurkan karena memungkinkan peningkatan organisasi kode Anda dan merupakan pendekatan yang digunakan dalam Buku Pegangan Stimulus.

Pelat Ketel

Setelah Anda memahami inti dari cuplikan di atas, Anda akan memiliki pengetahuan untuk merasa nyaman mengambil proyek yang menggunakan Stimulus.

Cukup mengagumkan, bukan? Mari kita lompat ke apa yang sedang dilakukan semuanya!

application.start

Baris ini memberitahu Stimulus untuk menambahkan pendengar ke halaman. Jika Anda memanggilnya sekali di bagian atas halaman Anda sebelum Anda menambahkan kode Stimulus apa pun, itu akan mengembalikan instance dari pengontrol Stimulus utama yang mencakup register metode yang digunakan untuk memberi tahu Stimulus tentang kelas yang ingin Anda hubungkan untuk itu.

Pengendali

Atribut data-controller menghubungkan elemen HTML kita ke sebuah instance dari kelas JavaScript kita. Dalam hal ini, kami menggunakan pengidentifikasi "penghitung" untuk menghubungkan instance kelas JavaScript CounterController ke elemen div kami. Kami memberi tahu Stimulus tentang koneksi antara pengenal ini dan pengontrol melalui metode application.register .

Stimulus akan terus memantau halaman Anda ketika elemen dengan atribut ini ditambahkan dan dihapus. Ketika sepotong HTML baru ditambahkan ke halaman dengan atribut data-controller , itu akan menginisialisasi instance baru dari kelas pengontrol yang relevan, lalu menghubungkan elemen HTML. Jika Anda menghapus elemen itu dari halaman, itu akan memanggil metode disconnect pada kelas controller.

tindakan

Stimulus menggunakan atribut data-action untuk mendefinisikan dengan jelas fungsi pengontrol yang akan dijalankan. Menggunakan sintaks event->controller#function siapa pun yang membaca HTML akan dapat melihat apa yang dilakukannya. Ini sangat berguna karena mengurangi risiko kode tak terduga dari file lain, membuatnya lebih mudah untuk menavigasi basis kode. Ketika saya pertama kali melihat pendekatan yang didorong Stimulus, rasanya hampir seperti membaca kodesemu.

Dalam contoh di atas, ketika tombol memicu peristiwa "klik", itu akan diteruskan ke fungsi addOne dalam pengontrol "penghitung" kami.

Target

Target adalah cara untuk secara eksplisit menentukan elemen mana yang akan tersedia untuk pengontrol Anda. Secara historis saya telah menggunakan campuran ID, nama kelas CSS, dan atribut data untuk mencapai ini, jadi memiliki satu "Ini adalah cara untuk melakukannya" yang sangat eksplisit membuat kode jauh lebih konsisten.

Ini membutuhkan mendefinisikan nama target Anda di dalam kelas pengontrol Anda melalui fungsi targets dan menambahkan nama ke elemen melalui data-target .

Setelah Anda menyiapkan dua bagian itu, elemen Anda akan tersedia di pengontrol Anda. Dalam hal ini, saya telah menyiapkan target dengan nama "output" dan dapat diakses oleh this.outputTarget dalam fungsi di controller kami.

Target Duplikat

Jika Anda memiliki beberapa target dengan nama yang sama, Anda dapat mengaksesnya dengan menggunakan versi jamak dari metode target, dalam hal ini ketika saya memanggil this.outputTargets , itu akan mengembalikan array yang berisi kedua div saya dengan atribut data-target="hello.output" .

Jenis Acara

Anda mendengarkan salah satu acara yang biasanya dapat Anda lampirkan melalui metode JavaScript addEventListener. Jadi misalnya, Anda bisa mendengarkan ketika tombol diklik, formulir dikirimkan atau input diubah.

Untuk mendengarkan peristiwa window atau document (seperti mengubah ukuran, atau pengguna offline), Anda harus menambahkan “@window” atau “@document” ke jenis event (mis resize@window->console#logEvent akan memanggil fungsi logEvent ) pada pengontrol console saat jendela diubah ukurannya.

Ada cara singkat untuk melampirkan acara umum, di mana Anda dapat menghilangkan jenis acara dan memiliki tindakan default untuk jenis elemen. Namun, saya sangat tidak menyarankan menggunakan singkatan acara, karena meningkatkan jumlah asumsi yang perlu dibuat oleh seseorang yang kurang akrab dengan Stimulus tentang kode Anda.

Menggunakan Beberapa Pengendali Dalam Elemen Yang Sama

Cukup sering Anda mungkin ingin memecah dua bagian logika ke dalam kelas yang terpisah, tetapi membuatnya tampak berdekatan satu sama lain dalam HTML. Stimulus memungkinkan Anda untuk menghubungkan elemen ke beberapa kelas dengan menempatkan referensi ke keduanya dalam HTML Anda.

Dalam contoh di atas, saya telah menyiapkan objek basket yang hanya mementingkan dirinya sendiri dengan menghitung jumlah total item dalam keranjang, tetapi juga menambahkan objek child yang menunjukkan jumlah tas per item.

Melewati Data Ke Objek Anda

Stimulus menyediakan metode this.data.get dan this.data.set di dalam kelas pengontrol, ini akan memungkinkan Anda untuk mengubah atribut data yang berada dalam namespace yang sama dengan pengenal. Maksud saya, jika Anda ingin meneruskan data ke pengontrol stimulus dari HTML Anda, cukup tambahkan atribut seperti data-[identifier]-a-variable ke elemen HTML Anda.

Saat memanggil this.data.set , itu akan memperbarui nilai dalam HTML Anda sehingga Anda dapat melihat perubahan nilai saat Anda memeriksa elemen menggunakan alat pengembangan browser Anda.

Menggunakan atribut data dengan spasi nama adalah cara yang sangat bagus untuk membantu memperjelas atribut data mana untuk bagian kode apa.

Inisialisasi, Terhubung, Terputus

Seiring pertumbuhan aplikasi, Anda mungkin perlu menghubungkan ke 'peristiwa siklus hidup' untuk menyetel default, mengambil data, atau menangani komunikasi waktu nyata. Stimulus memiliki tiga metode built-in yang dipanggil sepanjang siklus hidup kelas Stimulus.

Saat Stimulus melihat elemen dengan atribut data-controller yang cocok, itu akan membuat versi baru pengontrol Anda dan memanggil fungsi initialize . Ini akan sering berjalan ketika Anda pertama kali memuat halaman, tetapi juga akan dijalankan jika Anda menambahkan HTML baru ke halaman Anda (misalnya melalui AJAX) yang berisi referensi ke pengontrol Anda. Itu tidak akan berjalan saat Anda memindahkan elemen ke posisi baru di dalam DOM Anda.

Setelah kelas diinisialisasi, Stimulus akan menghubungkannya ke elemen HTML dan memanggil fungsi connect . Itu juga akan memanggil connect jika Anda memindahkan elemen di dalam DOM Anda. Jadi jika Anda mengambil sebuah elemen, menghapusnya dari satu elemen, lalu menambahkannya di tempat lain, Anda akan melihat hanya connect yang akan dipanggil.

Fungsi disconnect akan dijalankan saat Anda menghapus elemen dari halaman Anda, jadi misalnya, jika Anda ingin mengganti badan HTML, Anda dapat menghapus kode apa pun yang mungkin perlu dijalankan kembali jika elemen tersebut tidak ada di posisi yang sama. Misalnya, jika Anda memiliki editor WYSIWYG mewah yang menambahkan banyak HTML ekstra ke suatu elemen, Anda dapat mengembalikannya ke keadaan semula saat disconnect dipanggil.

Mewarisi Fungsionalitas

Kadang-kadang, Anda mungkin ingin berbagi sedikit fungsi umum antara pengontrol Stimulus Anda. Hal yang keren tentang Stimulus adalah (di bawah tenda) Anda menghubungkan kelas JavaScript vanilla ke elemen HTML, jadi fungsi berbagi seharusnya terasa familier.

Dalam contoh ini, saya menyiapkan kelas induk bernama ParentController , yang kemudian diperluas oleh kelas anak bernama ChildController . Ini memungkinkan saya mewarisi metode dari ParentController sehingga saya tidak perlu menduplikasi kode di dalam ChildController saya.

Menggunakannya Dalam Produksi

Saya mendemonstrasikan beberapa contoh yang cukup berdiri sendiri tentang cara menggunakan Stimulus di atas, yang seharusnya memberi Anda gambaran tentang apa yang dapat Anda capai. Saya juga berpikir saya harus menyentuh bagaimana saya menggunakannya dalam produksi dan bagaimana itu berhasil untuk saya.

paket web

Jika Anda menggunakan Webpack, Anda siap! Stimulus benar-benar dibuat untuk digunakan dengan Webpack. Dokumentasi mereka bahkan memiliki starter kit yang bagus untuk Webpack. Ini akan memungkinkan Anda untuk memecah pengontrol Anda menjadi file terpisah dan Stimulus akan memutuskan nama yang benar untuk digunakan sebagai pengenal.

Anda tidak harus menggunakan webpack jika Anda ingin menggunakan Stimulus, tetapi itu membersihkan banyak pengalaman. Secara pribadi, Stimulus adalah perpustakaan yang membantu saya mengenalkan Webpack dan benar-benar merasakan nilai yang ditawarkannya.

Konvensi Nama File

Saya sebutkan dalam pendahuluan artikel ini bahwa saya menikmati menggunakan Stimulus karena terasa terorganisir. Ini benar-benar menjadi jelas ketika Anda menggabungkannya dengan Webpack, yang memungkinkan pemuatan otomatis dan pendaftaran pengontrol.

Setelah Anda menyiapkan Stimulus di Webpack, itu akan mendorong Anda untuk memberi nama file Anda seperti [identifier]_controller.js , di mana pengenalnya adalah apa yang akan Anda berikan ke atribut data-controller HTML Anda.

Saat proyek Anda berkembang, Anda mungkin juga ingin memindahkan pengontrol Stimulus Anda ke dalam subfolder. Dengan cara yang ajaib, Stimulus akan mengubah garis bawah menjadi tanda hubung, dan garis miring ke depan folder menjadi dua garis, yang kemudian akan menjadi pengenal Anda. Jadi misalnya, nama file chat/conversation_item_controller.js akan memiliki pengenal chat--conversation-item .

Mempertahankan Lebih Sedikit JavaScript

Salah satu kutipan favorit saya adalah “The Best Code is No Code At All”, saya mencoba menerapkan pendekatan ini ke semua proyek saya.

Peramban web banyak berkembang, saya cukup yakin bahwa sebagian besar hal yang saya perlukan untuk menulis JavaScript hari ini akan menjadi standar dan dimasukkan ke dalam peramban dalam 5 tahun ke depan. Contoh yang baik dari ini adalah elemen detail, ketika saya pertama kali memulai pengembangan, sangat umum untuk harus mengkodekan fungsionalitas itu secara manual dengan tangan menggunakan jQuery.

Akibatnya, jika saya dapat menulis HTML yang dapat diakses dengan taburan JavaScript untuk memenuhi kebutuhan saya, dengan pola pikir "Ini berhasil hari ini, tetapi dalam 5 tahun saya ingin menggantinya dengan mudah" saya akan senang pengembang. Ini jauh lebih dapat dicapai ketika Anda telah menulis lebih sedikit kode untuk memulai, yang mana Stimulus cocok untuknya.

HTML Pertama, Kemudian JavaScript

Salah satu aspek yang sangat saya sukai dari pendekatan yang didorong Stimulus, adalah saya dapat fokus pada pengiriman HTML ke pengguna saya, yang kemudian sedikit diramaikan dengan JavaScript.

Saya selalu menjadi penggemar menggunakan beberapa milidetik pertama perhatian pengguna untuk mendapatkan apa yang harus saya bagikan dengan mereka — di depan mereka. Kemudian khawatir menyiapkan lapisan interaksi sementara pengguna dapat mulai memproses apa yang mereka lihat.

Selanjutnya, jika JavaScript gagal karena alasan apa pun, pengguna masih dapat melihat konten dan berinteraksi dengannya tanpa JavaScript. Misalnya, alih-alih formulir dikirimkan melalui AJAX, formulir akan dikirim melalui permintaan formulir tradisional yang memuat ulang halaman.

Kesimpulan

Saya suka membangun situs yang hanya membutuhkan sedikit JavaScript yang dapat dipelihara untuk meningkatkan pengalaman pengguna, terkadang bagus untuk membangun sesuatu yang terasa lebih sederhana. Memiliki sesuatu yang ringan itu hebat, saya sangat suka bahwa tanpa terlalu banyak beban kognitif, cukup jelas bagaimana mengatur file Anda, dan menyiapkan remah roti kecil yang mengisyaratkan tentang bagaimana JavaScript akan berjalan dengan sepotong HTML.

Saya sangat menikmati bekerja dengan Stimulus. Tidak terlalu banyak, jadi kurva belajarnya cukup lembut. Saya merasa cukup yakin bahwa jika saya meneruskan kode saya ke orang lain, mereka akan menjadi pengembang yang bahagia. Saya sangat merekomendasikan mencobanya, bahkan jika itu hanya karena rasa ingin tahu yang murni.

Gajah di dalam ruangan adalah bagaimana hal itu ditumpuk dibandingkan dengan yang seperti React dan Vue, tetapi dalam pikiran saya, mereka adalah alat yang berbeda untuk kebutuhan yang berbeda. Dalam kasus saya, saya sering merender HTML dari server saya dan saya menambahkan sedikit JavaScript untuk meningkatkan pengalaman. Jika saya melakukan sesuatu yang lebih kompleks, saya akan mempertimbangkan pendekatan yang berbeda (atau mendorong kembali persyaratan untuk membantu menjaga kode saya tetap sederhana).

Bacaan lebih lanjut

• Beranda Stimulus
  Mereka memiliki buku pegangan fantastis yang membahas konsep-konsep yang telah saya uraikan di atas secara lebih mendalam.
• Stimulus GitHub Repositori
  Saya telah belajar banyak tentang bagaimana Stimulus bekerja dengan menjelajahi kode mereka.
• Lembar Panduan Stimulus
  Buku pegangan dirangkum dalam satu halaman.
• Forum Stimulus
  Melihat orang lain bekerja dengan Stimulus membuat saya benar-benar merasa seperti digunakan di alam liar.