Cara menggunakan closest javascript

jQuery adalah pustaka library yang paling banyak digunakan di dunia, akan tetapi dalam waktu yang sama, ia adalah pustaka yang paling banyak mendapatkan kritikan (beberapa tahun terakhir ini –pent) [1].

Bagi yang telah menggeluti dunia web setidaknya 10 tahun terakhir, pasti sudah tidak asing dengan jQuery. Bahkan sangat besar kemungkinan bahwa ia menguasai jQuery dengan baik dan telah menggunakannya sebagai tool utama untuk menyelesaikan tugas-tugas yang berkaitan dengan DOM.

Pada tulisan kali ini, kita akan bahas alasan-alasan kenapa kita sudah tidak lagi butuh dengan jQuery dan kenapa Vannila JS bisa menjadi alternatif yang bagus.

1. Performa

Sebagai sebuah pustaka javascript, jQuery datang dengan berbagai macam fungsi yang ringkas untuk memanipulasi DOM. Harus diakui, jQuery membuat hidup frontend developer dalam satu dekade ini menjadi lebih mudah. Akan tetapi seiring dengan perkembangan teknologi, terlebih lagi vannila js yang makin modern, banyak sekali fitur-fitur yang ditawarkan oleh jQuery yang sekarang sudah menjadi native.

jQuery dengan segala kemudahannya, dibelakangi oleh engine bernama Sizzle yang memiliki lebih dari 2400 baris kode [2]. Hal ini tentu saja sangat mempengaruhi performa karena tentu kita tidak membutuhkan semua fitur yang disediakan oleh jQuery.

Marco Trombino dalam tulisannya dengan judul You might not need jQuery: A 2018 Performance case study, membuat perbandingan performa antara jQuery dan vannila js. Uji coba yang ia lakukan adalah membuat 10,000 div dengan jQuery dan vannila js. Alhasil vannila js unggul jauh dibandingkan dengan jQuery sekitar 10 kali lipat lebih cepat.

2. Perkembangannya Lambat

Perkembangan framework javascript sangat masif sekali baik untuk frontend mau pun untuk backend (nodejs). Sampai-sampai kita sudah tidak kaget lagi kalau tiba-tiba muncul nama framework baru di dunia js. Karena hal seperti itu sudah biasa sekali.

Di tengah-tengah masifnya perkembangan framework mau pun library javascript, kita saksikan bahwa jQuery justru tidak berkembang dengan cepat. Bahkan seolah-olah ia diam di tempat.

Saat artikel ini ditulis, versi 3.4.1 adalah versi terakhir dari jQuery, versi tersebut dirilis pada tanggal 02 Mei 2019. Sedangkan versi 1.x jQuery, pertama dirilis pada bulan Agustus tahun 2006, dan versi ke 2.x dirilis pada bulan April 2013.

Sebagai perbandingan, AngularJS pertama kali dirilis pada Oktober tahun 2009 sebelum akhirnya berganti nama dengan “Angular” saja tanpa kata “JS” pada Oktober 2014. Dan sekarang Angular telah versi 8 [3].

3. Sudah Tua

Menurut data dari W3Techs tentang jQuery, varian jQuery versi 1 adalah yang paling banyak digunakan dari pada versi yang lainnya. Ia mencapai angka 83%.

Berikut ini adalah tabel penggunakan jQuery berdasarkan versi major-nya.

Bahkan dalam laporan yang lebih detil, w3Techs menyatakan bahwasanya versi jQuery yang paling banyak digunakan adalah versi 1.12 yang tersebar sebanyak 57.4% dari semua situs yang menggunakan jQuery [4]. Tahukah anda? Versi tersebut telah berumur 12 tahun lebih!

4. Mulai Ditinggalkan Berbagai Komunitas Besar

Menurut data yang dipublikasi oleh BuiltWith, saat artikel ini ditulis jQuery digunakan sebanyak 69,988,718 di dunia. Atau sebanyak 74,48% dari 1 juta situs yang dijadikan sample data [5].

Itu angka yang sangat fantastis sekali!

jQuery bisa mencapai angka fantastis tersebut karena beberapa alasan:

1. Kebanyakan developer belum menyadari bahwa vannila js bisa menyelesaikan tugas mereka dengan mudah tanpa harus menggunakan jQuery.
2. jQuery dibelakangi atau digunakan oleh beberapa platform besar, seperti WordPress dan Bootstrap [6]
3. Menulis ulang produk tua sangat melelahkan dan juga membutuhkan biaya yang mahal.

Akan tetapi, beberapa komunitas besar mulai meninggalkan jQuery

jQuery memang masih menjadi library yang paling banyak digunakan. Akan tetapi, beberapa komunitas besar telah atau mulai meninggalnya. Di antaranya adalah:

1. Bootstrap: mereka telah menghapus jQuery untuk Bootstrap versi 5 [7].
2. AdminLTE: AdminLTE telah memasukkan task ini di list TODO mereka untuk versi 4.0.0 [8]
3. EmberJS Guide Line: mereka menghapus jQuery dari halaman guide lines [9]
4. Meteor JS: hanya menggunakan bootstrap 4 saja tanpa me-require jQuery sebagai dependency [10]
5. Mozilla.org: telah menggunakan vannila js secara menyeluruh setelah sebelumnya menggunkan jQuery [11]
6. Laravel Dusk: mereka menghapus jQuery dan menggantinya dengan vannila js secara menyeluruh [12]
7. Foundation Framework: mereka menyingkirkan jQuery dari framework Foundation for Sites di versi 7 [13].

5. Banyak Diskusi/Artikel Bahwa jQuery Sudah Tidak Lagi Relevan

Banyak sekali artikel di berbagai blog yang membahas bahwa jQuery sudah tidak lagi relevan untuk digunakan. Sebagian meninjau dari sisi performa, sebagian lagi meninjau dari sisi tidak adanya kebutuhan terhadap jQuery. Hal itu karena vannila js bisa menggantikan posisi jQuery bahkan lebih mudah.

Begitu pula di forum-forum diskusi, seperti pada laman issues github atau pun pull request, kita bisa dapati banyak diskusi dari komunitas developer tentang migrasi dari jQuery ke vannila js yang akan mereka lakukan di project mereka. Anda bisa mengunjungi link yang saya muat pada bagian referensi tulisan ini untuk membaca lebih lanjut.

6. Banyak Fitur JQuery Yang Sekarang Menjadi Native

Dengan jQuery, hidup kita menjadi lebih sederhana. Kita bisa memanipulasi DOM dengan cara yang sangat mudah. Kita bisa melakukan DOM query, kita bisa memanipulasi class, event listener, bahkan kita memiliki fungsi

// ambil hanya satu Node
let button = document.querySelector('nav button.clickable')

// ambil semua Node
let buttons = document.querySelectorAll('nav button.clickable')

Akan tetapi, zaman telah berganti. Hari-hari telah berlalu. Vannila JS terus berkembang dan semakin modern. Banyak sekali fitur-fitur dari jQuery yang bisa kita lakukan di Vannila JS dengan cara yang lebih mudah. Pun, dari sisi kompabilitias browser, tidak ada masalah berarti. Bahkan dengan Vannila JS, kita bisa mendapatkan performa yang jauh lebih cepat.

Pada bagian selanjutnya dari tulisan ini, akan dimuat contoh kasus yang bisa kita lakukan dengan Vannila JS tanpa memerlukan bantuan dari jQuery.

Vanilla vs JQuery

Komunitas vannila js telah membuat situs khusus yang didedikasikan untuk menjelaskan bahwa kita tidak membutuhkan jQuery. Situs tersebut memuat berbagai macam contoh kasus yang bisa kita selesaikan dengan vannila js tanpa perlu jQuery. Situs tersebut bernama You Might Not Need jQuery;

Berikut adalah beberapa contoh tersebut:

Query Selector

Query Selector berfungsi untuk mencari DOM tertentu dalam dokumen HTML.

jQuery

let buttons = $('nav button.clickable')

Vannila JS

// ambil hanya satu Node
let button = document.querySelector('nav button.clickable')

// ambil semua Node
let buttons = document.querySelectorAll('nav button.clickable')

Event Listener

Event listener adalah bagian penting untuk membangun interaksi pengguna dalam situs kita.

jQuery

let buttons = $('nav button.clickable')

buttons.on('click', function (ev) {
  alert('Tombol diklik!')
})

Vannila JS

let buttons = document.querySelectorAll('nav button.clickable')

buttons.forEach(btn => {
  btn.addEventListener('click', ev => alert('Tombol diklik!'))
})

Climbing the tree

Terkadang kita ingin mengambil

// ambil hanya satu Node
let button = document.querySelector('nav button.clickable')

// ambil semua Node
let buttons = document.querySelectorAll('nav button.clickable')

jQuery

let form = $(emailInput).closest('form');

Vannila JS

let form = emailInput.closest('form');

Kesimpulan: Apakah anda masih membutuhkan jQuery?

Dengan jQuery, hidup kita menjadi lebih sederhana. Kita bisa memanipulasi DOM dengan cara yang sangat mudah. Kita bisa melakukan DOM query, kita bisa memanipulasi class, event listener, bahkan kita memiliki fungsi

// ambil hanya satu Node
let button = document.querySelector('nav button.clickable')

// ambil semua Node
let buttons = document.querySelectorAll('nav button.clickable')

Akan tetapi, zaman telah berganti. Hari-hari telah berlalu. Vannila JS terus berkembang dan semakin modern. Banyak sekali fitur-fitur dari jQuery yang bisa kita lakukan di Vannila JS dengan cara yang lebih mudah. Pun, dari sisi kompabilitias browser, tidak ada masalah berarti. Bahkan dengan Vannila JS, kita bisa mendapatkan performa yang jauh lebih cepat.

Terlebih lagi berbagai macam komunitas telah meninggalkan jQuery. Katakanlah seperti Bootstrap 5, AdminLTE, dan Laravel Dusk. Ini memperkuat sinyal bahwa jQuery perlahan tapi pasti, akan ditinggalkan.