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..
219 replies on “Javascript: Google Closure Library vs jQuery”
Lama ga ngesot kemari apa kabarnya bang..mantef nih share nya kali ini..hahhay
LikeLike
Menarik sekali artikel mengenai javascript, terima kasih telah berbagi artikel
LikeLike
sukses terus nya gans
LikeLike
Perkembangan kemajuan yang semakin cepat dan mudah, jquery jauh lebih mudah dan keren. hehe
LikeLike
informasinya sangat cocok buat referensi dan menambah pengalaman ni gan^^ makasih banyak deh semoga artikelnya semakin bagus dan dibaca oleh kalangan orang yang membutuhkan. salam blogger dan salam sukses.!!
LikeLike
I like your post. Thank’s
LikeLike
that’s so cool post. Thank”s
LikeLike
http://www.casiokita.com/
LikeLike
Terima kasih infonya gan. Ini sangat bermanfaat sekali
LikeLike
Thanks gang, aku akan berhati² lagi deh menggunakan java script nya
LikeLike
Makasih Ilmunya untuk pembelajaran kami Sob. Salam
LikeLike
makasih banyak mas bro atas tipsnya ya. sama infonya.
LikeLike
terima kasih untuk sharenya mas,,menambah pengetahuan baru
LikeLike
Google Closure sepertinya cukup menarik.
Sepertinya bakal bersaing ketat dengan Bootstrap-nya Twitter.
Bootstrap menjadikan mendesain web responsive menjadi mudah dan menyenangkan.
Dan library javascriptnya pun sudah dipecah-pecah sesuai keperluan (carousel, dropdown, modal, alert, dsb).
LikeLike
Pas banget, memang saya lagi belajar java script, makasih banyak ya..
LikeLike
artikenya sangat menarik
terimakasih mas pengetahuanku jadi bertambah.
LikeLike
Nice info master
LikeLike
Keren banget gan. Sangat menarik informasinya. Keren dah. Kereeeen!!
LikeLike
artikel ini sangat bermanfaat, terimakasih mas telah membari pemahaman
LikeLike
Makasih infonya gan sangat jelas sekali pembahasan java scriptnya
kunjung balik pusat sekolah
http://pusat-sekolah.blogspot.com/
LikeLike
sebagai pemula di dunia blgging aku seneng baca artikel2 yg membahas jQuery, cuma sayang masih mentok juga mungkin belum kesampaian ilmunya ;),
tapi yang menarik dan aku tunggu adalah kutipan dari akhir artikel ini yaitu ‘produk native ads LintasMe’. penasaran seperti apa?
LikeLike
terimakasih atas infonya
LikeLike
menarik sekali menambah minat untuk di baca 🙂
LikeLike
lumayan menambah pencerahan, terimakasih..
oh ya di tunggu produk native ads LintasMe nya pak
LikeLike
ok gan trims buat infonya 🙂
LikeLike
pembahasan yang sangat menarik dan masih banyak orang yang belum sadar akan hal ini
LikeLike
Info penting nie.
Nice share sob.
Terus berkarya
LikeLike
hehehe.. masih pusing ama yang ginian gan.. tapi mantep ulasanya gan , jadi tambah pengetahunya ane nih, terima kasih yah 😀
LikeLike
menarik sekali …
LikeLike
Nice post bro .
LikeLike
terima kasih atas informasinya gan:)
LikeLike
artikelnya sangat membantu say mas,, terima kaih ea,, 🙂
LikeLike
makasih
LikeLike
good banget,,,
emmm,,,question gan!
Apakah JS dan JQ mempunyai pengamanan pada suatu implementasi program PHP dan CSS?, dan jika ada, Bentuk Pengamannya menggunakan fungsi apa?.
thanks 🙂
LikeLike
dowload nya dimana?
LikeLike
sip gann
LikeLike
mkasih infonya mas,,
sukses selalu ya
LikeLike
terima kasih infonya
LikeLike
mantap banget kapan dong jangan kelamaan 😀
LikeLike
wah mantaps nih gan ilmunya bisa di jajal dulu heehhe
LikeLike
wah super sekali nih ilmu yang sangat bermanfaat
LikeLike
pengen sekali memahami jquery code yang sangat unik dan menarik, dan di luar dugaan saya, ternyata admin bekerja di lintas.me luar biasa…..
LikeLike
alhamdulillah sudah bisa menemukan blog ini, blog yang sangat menarik dan kreatif, ini sangat membantu dalam pengembangan blog saya di http://yulieono.blogspot.com
dan terima kasih atas di perbolehkannya saya ikut nimbrung di sini. wasalam
LikeLike
bagus google klo menurut aku
LikeLike
terimakasih untuk ilmunya…
LikeLike
coba gan…….
LikeLike
senang sekali bisa berkunjung ke sini kebetulan saya ketemu artikel yang saya cari di blog ini, mungkin kedepannya akan sering berkunjung ke blog ini untuk sekedar baca-baca artikel menarik lainnya
LikeLike
ini baru info yang tajam aktual nambah wawasan gue
LikeLike
terima kasih atas infonya.
LikeLike
terima kasih atas informasinya gan..nambah ilmu ane lagi neh gan
salam kenal ya gan..sukses buat agan
LikeLike