Bismillah. Alhamdulillah... (bisa kembali menulis). Pada artikel kali ini kita akan belajar memaksimalkan kinerja jQuery dengan memanfaatkan perpustakaan yang telah disediakan oleh Google atau di kenal juga dengan sebutan Google Libraries API. Sebelum membahas lebih jauh tentang perpustakaan Google API mari kita berkenalan dulu dengan API dan Google Libraries API.
Apa itu API?
API merupakan kependekan dari
Application Programming Interface atau Antarmuka Pemrograman Aplikasi yang merupakan seperangkat aturan tertentu dan spesifik yang mengikuti program perangkat lunak untuk saling berkomunikasi satu sama lain. API berfungsi sebagai antar muka (
interface) antara perangkat lunak yang berbeda dan memfasilitasi interaksi mereka, hal ini mirip dengan cara antar muka pengguna (
user interface) yang mampu memfasilitasi interaksi antara manusia dengan komputer. API dapat dibuat untuk aplikasi, perpustakaan, sistem operasi dan lain sebagainya, sebagai cara untuk mendefinisikan "kosakata" dan konvensi permintaan resource (sumber daya). Disini termasuk spesifikasi untuk
routines (rutinitas),
data structures (struktur data),
object classes (kelas objek), dan
protocol (protokol) yang digunakan untuk berkomunikasi antara program pengguna (
consumer program) dan program pelaksana (
implementer program) API. (sumber:
wikipedia.org)
Apa Google Libraries API?
Perpustakaan Google API atau Google Libraries API adalah sebuah jaringan distribusi konten (Content Distribution Network - CDN) dan arsitektur pemanggilan dari perpustakaan JavaScript lisensi terbuka (open-source JavaScript libraries) yang paling populer dan banyak digunakan di dunia. Dengan menggunakan metode Google API Loader google.load() ini akan mampu meningkatkan kecepatan aplikasi yang kita buat dengan memberikan akses kedalam daftar terbaik yang paling populer. Perpustakaan JavaScript lisensi terbuka yang tersedia diantaranya:
Google bekerja bersama-sama dengan para pemegang peranan penting didalam setiap pemegang usaha perpustakaan terkait dan menerima versi stabil terbaru yang telah dirilis. Setelah para pemilik perpustakaan tersebut memberikan salinannya maka Google berkomitmen untuk menyimpannya dan merilis pada hosting miliknya.
Perpustakaan API menerima berbagai keluhan dari para pengembang JavaScript ketika menggunakan koleksi perpustakaan yang tersedia. Google mempermudah kita dengan menyediakan host perpustakaan, pengaturan cache header yang benar, dan dengan tetap memperhatikan berbagai perbaikan bug terbaru. (sumber:
Google Libraries API)
Google API Loader
Cara ini sebenarnya pernah dibahas pada artikel "
Perpustakaan jQuery pada Blogger" tentang penggunaan jQuery Google API Load. Untuk dapat menggunakan berbagai script code jQuery maka terlebih dahulu website harus diintegrasikan dengan framework jQuery. Untuk mengintegrasikannya bisa dengan berbagai cara seperti yang pernah dibahas pada artikel diatas, namun pada kasus kali ini kita akan mencoba mengintegrasikan framework jQuery dengan metode Google API Load seperti dibawah ini:
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');
//]]></script>
Letakan kode diatas diantara tag <head></head>
Maksimalkan Kerja jQuery
Mulai keinti materi yang lumayan membuat pusing. Mungkin persiapkan dulu obat sakit kepala supaya agak ringan dalam berfikir. (hehehehe...)
Skenario I
Skenario-nya begini, bahwa kita akan membuat tiga buah efek yang berbeda dalam setiap event-nya. Misal; satu efek berpengaruh pada menu navigasi, satu efek berpengaruh pada gambar dan satu efek lagi berpengaruh pada tombol. Maka saya pun menuliskan script jQuery-nya seperti dibawah ini:
Script jQuery untuk memberikan efek pada gambar:
<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
});
</script>
Script jQuery untuk memberikan efek pada menu navigasi:
<script type='text/javascript'>
$(document).ready(function() {
$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});
});
</script>
Script jQuery untuk memberikan efek pada tombol:
<script type='text/javascript'>
$(document).ready(function () {
$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>
Ketiga kelompok script code diatas semuanya ditulis dengan benar dan dapat berjalan normal pada website. Namun, logikanya begini; seandainya diumpamakan bahwa kelompok script diatas adalah muatan yang harus di antar sampai sebuah tempat (tempat=framework jQuery). Kemudian kita menggunakan sebuah kendaraan (browser) sebagai alat transportasinya maka kendaraan ini akan bolak-balik sebanyak enam kali (3 kali berangkat dan 3 kali pulang) untuk mengantar ketiga kelompok script tersebut sampai tujuan. Jika dalam satu perjalanan dibutuhkan 1 detik maka kendaraan tersebut membutuhkan 6 detik waktu yang diperlukan untuk memuat seluruh script dari ketiga kelompok tersebut.
Skenario II
Karena dibutuhkan waktu yang cukup banyak untuk memuat keseluruhan muatan (script) agar sampai tujuan (framework jQuery) maka saya pun akan mencoba memadatkan ketiga kelompok script tersebut menjadi satu muatan, maka script akan menjadi seperti dibawah ini:
<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
}, function(){
$(this).fadeTo('slow',0.5);
});
$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});
$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>
Setelah kita mengumpulkan ketiga kelompok script diatas menjadi satu muatan maka kendaraan transportasi (browser) hanya akan mengirimkan script menuju ke tujuan (framework jQuery) hanya dengan satu kali pengiriman. Lebih cepat bukan? Sampai disini sebenarnya kita telah mampu membuat sekumpulan script jQuery yang lebih cepat di akses dari pada script sebelumnya dan browser pun hanya cukup satu kali mengirimkan script yang telah kita buat.
Skenario III
Adakah cara yang lebih cepat lagi untuk "mengantar" script-script jQuery yang kita buat menuju framework jQuery? Jawabannya "BISA". Metode yang digunakan bukan lagi "mengantar" namun "menjemput". Mengantar adalah pekerjaan yang cukup melelahkan bagi browser bahkan terkadang tidak semua script yang telah dibuat mampu diantar ke tujuan dengan baik, akibatnya akan ada script yang tidak mampu bekerja dengan baik pada website kita. (Pernahkah anda menemukan kasus seperti itu?) Semua script telah ditulis dengan baik atau bahkan hasil dari copy paste dari website lain yang sudah berjalan dengan baik, namun ketika script itu kita terapkan pada website kita, script tidak mampu bekerja dengan baik. Salah satu masalahnya adalah ketidaksempurnaan browser dalam "mengantarkan" script-script tersebut sampai ketujuan. Lalu bagaimana dengan "menjemput"? Kata menjemput bisa berarti bahwa pekerjaan dibagi menjadi dua, script-script yang ditulis pada website bukan lagi tugas browser untuk menyampaikannya ke framework, browser hanya bertugas menampilkan hasil dari proses eksekusi script-script yang ditulis. Lalu siapa yang "menjemput" script-script yang telah ditulis? Itu menjadi tugas Google API Loader.
Syntax dari Google API Loader untuk "menjemput" script-script jQuery mempunyai aturan spesifik yang wajib ditulis, yaitu:
google.setOnLoadCallback(function(){
//script jQuery disini
});
Script diatas digunakan untuk menggantikan fungsi script normal jQuery dibawah ini:
$(document).ready(function() {
//script jQuery disini
});
Sehingga penulisan script jQuery yang menggunakan Google API Loader menjadi seperti contoh dibawah ini:
google.setOnLoadCallback(function(){
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});
$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});
});
Dan total penulisan script jQuery dari mulai framework jQuery sampai dengan script jQuery Google API Loader akan menjadi seperti dibawah ini:
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');
google.setOnLoadCallback(function(){
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
});
$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});
$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});
});
//]]></script>
Kerja sebenarnya tidaklah seperti pada penjelasan skenario II dan skenario II, namun ini hanya bahasa penyampaian yang disederhanakan untuk memahami bagaimana script-script tersebut di eksekusi. Ma'af bagi para master jQuery yang merasa keberatan dengan perumpamaan diatas. Pembahasan teknis mendalam sebenarnya harus menyentuh debug dan debuger namun hal itu memang cukup rumit. Mungkin lain waktu Blogger Tune-Up akan mencoba menyuguhkan bahasan yang lebih teknis.
Tugas buat para sahabat blogger, apakah anda menemukan kejanggalan pada script diatas? Bandingkanlah script antara Skenario II dan Skenario III. Jika ditemukan kejanggalan script, itulah bug (kesalahan script) yang ditemukan pada saat sudah menggunakan Google API Loader.
Mari belajar dan berdiskusi. Happy Blogging :)
