Javascript: Google Closure Library vs jQuery

Bahasa pemrograman Javascript adalah salah satu fitur utama, bahkan termasuk salah satu yang utama di dalam dunia web development saat ini. Di era yang katanya 3.0 ini boleh dibilang hampir semua web developer memakai Javascript untuk membuat tampilan web mereka lebih dinamis dan interakitf.

Berbagai macam library Javascript pun bermunculan untuk mendukung hal tersebut. Dan tentu saja, yang paling fenomenal adalah jQuery, pernah dengar? jQuery sebenarnya berawal dari sebuah library sederhana yang digunakan untuk mempermudah proses selecting elemen DOM pada website. Tapi kemudian library ini berkembang hingga hampir seluruh proses manipulasi DOM dapat dilakukan dalam jQuery. Mulai dari mengubah atribut, menambahkan CSS style, melakukan AJAX request hingga yang paling keren membuat animasi.

Tak ayal, library ini menjadi populer dengan sangat cepat. Bahkan bisa dibilang lebih terkenal dari Javascript itu sendiri. Banyak web developer mengatakan mereka belajar tentang Javascript justru setelah beberapa lama menggunakan jQuery. Sampai-sampai ada jargon “too much jQuery” atau “there’s jQuery for that” yang menyindir fenomena penggunaan jQuery secara berlebihan untuk perintah-perintah sederhana yang sebenarnya bisa dilakukan di Javascript biasa.

Ironis memang, tapi apa yang dilakukan jQuery memang sebuah terobosan yang sangat memudahkan hidup. Kalau Anda pernah menggunakan vanilla Javascript alias Javascript mentah tanpa embel-embel library apapun, menggunakan jQuery memang serasa di surga. Bagi yang pernah mencoba membuat request AJAX dengan metode XmlHttpRequest mentah pasti paham. Apalagi hingga beberapa tahun lalu implementasi Javascript masih belum standard di browser-browser utama. jQuery menyediakan semua fitur yang secara syntax lebih mudah dipahami dan dijamin dapat berjalan di hampir semua browser. Ditambah lagi dukungan plugin-plugin yang begitu besar (sampai-sampai terasa overwhelming) untuk fitur-fitur tambahan. Nikmat Tuhan mana lagi yang kau dustakan?

Tidak ada yang salah memang dalam menggunakan jQuery. Tapi pernahkah kita berpikir berapa persen “kekuatan” jQuery yang benar-benar kita butuhkan? Ada yang bilang jQuery itu ibarat mobil balap bermesin super kencang, dengan stiker dan paintjob berkilau di seluruh body, full dengan perangkat musik extra keras, serta dilengkapi mode 4WD untuk dipakai di jalanan off-road. Tapi kemudian mobil itu cuma kita pakai untuk berangkat ke kantor yang jaraknya tidak begitu jauh. Overkill, istilahnya.

Beberapa “gerakan” anti-jQuery pun bermunculan, salah satunya website “MicroJS” yang menyediakan library-library kecil dengan size di bawah 4 KB untuk dipakai sesuai kebutuhannya saja. Saya termasuk salah satu yang jengah dengan jQuery overuse tadi. Tapi yang menarik perhatian saya sebagai alternatif jQuery adalah library ciptaan Tuhan Google Yang Maha Tahu: Google Closure Library.

Apa itu Google Closure Library? Dasarnya library ini tidak jauh berbeda dengan jQuery, ia juga menyediakan fungsi-fungsi umum Javascript dengan syntax yang lebih mudah. Mulai dari manipulasi elemen-elemen DOM sampai fitur untuk request AJAX. Standar. Tapi yang menjadi nilai lebih Closure adalah bahwa library ini hanya bisa digunakan untuk proses development. Kalau mau digunakan untuk di level produksi, Anda harus meng-compile script buatan Anda menggunakan tools tambahan Google Closure Compiler.

Mengapa proses compile itu menjadi nilai lebih? Karena di dalam proses tersebut, hanya fungsi-fungsi Closure Library yang Anda pakai sajalah yang akan dimasukkan ke dalam hasil file akhir. Fungsi lain yang tidak dipakai akan dihiraukan oleh compiler. File hasil compile juga sudah di-minify sedemikian rupa hingga size-nya biasanya tidak akan lebih dari 40 KB. Bandingkan dengan jQuery yang 80 KB belum ditambah plugin-plugin serta script buatan Anda sendiri.

You pay what you used, istilahnya. Memang agak tricky dalam menguasai proses compiling itu sendiri. Tapi percayalah, hasilnya sebanding.

Teknik lain yang juga harus dikuasai adalah mencari solusi non-Javascript. Seperti contohnya dalam membuat animasi, dapat digunakan teknologi CSS3 yang sudah mendukung efek transisi. Jadi tugas Javascript hanya mengubah class-nya saja, proses perubahan tampilan dilakukan oleh CSS3.

Alasan lain mengapa saya jatuh cinta dengan Google Closure adalah independensinya. Tinggal meletakkan script hasil compile ke dalam “self-executing anonymous function” dijamin script akan berjalan tanpa terjadi bentrok dengan library lain.

Di kantor tempat saya bekerja saat ini, LintasMe, saya tengah membangun sebuah produk yang memungkinkan penyebaran artikel berbayar dengan mudah dari para advertiser ke publisher-publisher yang sudah bekerja sama. Salah satu trik-nya adalah dengan meminta para publisher memanggil kode Javascript yang bertugas untuk menyisipkan artikel dari pemasang iklan di tengah-tengah tampilan web mereka secara native. Di dalam kode ini terdapat satu fungsi yang menyesuaikan tampilan artikel dengan style masing-masing website, sehingga tidak ada kesan norak atau style yang bertabrakan dengan style web publisher. Nah, di sinilah tantangan untuk Closure.

Awalnya saya menggunakan jQuery untuk proses ini. Saya pikir hampir semua website publisher pasti menggunakan jQuery sehingga saya cukup memanggil fungsi-fungsinya saja. Tapi terjadi masalah, tidak semua publisher menggunakan versi jQuery yang up-to-date sehingga penggunaanya tidak bisa maksimal karena script tersebut bersifat global dipakai di semua website publisher.

Me-load paksa jQuery versi terbaru juga tidak bisa berjalan baik. Ada saja plugin di publisher yang tidak kompatibel. Ditambah lagi hal itu mengharuskan visitor men-download 2 versi jQuery yang size-nya lumayan besar. Waste of bandwidth. Oleh karena itulah, saya butuh satu library yang independen dan ber-size relatif kecil agar tidak membuang-buang bandwidth pengujung.

Dan Closure menjadi jawabannya. Fungsi yang disediakan cukup andal, meski tidak se-ekstrim jQuery yang super mudah. Hal-hal semacam selector yang menjadi keunggulan jQuery juga sudah bisa dihandle dengan CSS3 selector. Satu hal yang agak menjadi sandungan kecil adalah kompatibilitas, beberapa fungsi Closure tidak bisa berjalan di browser-browser lama, macam IE8 ke bawah. Tapi toh, workaround-nya juga tidak begitu susah. Dan lagian siapa pula yang masih pakai IE8?

—

Kesimpulan postingan ini adalah, jangan terbuai dengan kemudahan yang ditawarkan jQuery. Pelajari apa yang sebenarnya terjadi di belakang layar jQuery dan pelajarilah vanilla Javascript serta library-library lain yang tak kalah handal. Ada yang pernah menggunakan PrototypeJS? Boleh di-share pengalamannya?

BTW, penasaran dengan produk native ads LintasMe yang sedang dibuat? Tunggu tanggal mainnya yaa..