Meskipun framework modern seperti Vue atau React jadi standar saat ini, banyak dari kita yang masih setia pakai jQuery karena praktis, terutama untuk project cepat atau integrasi sistem legacy.

Masalahnya, kalau dipakai sembarangan di Progressive Web App (PWA) atau mobile view, jQuery gampang bikin UI/UX terasa berat (laggy) karena boros di DOM manipulation dan main thread.

Supaya AI tidak menghasilkan kode jQuery yang bikin browser megap-megap, berikut adalah System Prompt siap pakai yang bisa kamu berikan ke AI, lengkap dengan panduan optimasinya.

📋 Prompt AI Siap Pakai (Copy-Paste)

“Tuliskan kode frontend menggunakan jQuery, tetapi pastikan kodenya dioptimalkan untuk performa tinggi agar tidak membuat UI PWA terasa lambat atau patah-patah (jank). Ikuti aturan ketat ini:

1. Dilarang keras melakukan DOM manipulation (.append(), .html(), dll) di dalam perulangan (for, forEach, $.each). Kumpulkan semua string HTML ke dalam satu variabel terlebih dahulu, lalu masukkan ke DOM sekali saja di luar loop.
2. Selalu cache selector. Jangan panggil $('#id') atau $('.class') berulang kali untuk elemen yang sama. Simpan terlebih dahulu ke dalam variabel dengan awalan $.
3. Untuk efek visual atau transisi, hindari menggunakan method animasi bawaan jQuery (.fadeIn(), .slideToggle(), dll). Gunakan addClass atau removeClass agar animasi sepenuhnya di-handle oleh CSS (memanfaatkan GPU Acceleration).
4. Jika membuat event listener yang sering dipicu (keyup, scroll, resize), wajib terapkan teknik debounce agar fungsi tidak dieksekusi terus-menerus setiap milidetik.”

Nikmati hasilnya web kamu jadi sat-set sat-set dengan jquery classical !