Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Pengenalan Framework Stimulus

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Ada banyak framework JavaScript di luar sana. Kadang-kadang saya bahkan mulai berpikir bahwa saya adalah satu-satunya yang belum menciptakan framework. Beberapa solusi, seperti Angular, besar dan kompleks, sedangkan beberapa, seperti Backbone (yang lebih merupakan sebuah perpustakaan daripada kerangka), cukup sederhana dan hanya menyediakan beberapa alat untuk mempercepat proses pengembangan.

Dalam artikel hari ini saya ingin menyajikan kerangka kerja baru yang disebut Stimulus. Ini dibuat oleh tim Basecamp yang dipimpin oleh David Heinemeier Hansson, pengembang populer yang adalah ayah dari Ruby on Rails.

Stimulus adalah kerangka kecil yang tidak pernah dimaksudkan untuk tumbuh menjadi sesuatu yang besar. Ini memiliki filosofi dan sikap sendiri terhadap pengembangan front-end, yang mungkin disukai atau tidak disukai oleh beberapa programer. Stimulus masih muda, tetapi versi 1 telah dirilis sehingga harus aman digunakan dalam produksi. Saya telah bermain dengan kerangka ini sedikit dan sangat menyukai kesederhanaan dan keanggunannya. Mudah-mudahan, Anda akan menikmatinya juga!

Dalam posting ini kita akan membahas dasar-dasar Stimulus sambil membuat aplikasi satu halaman dengan pemuatan data tidak sinkron, kejadian, persistensi negara, dan hal-hal umum lainnya.

Kode sumber dapat ditemukan di GitHub.

Pengenalan Stimulus

Stimulus dibuat oleh pengembang di Basecamp. Alih-alih membuat aplikasi JavaScript satu halaman, mereka memutuskan untuk memilih monolit megah yang didukung oleh Turbolinks dan beberapa JavaScript. Kode JavaScript ini berevolusi menjadi kerangka kecil dan sederhana yang tidak mengharuskan Anda menghabiskan berjam-jam mempelajari semua konsep dan peringatannya.

Stimulus sebagian besar dimaksudkan untuk menempelkan dirinya sendiri ke elemen DOM yang ada dan bekerja dengan mereka dalam beberapa cara. Namun demikian, dimungkinkan untuk secara dinamis merender isinya juga. Secara keseluruhan, kerangka kerja ini sangat berbeda dari solusi populer lainnya seperti, misalnya, ini bertahan dalam keadaan HTML, bukan dalam objek JavaScript. Beberapa pengembang mungkin merasa tidak nyaman, tetapi berikan Stimulus kesempatan, karena itu benar-benar dapat mengejutkan Anda.

Kerangka kerja ini hanya memiliki tiga konsep utama yang harus Anda ingat, yaitu:

  • Controllers: kelas JS dengan beberapa metode dan callback yang menempel pada DOM. Lampiran terjadi ketika atribut "magic" data-controller muncul di halaman. Dokumentasi menjelaskan bahwa atribut ini adalah jembatan antara HTML dan JavaScript, sama seperti kelas berfungsi sebagai jembatan antara HTML dan CSS. Satu pengontrol dapat dilampirkan ke beberapa elemen, dan satu elemen dapat dinyalakan oleh beberapa pengontrol.
  • Action: metode yang harus dipanggil pada peristiwa tertentu. Mereka didefinisikan dalam atribut data-action khusus.
  • Targets: elemen penting yang dapat diakses dan dimanipulasi dengan mudah. Mereka ditentukan dengan bantuan atribut data-target.

Seperti yang Anda lihat, atribut yang tercantum di atas memungkinkan Anda untuk memisahkan konten dari logika perilaku dengan cara yang sangat sederhana dan alami. Nanti di artikel ini, kita akan melihat semua konsep ini dalam tindakan dan perhatikan betapa mudahnya membaca dokumen HTML dan memahami apa yang sedang terjadi.

Bootstrap Aplikasi Stimulus

Stimulus dapat dengan mudah dipasang sebagai paket NPM atau dimuat langsung melalui tag script sebagaimana dijelaskan dalam dokumen. Juga perhatikan bahwa secara default kerangka ini terintegrasi dengan pengelola aset Webpack, yang mendukung barang seperti autoloading pengendali. Anda bebas menggunakan sistem build lain, tetapi dalam hal ini beberapa pekerjaan akan diperlukan.

Cara tercepat untuk memulai dengan Stimulus adalah dengan memanfaatkan proyek awal ini yang memiliki server web Express dan Babel sudah terhubung. Itu juga tergantung pada Yarn, jadi pastikan untuk memasangnya. Untuk mengkloning proyek dan menginstal semua dependensinya, jalankan:

Jika Anda lebih suka untuk tidak menginstal apa pun secara lokal, Anda dapat me-remix proyek ini di Glitch dan melakukan semua pengkodean langsung di browser Anda.

Hebat—kita semua siap dan dapat melanjutkan ke bagian berikutnya!

Beberapa Markup

Misalkan kita membuat aplikasi satu halaman kecil yang menyajikan daftar karyawan dan memuat informasi seperti nama, foto, posisi, gaji, tanggal lahir, dll.

Mari mulai dengan daftar karyawan. Semua markup yang akan kita tulis harus ditempatkan di dalam file public/index.html, yang sudah memiliki beberapa HTML yang sangat minim. Untuk saat ini, kami akan mengeraskan semua karyawan kami dengan cara berikut:

Bagus! Sekarang mari tambahkan sedikit sihir Stimulus.

Membuat Controller

Sebagaimana dokumentasi resmi menjelaskan, tujuan utama Stimulus adalah untuk menghubungkan objek-objek JavaScript (yang disebut controllers) ke elemen DOM. Pengontrol kemudian akan menghidupkan halaman. Sebagai sebuah konvensi, nama-nama pengendali harus diakhiri dengan postfix _controller (yang seharusnya sangat akrab bagi pengembang Rails).

Ada direktori untuk pengendali yang sudah tersedia yang disebut src/controllers. Di dalam, Anda akan menemukan file hello_controller.js yang mendefinisikan kelas kosong:

Mari ganti nama file ini menjadi employees_controller.js. Kita tidak perlu secara khusus memerlukannya karena pengontrol dimuat secara otomatis berkat baris kode berikut di file src/index.js:

Langkah selanjutnya adalah menghubungkan pengontrol kami ke DOM. Untuk melakukan ini, atur atribut data-controller dan tetapkan sebagai pengenal (yang merupakan employees dalam kasus kami):

Itu dia! Controller sekarang dilampirkan ke DOM.

Lifecycle Callbacks

Satu hal penting yang harus diketahui tentang pengontrol adalah mereka memiliki tiga lifecycle callback yang diaktifkan pada kondisi tertentu:

  • initialize: callback ini hanya terjadi sekali, ketika pengontrol digunakan.
  • connect: aktifkan setiap kali kita menghubungkan controller ke elemen DOM. Karena satu kontroler dapat dihubungkan ke beberapa elemen di halaman, callback ini dapat berjalan beberapa kali.
  • diconnect: karena Anda mungkin sudah menduga, callback ini berjalan kapan pun controller memutus sambungan dari elemen DOM.

Tidak ada yang rumit, kan? Mari manfaatkan initialize() dan connect() callback untuk memastikan pengontrol kami benar-benar berfungsi:

Selanjutnya, jalankan server dengan menjalankan:

Arahkan ke http://localhost:9000. Buka konsol browser Anda dan pastikan kedua pesan ditampilkan. Itu berarti semuanya berjalan seperti yang diharapkan!

Menambahkan Events

Konsep inti Stimulus berikutnya adalah events. Acara digunakan untuk menanggapi berbagai tindakan pengguna pada halaman: mengklik, melayang, fokus, dll. Stimulus tidak mencoba untuk menemukan kembali sepeda, dan sistem acaranya didasarkan pada peristiwa JS umum.

Misalnya, mari kita ikat acara klik ke karyawan kami. Setiap kali peristiwa ini terjadi, saya ingin memanggil metode choose() dari employee_controller yang belum ada:

Mungkin, Anda dapat memahami apa yang terjadi di sini sendiri.

  • data-action adalah atribut khusus yang mengikat suatu peristiwa ke elemen dan menjelaskan tindakan apa yang harus dipanggil.
  • click, tentu saja, adalah nama events.
  • employees adalah identifier controller kami.
  • choose nama metode yang ingin kami panggil.

Karena click adalah peristiwa yang paling umum, itu dapat dengan aman dihilangkan:

Dalam hal ini, click akan digunakan secara implisit.

Selanjutnya, mari kita kodekan metode choose(). Saya tidak ingin tindakan default terjadi (yang, tentu saja, membuka halaman baru yang ditentukan dalam atribut href), jadi mari kita cegah:

e adalah objek peristiwa khusus yang berisi informasi lengkap tentang peristiwa yang dipicu. Perhatikan, by the way, bahwa this mengembalikan controller itu sendiri, bukan tautan individu! Untuk mendapatkan akses ke elemen yang bertindak sebagai target acara, gunakan e.target.

Reload halaman, klik pada item daftar, dan amati hasilnya!

Bekerja dengan State

Sekarang kami telah mengikat event handler klik ke karyawan, saya ingin menyimpan orang yang dipilih saat ini. Mengapa? Setelah menyimpan info ini, kita dapat mencegah karyawan yang sama dipilih untuk yang kedua kalinya. Ini nantinya akan memungkinkan kami untuk menghindari memuat informasi yang sama beberapa kali juga.

Stimulus menginstruksikan kita untuk bertahan dalam Data API, yang tampaknya cukup masuk akal. Pertama-tama, mari sediakan beberapa id acak untuk setiap karyawan menggunakan atribut data-id:

Selanjutnya, kita perlu mengambil id dan melanjutkannya. Menggunakan API Data sangat umum dengan Stimulus, sehingga objek khusus this.data disediakan untuk setiap pengontrol. Dengan bantuannya, kita dapat menjalankan metode berikut:

  • this.data.get ('name'): dapatkan nilainya berdasarkan atributnya.
  • this.data.set ('name', value): atur nilainya di bawah beberapa atribut.
  • this.data.has ('name'): periksa apakah atribut ada (mengembalikan nilai boolean).

Sayangnya, pintasan ini tidak tersedia untuk target peristiwa klik, jadi kita harus tetap dengan getAttribute() dalam kasus mereka:

Tapi kita bisa melakukan lebih baik dengan menciptakan pengambil dan penyetel untuk currentEmployee:

Perhatikan bagaimana kita menggunakan pengambil this.currentEmployee dan memastikan bahwa id yang diberikan tidak sama dengan yang sudah tersimpan.

Sekarang Anda dapat menulis ulang metode choose() dengan cara berikut:

Muat ulang halaman untuk memastikan bahwa semuanya masih berfungsi. Anda tidak akan melihat perubahan visual apa pun, tetapi dengan bantuan alat Inspektur Anda akan melihat bahwa ul memiliki atribut data-employees-current-employee dengan nilai yang berubah saat Anda mengeklik tautan. Bagian employees dalam nama atribut adalah pengenal pengendali dan ditambahkan secara otomatis.

Sekarang mari kita lanjutkan dan soroti karyawan yang saat ini dipilih.

Menggunakan Targets

Ketika seorang karyawan dipilih, saya ingin menetapkan elemen yang sesuai dengan kelas yang .chosen. Tentu saja, kami mungkin telah menyelesaikan tugas ini dengan menggunakan beberapa fungsi pemilih JS, tetapi Stimulus memberikan solusi yang lebih rapi.

Temui targets, yang memungkinkan Anda menandai satu atau lebih elemen penting di halaman. Elemen-elemen ini kemudian dapat dengan mudah diakses dan dimanipulasi sesuai kebutuhan. Untuk membuat target, tambahkan atribut data-target dengan nilai {controller}.{target_name} (disebut target descriptor):

Sekarang biarkan Stimulus mengetahui tentang target baru ini dengan menentukan nilai statis baru:

Bagaimana cara kita mengakses target sekarang? Ini sesederhana mengatakan this.employeeTarget (untuk mendapatkan elemen pertama) atau this.employeeTargets (untuk mendapatkan semua elemen):

Hebat! Bagaimana target ini dapat membantu kita sekarang? Kita bisa menggunakannya untuk menambah dan menghapus kelas CSS dengan mudah berdasarkan beberapa kriteria:

Idenya sederhana: kami mengulangi serangkaian target dan untuk setiap target membandingkan data-id dengan yang disimpan di bawah this.currentEmployee. Jika cocok, elemen ditugaskan. Kelas .chosen. Jika tidak, kelas ini dihapus. Anda juga dapat mengekstrak if (this.currentEmployee! == id) { condition dari setter dan gunakan dalam metode chosen() sebagai gantinya:

Tampak bagus! Terakhir, kami akan menyediakan beberapa styling yang sangat sederhana untuk kelas .chosen di dalam public/main.css:

Muat ulang halaman sekali lagi, klik seseorang, dan pastikan orang itu disorot dengan benar.

Loading Data Asynchronously

Tugas kita berikutnya adalah memuat informasi tentang karyawan yang dipilih. Dalam aplikasi dunia nyata, Anda harus menyiapkan penyedia hosting, back-end yang didukung oleh sesuatu seperti Django atau Rails, dan API endpoint yang merespons dengan JSON yang berisi semua data yang diperlukan. Tetapi kita akan membuat hal-hal menjadi sedikit lebih sederhana dan berkonsentrasi pada sisi klien saja. Buat direktori employees di bawah folder public. Selanjutnya, tambahkan empat file yang berisi data untuk masing-masing karyawan:

1.json

2.json

3.json

4.json

Semua foto diambil dari fotografi stok gratis oleh Shopify yang disebut Burst.

Data kami siap dan menunggu untuk dimuat! Untuk melakukan ini, kita akan kode metode loadInfoFor() terpisah:

Metode ini menerima id karyawan dan mengirim fetch request asinkron ke URI yang diberikan. Ada juga dua janji: satu untuk mengambil tubuh dan satu lagi untuk menampilkan info yang dimuat (kita akan menambahkan metode yang sesuai sebentar lagi).

Memanfaatkan metode baru ini dalam choose():

Sebelum mengkode metode displayInfo(), kita membutuhkan elemen untuk benar-benar membuat data menjadi. Mengapa kita tidak memanfaatkan target sekali lagi?

Menetapkan target:

Dan sekarang gunakan untuk menampilkan semua info:

Tentu saja, Anda bebas menggunakan mesin templating seperti Handlebars, tetapi untuk kasus sederhana yang mungkin akan berlebihan.

Sekarang muat ulang halaman dan pilih salah satu karyawan. Biografi dan gambarnya harus dimuat hampir seketika, yang berarti aplikasi kami berfungsi dengan baik!

Dynamic List of Employees

Dengan menggunakan pendekatan yang dijelaskan di atas, kita dapat melangkah lebih jauh dan memuat daftar karyawan dengan cepat daripada meng-coding-nya.

Persiapkan data di dalam public/employees.json file:

Sekarang, tweak file public/index.html dengan menghapus daftar hard-coded dan menambahkan atribut data-employee-url (perhatikan bahwa kita harus memberikan nama controller, jika tidak, API Data tidak akan berfungsi):

Segera setelah pengontrol dilampirkan ke DOM, ia harus mengirim permintaan pengambilan untuk membuat daftar karyawan. Ini berarti callback connect() adalah tempat yang tepat untuk melakukan ini:

Saya mengusulkan kita membuat metode loadFrom() yang lebih umum yang menerima URL untuk memuat data dari dan callback untuk benar-benar membuat data ini:

Men-tweak metode choose() untuk mengambil keuntungan dari loadFrom():

displayInfo() dapat disederhanakan juga, karena JSON adalah sekarang sedang diurai tepat di dalam loadFrom():

Menghapus loadInfoFor() dan kode metode displayEmployees():

Itu dia! Kami sekarang secara dinamis menampilkan daftar karyawan kami berdasarkan data yang dikembalikan oleh server.

Kesimpulan

Dalam artikel ini kita telah membahas kerangka JavaScript sederhana yang disebut Stimulus. Kami telah melihat cara membuat aplikasi baru, menambahkan pengontrol dengan banyak callback dan tindakan, dan memperkenalkan acara dan tindakan. Selain itu, kami telah melakukan beberapa pemuatan data asinkron dengan bantuan permintaan pengambilan.

Secara keseluruhan, itu untuk dasar-dasar Stimulus — itu benar-benar tidak menyangka Anda memiliki pengetahuan rahasia untuk membuat aplikasi web. Tentu saja, kerangka ini mungkin akan memiliki beberapa fitur baru di masa depan, tetapi para pengembang tidak berencana mengubahnya menjadi monster besar dengan ratusan alat.

Jika Anda ingin menemukan lebih banyak contoh penggunaan Stimulus, Anda juga dapat melihat buku kecil ini. Dan jika Anda mencari sumber daya JavaScript tambahan untuk dipelajari atau digunakan dalam pekerjaan Anda, periksa apa yang kami miliki di Envato Market.

Apakah Anda suka Stimulus? Apakah Anda tertarik untuk mencoba membuat aplikasi dunia nyata yang didukung oleh kerangka ini? Bagikan pendapat Anda di komentar!

Seperti biasa, saya berterima kasih untuk tetap bersama saya dan sampai waktu berikutnya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.