Saya ingin mencapai 70 Kg

Untuk mengembangkan website di jaman web2.0, menjadi suatu hal yang terkadang mau tidak mau harus kita lakukan adalah bergulat dengan AJAX untuk meningkatkan interaktifitas dengan pengguna website.

Yang sering menjadi permasalahan developer adalah bagaimana mengatur komunikasi yang optimal dengan server melalui javascript agar pengguna dapat menikmati interaktifitas website secara maksimal.

Ajax Pattern
Ada kemungkinan bahwa sebuah permasalahan yang kita hadapi hari ini sudah pernah terpecahkan sebelumnya oleh orang lain. Lalu untuk apa kita membuang banyak waktu untuk development dengan memecahkan kembali masalah tersebut?
Istilah Design pattern adalah sebuah koleksi permasalahan yang pernah dipecahkan oleh orang lain sebelumnya. Untuk memangkas waktu produksi/pengembangan website di kemudian hari. Hal ini mulai dilakukan sejak 90an.
Kemudian Ajax lahir sekitar awal tahun 2005 dan developer mulai menulis Ajax pattern.

Predictive Fetch – an Ajax Pattern
Predictive Fetch adalah salah satu pattern yang sering ditemukan dalam kehidupan ajax-enabled web development sehari-hari.
Dengan berinteraksi dengan pengguna, di saat yang sama kita dapat memprediksi data apa saja yang akan kita perlukan untuk interaksi berikutnya, kemudian data itu kita ambil dari server melalui ajax.
Idenya adalah menampilkan sebagian dari content website kepada user untuk pertama kali, kemudian dengan ajax mengambil data yang [kemungkinan] akan ditampilkan pada halaman selanjutnya, sehingga pengguna tidak harus menunggu lama untuk menampilkan halaman selanjutnya.
Namun implementasi untuk ide sederhana ini tentunya amat sulit. Website [tentunya] tidak mengetahui halaman selanjutnya yang akan dituju. Kecuali, hanya ada 1 link pada halaman tersebut.

Example
Katakanlah saya ingin membuat website komik, dimana setiap halaman hanya memuat 4 gambar.
Predictive Fetch pattern akan sangat berguna pada website saya ini, karena saya dapat dengan mudah memprediksi ke halaman mana selanjutnya pengguna akan berkunjung.
Setelah halaman [N], lalu [N+1].
Oleh sebab itu, ketika pengguna website saya meminta halaman 123, maka dengan ajax saya mengambil data untuk halaman 124, menyembunyikannya di suatu tempat (bisa dengan menset properti css text-indent ke samping) lalu menampilkannya apabila pengguna meminta halaman tersebut.
Alhasil, pengguna saya akan merasa “ini website kok cepet banget yak ngeload gambarnya?”

Bagaimana contoh implementasinya?
Lihat video Joe Stagner di sini yang mendemonstrasikan pattern ini dengan asp.net. Dan beberapa contoh aplikasi web yang sering dikunjungi orang-orang, termasuk saya. yaitu:

GMail
GMail versi terbaru yang pertama kali mengimplementasikan pattern ini untuk membawa semua header inbox ke client pada saat halaman muka loaded. gmail
Gambar diatas saya ambil ketika sedang membaca sebuah thread. Emai yang terbaru ditampilkan isinya, sedangkan email yang sudah saya baca tidak dibawa pada saat saya ingin membuka thread tersebut akan tetapi datanya diangkut saat thread ini sudah muncul.
Masalah bandwidth muncul untuk melakukan prefetching email ke client dan Gmail tidak memberikan pilihan untuk mematikan fitur ini pada GMail.

Google Map
Google Map mengimplementasikan Predictive Fetch untuk mengemudikan peta. Buktinya adalah bahwa bila anda dengan lambat menggeser peta ke arah mana pun, anda tidak akan melihat bagian halaman mana pun kosong dan melakukan refresh. Namun jika anda menggeser peta dengan cepat, anda akan melihat bagian peta yang kosong melakukan refresh. Dapat disimpulkan bahwa gambar peta telah mencapai daerah di luar bidang dapat kita lihat, untuk mengantisipasi navigasi selanjutnya.

Fitur prefetch pada Firefox
Perlu ditekankan ini bukan tentang ajax-pattern lagi, melainkan sebuah fitur prefetching pada Firefox.
Firefox dapat membantu kita melakukan prefetching isi halaman web yang kita mungkin ingin lihat selanjutnya. Jika halaman ditandai seperti ini pada header

<link rel="next" href="berikutnya.html">

Firefox segera mengambilkan isi halaman berikutnya.html. So, ketika penguna ingin melihat link menuju berikutnya.html, firefox tinggal mengambilnya di Cache.
Silakan pergi ke link ini jika anda tertarik untuk mengetahui lebih detil tentang fitur ini.

Advertisements

Comments on: "Predictive Fetch [Prefetch] – an Ajax Pattern" (3)

  1. bos yang mau tukeran link

  2. hohoho.. saya ndak ngerti
    *garuk-garuk kepala*

    kirain bahas Ajax Amsterdam.. :mrgreen:

  3. wah, kebetulan saya lagi mengambil TA tentang Asynchronous Predictive Fetch pada ajax,

    terimaksih atas infonya 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: