Dalam dunia pengembangan web yang terus berkembang, sebuah perdebatan hangat kembali muncul mengenai kelebihan menggunakan JavaScript murni dibandingkan dengan framework populer seperti React, Vue, atau Svelte. Diskusi ini berpusat pada pola yang disebut Writing JavaScript Views the Hard Way, yang menganjurkan manipulasi DOM secara langsung menggunakan JavaScript murni alih-alih mengandalkan lapisan abstraksi yang disediakan oleh framework.
 |
|---|
| Repositori GitHub untuk "Writing JavaScript Views the Hard Way," menyoroti proyek penting dalam perdebatan antara JavaScript murni versus framework |
Daya Tarik Pengembangan Tanpa Framework
Banyak pengembang dalam komunitas mengekspresikan antusiasme untuk meninggalkan framework dan beralih ke pendekatan JavaScript murni. Mereka menyebutkan manfaat kinerja yang signifikan, debugging yang lebih mudah, dan koneksi yang lebih langsung dengan platform web. Seorang pengembang membagikan pengalaman terbaru mereka membangun aplikasi dengan TypeScript murni menggunakan Vite, mencatat bahwa mereka semakin mempertanyakan 'praktik terbaik' pengembangan front end setelah melihat manfaat dari pendekatan langsung. Daya tarik ini tidak hanya mencakup keuntungan teknis tetapi juga manfaat edukatif, karena bekerja langsung dengan DOM memaksa pengembang untuk memahami teknologi web yang mendasarinya secara lebih mendalam.
Saya tidak bisa menyimpulkan apakah ini dapat diskalakan, apa pun artinya, tetapi saya dapat menyimpulkan bahwa ada manfaat besar dari segi kinerja, ini menyenangkan, mengajarkan Anda banyak hal, debugging sederhana, memahami arsitekturnya sangat mudah, Anda tidak memerlukan gelar PhD untuk teknik rendering/memoization/dll.
Keunggulan "Menulis JavaScript Views dengan Cara yang Sulit"
- Performa: Performa hampir optimal dengan operasi yang tidak perlu minimal
- Tanpa dependensi: Tidak perlu mengupgrade atau mengelola pustaka eksternal
- Portabilitas: Kode dapat digunakan dengan framework apa pun
- Kemudahan pemeliharaan: Mengikuti konvensi ketat untuk organisasi kode yang dapat diprediksi
- Dukungan browser: Kompatibel dengan semua browser (dengan opsi kompatibilitas untuk browser lama)
- Debugging lebih mudah: Stack trace yang dangkal membuat pelacakan masalah lebih sederhana
- Pendekatan fungsional: Menggunakan fungsi biasa tanpa hierarki kelas yang kompleks
DOM sebagai Sumber Kebenaran
Pola menarik yang muncul dalam diskusi adalah menggunakan DOM itu sendiri sebagai sumber kebenaran untuk status aplikasi, daripada memelihara variabel status terpisah. Beberapa pengembang menganjurkan untuk langsung membaca dan menulis ke elemen DOM melalui getter dan setter alih-alih menyimpan variabel JavaScript terpisah yang perlu disinkronkan dengan DOM. Pendekatan ini menghilangkan kebutuhan untuk memelihara status di dua tempat tetapi menimbulkan kekhawatiran tentang potensi kerentanan terhadap ekstensi browser yang mungkin memodifikasi DOM secara tak terduga, atau tantangan dalam menangani status redundan di beberapa komponen UI.
Masalah Pemeliharaan
Meskipun pendekatan Hard Way menjanjikan kesederhanaan, banyak pengembang mengekspresikan skeptisisme tentang kemampuan pemeliharaannya dalam lingkungan tim dan aplikasi yang lebih besar. Pola ini sangat bergantung pada konvensi daripada struktur yang ditegakkan, yang dapat menyebabkan inkonsistensi ketika anggota tim yang berbeda berkontribusi pada kode. Seperti yang ditunjukkan oleh seorang komentator, pola desain ini hanya didasarkan pada konvensi. Ini berarti bahwa pengembang bebas untuk menyimpang dari konvensi kapan pun mereka mau. Ini berbeda dengan framework yang menegakkan pola tertentu melalui API dan alat mereka.
Manajemen Status: Tantangan Sebenarnya
Tema yang berulang dalam komentar adalah bahwa kesulitan sebenarnya dalam pengembangan frontend bukanlah membuat elemen DOM tetapi mengelola status dan menjaga UI tetap sinkron dengan status tersebut. Framework reaktif ada justru untuk memecahkan masalah ini. Ketika aplikasi menjadi lebih kompleks, melacak secara manual bagian UI mana yang perlu diperbarui ketika status berubah menjadi semakin sulit. Seorang pengembang mencatat bahwa masalah dasarnya adalah ketika beberapa bagian status berubah, semua UI yang bergantung pada status tersebut perlu diperbarui, dan memelihara fungsi pembaruan ini secara manual menjadi tidak praktis saat aplikasi berkembang.
Struktur Komponen "Hard Way"
- Template: Menggunakan
document.createElement('template')untuk struktur HTML - Fungsi clone: Membuat instance baru dari template
- Fungsi init: Menyiapkan instance komponen dengan:
- Variabel DOM (referensi ke elemen)
- Variabel state (nilai data)
- Fungsi pembaruan DOM (untuk mengubah elemen)
- Fungsi pembaruan state (untuk mengubah data)
- Fungsi update (untuk menerima props dari parent)
Pertimbangan Keamanan
Beberapa pengembang mengangkat kekhawatiran tentang potensi kerentanan keamanan dalam pendekatan templating yang ditulis tangan. Menggunakan template literal untuk menghasilkan string HTML dapat menyebabkan kerentanan cross-site scripting (XSS) jika input pengguna tidak di-escape dengan benar. Meskipun sanitasi sisi server dapat membantu, banyak yang berpendapat bahwa framework modern memberikan perlindungan yang lebih baik dengan menangani ini secara otomatis. Diskusi menyoroti betapa mudahnya pengembang dapat memperkenalkan masalah keamanan ketika menghasilkan HTML secara manual, terutama mereka yang belum mengalami era pengembangan web sebelum adanya framework.
Sebagai kesimpulan, meskipun pendekatan Hard Way menawarkan manfaat yang menarik untuk kasus penggunaan tertentu—terutama dalam hal kinerja, kontrol, dan kesempatan belajar—komunitas tetap terbagi mengenai apakah pendekatan ini cocok untuk aplikasi produksi dalam skala besar. Perdebatan ini pada akhirnya mencerminkan ketegangan antara kesederhanaan dan struktur, antara kontrol langsung dan kenyamanan yang diabstraksikan, yang telah menjadi ciri pengembangan web selama bertahun-tahun. Seiring browser terus berkembang dan menawarkan API native yang lebih kuat, percakapan ini kemungkinan akan terus berkembang juga.
Referensi: Writing JavaScript Views the Hard Way