Wednesday, January 28, 2009

Gears - WorkerPoolAPI

WorkerPool API memungkinkan aplikasi web menjalankan kode JavaScript di bagian background, tanpa mem-blok eksekusi halaman utama script.

OverView
Dalam satu waktu operasi intensif web browser, seperti operasi I/O atau perhitungan yang berat, dapat membuat UI tidak responsif. API worker pool menjalankan operasi di bagian background, tanpa memblok UI.Script yang mengeksekusi dalam Worker Pool tidak akan memicu dialog “Unresponsive Script”.

Permission
API membutuhkan user permission. Jika anda ingin merubah default-dialog, anda dapat memanggil google.gears.factory.getPermission()secara eksplisit.
Contoh:


// main.js
var workerPool = google.gears.factory.create('beta.workerpool');
workerPool.onmessage = function(a, b, message) {
alert('Received message from worker ' + message.sender + ': \n' + message.body);
};
var childWorkerId = workerPool.createWorkerFromUrl('worker.js');
workerPool.sendMessage(["3..2..", 1, {helloWorld: "Hello world!"}], childWorkerId);




// worker.js
var wp = google.gears.workerPool;
wp.onmessage = function(a, b, message) {
var reply = message.body[0] + message.body[1] + "... " + message.body[2].helloWorld;
wp.sendMessage(reply, message.sender);


Details
Isolasi Kode dan Data
WorkedPool berprilaku seperti sekumpulan proses, daripada sekumpulan thread. Worker tidak membagikan eksekusi state apapun. Merubah sebuah variable dalam satu worker tidak akan menggangu(tidak mempengaruhi) worker manapun. Dan membuat worker, tidak secara otomatis menurunkan kode script dari parent nya.
Anggota dari WorkedPool berinteraksi satu sama lain, hanya melalui pengiriman satu objek pesan.


Batasan
Worker tidak memiliki akses ke DOM(Document Object Model), objek seperti document dan window hanya berada pada halaman utama. Ini adalah konsekuensi dari si worker tidak mau berbagi execution-state.

Walaupun begitu, worker memiliki akses ke semua fungsi-fungsi JavaScript built-in. Kebanyakan method-method Gears dapat juga digunakan, melalui sebuah variable global, yang didefinisikan: google.gears.factory. (terkecuali LocalServer file submitter, yang membutuhkan DOM). Untuk fungsionalitas yang lain, worker dapat meminta halaman utama untuk membawa request.

Usage Pattern
Untuk memahami bagaimana menggunakan API WorkerPool, mari kita lihat contoh berikut:

Urutan Inisialisasi
  1. Kode JavaScript(“parent” –nya si worker) menggunakan google.gears.factory untuk membuat sebuah WorkerPool wp.
  2. Parent mengindikasi ke mana pesan harus pergi dengan men-setting wp.onmessage. Hal ini dilakukan sebelum memanggil createWorker(), untuk memastikan tidak ada pesan yang hilang.
  3. Untuk setiap worker yang baru(“child” worker)
  • Parent memanggil wp.createWorkerFromUrl()dengan URL yang mengembalikan keseluruhan script yang akan dimiliki oleh child.
  • CreateWorkerFromUrl()dengan cepat mengembalikannya dan parent tetap terus berjalan.
  • Secara parallel, child mengambil kode script-nya dan menjalankannya dalam satu waktu. Selama waktu ini, child harus menge-set onmessage handler nya, pada variable global google.gears.workerPool yang telah didefinisikan sebelumnya.

Komunikasi
Worker mengirinkan pesan satu sama lain, dengan menggunakan sendMessage().Anggota manapun pada WorkerPool dapat berkomunikasi dengan member manapun.
Setiap pesan yang terkirim memicu onmessage handler penerima(receiver). Event dari pesan, ditangani layaknya event JavaScript lainnya. Secara particular, pemrosesan disisipkan antar halaman dengan cara yang sama, disana terdapat antrian event, dan event handler selanjutnya tidak dipanggil sampai event sebelumnya kembali.

WorkedPool bukan sebuah singleton. Satu halaman dapat menginstansi banyak WorkerPool, dan masing pool ini terisolasi satu sama lain. Hal ini memungkinkan banyak alat pada sebuah halaman, contohnya menggunakan API WorkerPool tanpa takut bertabrakan.

Bagaimana script mengetahui worker ID yang mana mengirmkan pesan kemana. Ada 2 cara umum, yaitu :
  1. Membuat parameter kedua ke onmessage, yang berisi ID worker pengirim. “dengkuran” worker yang tujuannya untuk mengeksekusi request secara tidak serempak(asynchronously), akan terus menggunakan method ini, merespon kapanpun worker membuat request dengan membabi-buta.
  2. Menggunakan nilai yang dikembalikan oleh createWorker(), yang merupakan ID dari worker yang baru terbentuk. Worker yang tujuannya adalah untuk mengkoordinasi task-task(biasanya kode “utama” aplikasi JavaScript) yang akan sering menggunakan method ini. ID dapat dikirimkan ke, dan digunakan oleh, anggota WorkPool manapun, tapi ini jarang dibutuhkan.

Cross-OriginsWorkers
Worker dapat di-load menyeberangi asalnya dengan menggunakan method createWorkerFromUrl(). Worker diload meyeberangi asalnya, cara ini berjalan dalam konteks security dari asal dimana mereka di-laod. Hal ini dapat digunakan untuk mengizinkan pengendalian komunikasi melalui halaman-halaman dalam asal(origin) yang berbeda.

Untuk membuat Gears mengeksekusi cross-origin workers, ada beberapa batasan:
  • Worker harus dijalankan dengan content-type application/x-gears-worker
  • Kode worker harus memanggil google.gears.workerPool.allowCrossOrigin()
Ketika allowCrossOrigin()dipanggil, cross-origin worker dengan otomatis menurunkan permission dari asal(origin) pemanggil nya.

Untuk melihat struktur class dan method nya dapat dilihat lebih lanjut di: http://code.google.com/apis/gears/api_workerpool.html

Berkenalan dengan AJAX

Perkenalan
Ajax telah mengubah cara user berinteraksi dengan halaman web. Setelah sekian lama para pengguna web frustasi dengan paradigma redraw-refresh pada aplikasi web tradisional, yang mengambil keseluruhan isi pada halaman web dari server. Hal ini menyebabkan user kehilangan posisi scroll pada halaman web. Aplikasi ajax memiliki karakteristik untuk meng-update halaman dengan smooth meng-update bagian tertentu pada halaman web, sehingga tidak mengharuskan keseluruhan halaman web di-load kembali. Referensi dari tulisan ini dapat anda dapatkan dari "ASP .NET AJAX in Action"

Apa sih AJAX itu?
AJAX(Asynchronous JavaScript and XML) merupakan upaya atau pola pembangunan web yang menggunakan client-side scripting untuk bertukaran data dengan server. Upaya ini memungkinkan halaman dapat di-update secara dinamis tanpa menyebabkan keseluruhan halaman di-refresh. Sebagai hasilnya, interaksi antara user dan aplikasi tidak terganggu dan terus berlanjut. Beberapa anggapan menyatakan kalau pencapaian ini merupakan bagian dari teknologi dan bukan sebuah pola. Nyatanya, ini merupakan kombinasi pengunaan teknologi dengan cara yang kreatif :D.

Teknologi ini bukan hal yang baru. Teknik asynchronous yang men-load isi dari web dapat ditemukan semenjak Explorer 3 (juga dikenal sebagai masa Jurassic web development) melalui elemen IFRAME. Kemudian, ketika Explorer 5 memperkenalkan XMLHttpRequest ActiveX object, yang memungkinkan pertukaran data antara client dan server melalui web browser scripting languages. Sebagai catatan, remote scripting sebagai perintis jalan tebentuknya AJAX. Sebelum XMLHttpRequest object, remote scripting memungkinkan browser bertukar informasi dengan server.

Bahkan ketika objek XMLHttpRequest diperkenalkan lebih jauh melalui aplikasi Outlook Web Access, ajax tidak begitu terkenal. Sampai akhirnya, Google mempopulerkan teknik ajax melalui google map.

Komponen-komponen AJAX
Sebagaimana telah disebutkan sebelumnya, pola pemprogaman ajax yang terdiri dari sekumpulan teknologi membawa kepuasan pada user dengan cara yang imajinatif. Berikut ini merupakan pilar utama pola pemrograman dan cara mereka berperan :
  • JavaScript, merupakan scripting language yang umumnya menambahkan inter-aktifitas ke halaman HTML. JavaScript pada dasarnya menggunakan bahasa pemrograman C secara bebas, JavaScript merupakan bahasa scripting yang paling populer dan didukung oleh hampir keseluruhan browser. Aplikasi AJAX merupakan built in JavaScript.
  • Document Object Model (DOM), mendefinisikan struktur dari halaman web sebagai sekumpulan objek yang dapat diprogram yang dapat diakses melalui JavaScript. Dalam pemrograman AJAX, DOM digunakan untuk menggambarkan kembali (re-draw) porsi halaman web secara efektif.
  • Cascading Style Sheet (CSS), menyediakan jalan untuk membuat tampilan visual dari elemen-elemen halaman web. CSS digunakan dalam aplikasi AJAX untuk memodifikasi tampilan luar dari user interface secara interaktif.
  • XMLHttpRequest, memungkinkan client-side scripting untuk membuat sebuah HTTP request. Ajax menggunakan objek XMLHttpRequest untuk membuat asynchronous request ke server dengan menolak merefresh keseluruhan halaman atau postback.
Sebagai catatan, nama objek XMLHttpRequest bisa menyesatkan karena data dapat ditransfer dalam bentuk XML atau format text-based lainnya. Framework ASP.NET AJAX bergantung pada sebuah format JavaScript Object Notation(JSON) untuk menirimkan data ke dan dari server.

Dalam penerapan ajax, anda dapat menganggap JavaScript sebagai perekat (lem) yang mengikat semuanya. Ketika data dibutuhkan, objek XMLHttpRequest digunakan untuk membuat request ke server. Ketika data dibutuhkan, DOM dan CSS digunakan untuk meng-update interface browser user secara dinamis.

Asynchronous web programming
Huruf A dalam Ajax merupakan kependekan dari asynchronous, ini merupakan kunci prilaku dalam pola pemrograman Ajax. Asynchronous berarti tidak serempak atau tidak terjadi pada waktu yang sama. Untuk lebih memahami ini, mari kita coba contoh sehari-hari. Ketika anda pergi ke toko kopi starbucks dan berjalan ke kasir sambil membawa pesanan anda. Kasir menandai gelas kosong dengan detail pesanan anda dan lalu menempatkannya ke dalam antrian. Antrian dalam contoh ini, secara harafiah merupakan sekumpulan gelas kosong yang merepresentasikan sekumpulan order yang menunggu untuk dipenuhi. Proses ini memisahkan(decouple) kasir dari orang-orang yang mempersiapkan minuman. Dengan cara ini, kasir dapat terus berinteraksi dengan pelanggan, sementara pesanan sedang diproses pada waktu yang berbeda –secara asynchronous. Pada akhirnya, starbucks dapat meningkatkan produksi dan memuaskan customer.