Denny Depok IT Blog

Ngomongin Klorofil Project dan dunia IT, dari perkembangan, gosip sampe teori konspirasinya :D

Archive for the 'JavaScript' Category

[ IDE ] Paralax : Parallel Computing Over Ajax

Paralax, parallel computing over ajax

Sebenernya ide ini dah lama, mungkin 2 ato 3 tahun lalu dah kepikiran. Sempet jadi kandidat tesis saya tapi abis itu dilupain gara-gara asik maen workflow :D. Trus daripada sia-sia, saya publish disini, siapa tau ada yang mo implement ato mo ngembangin lebih lanjut.

Ide awal gini, kan sekarang jumlah komputer yang terhubung ke internet dah banyak banget, buktinya IPV4 sampe habis. Nah kebanyakan, komputer yang terhubung ke internet itu keseringan idle, terutama komputer client yang cuma dipake untuk browsing, chatting ato nyari gambar dan video ****** (edited -red). Nah komputer-komputer client yang idle itu, walaupun disebt client, tapi rata-rata punya prosessor yang keren-keren, apalagi sekarang jamannya core duo ato lebih. Kan sayang banget daya komputasi yang tersedia berlimpah itu terbuang percuma.

Nah ide dari Paralax ini adalah gimana caranya orang-orang yang punya resource terbuang sia-sia tadi bisa nyumbangin resource komputasinya untuk kegiatan yang lebih berguna. Jadi diminta untuk ngejalanin program yang berguna, tapi gak terlalu menganggu kegiatan dia. Pasti dah pada mikir “Bukannya udah ada parallel computing dari dulu ?“. He..he..he.. emang sih udah ada, bahkan kayaknya udah mature banget. Tapi saya mo nekanin karakteristik dari pengguna-pengguna tadi yaitu :

1. Koneknya gak dedicated
Maksudnya kadang konek, kadang enggak. Ya tergantung maunya di user aja. Jadi sistem paralax ini harus bersikap pesimis, maksudnya gak berharap banget komputer client bakal konek terus. Trus juga harus clientnya yang minta duluan (ini programnya aja, bukan usernya ngelakuin manual), soalnya server kan gak tau kapan client mo online ato enggak.

2. Susah disuruh nginstall program

Maunya gak usah download-download langsung jalan aja. Jadi model paralel komputing lama yang mengharuskan user untuk download program host program paralel susah diimplementasiin sekarang.

3. Susah disuruh update program
Disuruh install aja susah, apalagi disuruh update program kalo misalnya ada perubahan perhitungan/algoritma. Makanya model paralel computing baru perlu diciptain.

Trus gimana cara kerjanya ? Langkah-langkahnya seperti ini :1. Programmer ngebuat 3 bagian program

Pertama program inisialisasi, yaitu program yang menggenerate job kecil-kecil yang nanti dikerjain sama client.
Kedua adalah program worker yang nanti didownload dan dijalankan sama client
Ketiga adalah program handler yang menangani event, seperti job selesai ato job gagal (timeout)
2. Programmer install program di Paralax server dan menjalankan program inisialisasi, maka job akan dicreate dan ditaro di stack job
3. User membuka alamat server Paralax menggunakan browser, misalnya ke http://paralax.org/chain_reaction.php
4. Page yang dibuka user mengandung script untuk mendownload program paralel computing trus juga minta job yang bisa dikerjain sama dia.5. Browser client jalanin script job dia, dan kalo udah selesai ngelapor ke Paralax servernya lewat ajax6. Paralax server trus manggil program event handler ngasih tau kalo ada job yang selesai7. Client trus bisa meminta job yang lain

Jadi intinya nanti user yang mo nyumbang resource komputasinya tinggal ngebuka web browser dan menuju ke alamat tertentu. Bisa juga scriptnya diembed ke page lain dengan menggunakan iframe. Dengan berjalan di web browser, kan user gak perlu install apapun, kan hampir semua OS ada browsernya. Lagian dengan teknik Ajax, bisa dibuat kalo misal ada update algoritma di modul worker, bisa update otomatis tanpa campur tangan user.

Tapi yang jadi masalah mungkin javascript kan lambat, ya emang sih, tapi namanya juga nyumbang :D (walau yang ini keren banget, nyumbang resource komputasi). Trus javascript kan ada timeout eksekusi script ? Tenang…. ini bisa diakalin dengan memotong script kalo udah beberapa waktu untuk interval sesaat dan dipanggil lagi pake settimeout. Tapi yang saya suka dari web browser kan kerjanya kayak sandbox, jadi dari segi keamanan gak masalah, gak kayak program paralel komputing lain yang harus diinstal, masalah keamanan pasti jadi perhatian banget.
Mungkin yang perlu dipikirin gimana cara mrogram yang enak, misal pake bahasa yang biasa aja, trus ada kompiler yang bisa ngebuat kode yang siap dijalanin di server (php/jsp/ato yang lain) dan di client (java script)

Aplikasi yang kepikiran sama saya :

1. Simulasi reaksi kimia dan obat
2. Simulasi cuaca

3. Ngecrack kode keamanan

4. Pemetaan genetik

5. Ngegambar film 3D

Ato apa lagi deh yang perlu komputasi amat banyak tapi kalo dari segi waktu emang gak harus cepet-cepet banget. Sebenernya semua sisi udah kepikiran sama saya, tapi emang dari segi waktu saya gak punya. Tapi kalo ada yang mo ngembangin dipersilakkan :D :D :D

5 comments

Grafik 3D Di Web

AutoBatik 3D on Web
Walau gaungnya gak sekenceng Ajax, usaha untuk menampilkan grafik 3D di web saat ini sebenernya mulai menunjukkan geliat yang cukup menarik untuk diamatin. Maksud saya bukan sekedar gambar 3D loh, tapi sistem grafik 3D yang interaktif, ya kayak digame-game 3D gitu deh. Sebenernya keinginan (ato obsesi malah) untuk menampilkan grafik 3D di web udah lama banget, mungkin ada yang masih inget sama VRML jaman dulu ?

Trus kalo emang udah lama kenapa baru mulai ribut-ribut sekarang ? jawabannya adalah dulu lingkungan yang tersedia untuk 3D di web feasible banget. Trus sekarang udah ? jawabannya belum :D :D :D.

OK gini deh saya mulai cerita dari VRML. Yang buat VRML sadar kalo projek mereka gagal, alasannya sih macem-macem, saya gak mau bahas disini ato malah debat kusir disini, tapi yang pasti makin lama suara VRML makin gak kedengeran. Melihat kenyataan tersebut, tim VRML mencoba untuk memperbaiki spek VRML agar dapat mengikuti struktur modern a.k.a XML, sehingga lahirlah X3D. Selain spek sintaks, X3d juga menambah kemampuan interaksi antara model 3D dengan lingkungan pemrograman yang diberi nama X3D SAI (scene application interface). Ya akhirnya model 3D dengan X3D ini bisa untuk membuat aplikasi 3D yang lumayan kompleks. Saya dah pernah buat aplikasi pake X3D, screenshotnya seperti gambar diatas itu. Gambar tersebut adalah gambar fraktal 3D dengan pendekatan LSystem.

Walaupun X3D punya banyak fitur, tapi gaungnya tetep gak kenceng, sampe nyoba membajak nama Ajax sehingga munculah Ajax3D seperti yang ada diweb www.ajax3d.org. Tapi tetep gak banyak yang tertarik, kalo dari analisa saya sih kebanyakan developer trauma dengan kegagalan VRML yang dulu sempet ngebooming banget tapi abis itu mati pelan-pelan. Menurut saya lagi ditambah kurangnya dukungan web browser (yang bagusnya sih otomatis include kemampuan X3d), trus apalagi belum ada plugin X3D yang bener-bener free ngebuat orang males make. Disuruh download plugin yang free untuk personal sebesar 5MB aja males, apalagi harus bayar kalo mo ngembangin aplikasi komersial untuk plugin yang performansinya gak begitu bagus.

Perkembangan lain dateng dari munculnya tag canvas di browser selain IE (firefox + opera tentunya, tapi google udah nyediain emulasinya untuk IE). Tag ini memungkinkan developer web unutk menggambar secara programming di dalam area canvas tersebut. Developer yang seneng maen grafik (termasuk saya :D :D :D) langsung excited banget untuk mengexploitasi fitur ini, dan tentu aja mulai berfikir untuk menampilkan grafik 3D dengan canvas tersebut. Dari percobaan saya untuk membangun 3D engine diatas canvas, hasilnya gak feasible banget :D :D :D, walau baru wireframe + shadding flat, untuk 100 surface aja dah lambat banget :D :D :D. Dari beberapa orang lain yang mencoba hasilnya gak jauh beda. Ya gimana lagi, canvasnya gak dioptimasi untuk pemrograman grafik yang rumit ditambah kecepatan javascript yang you know lah :P

Tapi sebenernya canvas memang sudah didesain untuk mengantisipasi grafik kompleks seperti 3D. Karena memang saat ini baru konteks 2D yang didukung, makanya ngebuat engine 3D manual pake javascript diatas konteks 2D seperti jamannya program DOS pengen nampilin 3D. Ada beberapa tim yang nyoba untuk ngebuat konteks 3D diatas canvas, minimal ada 2 yang udah saya denger, dari orang firefox dan orang opera. Tapi sayang kedua tim tadi memilih pendekatan yang berbeda.

Tim firefox mencoba mengembangkan dari OpelGL embedded, sedangkan opera mengembangkan dari model engine yang gak tergantung sama library 3D pipenya. Sebenernya sih keduanya ada keuntungannya, tapi sayang kalo gak sepakat. Tim opera berargumentasi kalo engine yangh gak tergantung library mudah unutk diimplementasikan diberbagai sistem sampe hardware seperti handphone. Kalo saya nempati diri sebagai orang manajemen, saya pasti ngedukung opera, ya kan enak sekali implementasi bisa buat hampir semua hardware. Tapi kalo sebagai programmer yang pernah maen-maen sama 3D, tim firefox tuh sangat benar sekali. Bukan apa-apa, kalo kita mrogram 3D, pasti ada aja yang harus kita buat sendiri, dan semakin low level (OpenGL kan langsung maen ke hardware) performansinya pasti lebih yahud. Lagian buat apa punya hardrware 3D bagus tapi gak bisa dipake optimal, ya tau sendiri lah, engine 3D kan dibangun berdasarkan ketersediaan hardware saat dibangun dan harus mengakomodasi banyak orang jadi mungkin gak optimal untuk kebutuhan tertentu.

OK deh, mungkin perlu waktu beberapa saat lagi sebelum canvas 3D didukung secara default di browser (firefox + opera ya, IE sih saya gak berharap banyak :D). Tapi percaya deh kalo tim-tim diatas akan menuntaskan tujuannya, untuk perkembangan yang firefox bisa dilihat di Canvas3D Forum Mozilla. Tapi sebenernya ada satu hal lagi yang belum dipegang sama tim-tim tersebut, yaitu matematika 3D. Pasti langsung banyak yang mikir kenapa harus khusus bikin untuk matematika 3D, kan tinggal bikin aja di javascript. Saya tau, saya tau. Tapi jangan lupa, kalo program 3D yang profesional tuh enggak ngitung matematika 3D secara programming standar, tapi make bantuan hardware. Ya kalo lupa saya bilangin deh, inget sama MMX/3D Now/SSE ? He..he..he.. emang gak banyak yang tau sih. Tapi intinya semua istilah tadi ngacu sama teknologi SIMD (Single Instruction Multiple Data). Maksudnya dengan sekali instruksi (jadi satu cycle CPU) bisa mengoperasikan perhitungan matematika terhadap beberapa data. Ya bayangin aja 3D kan maennya vektor yang berisi 3 data floating point, plus matriks 4×4 biasanya. Kalo pake programming biasa pasti prosesnya sebanyak datanya, tapi kalo pake SIMD cuma sekali jalan, asik kan ? Jadi mungkin objek Math-nya javascript harus dikembangin untuk operasi 3D dan matriks, tapi tentu aja mengeksploitasi MMX/3D Now/SSE. Nunggu ato harus saya sendiri yang buat ya :D :D :D

Walau banyak yang skeptis terhadap 3D di web seperti bilang buat apa, ya terserah mereka sih. Tapi saya yakin aplikasi 3D on web dimasa depan akan banyak banget. Kondisinya kayak gini deh, dulu orang nonton TV/Video ato denger radio/ nelpon lewan internet juga banyak yang bilang gak mungkin dan untuk apa, tapi setelah ada youtube + skype malah jadi makanan sehari-hari. Dan 3D di web, saya rasa bakan booming banget gak lama lagi, tinggal kita liat aja. Dari saya sendiri sih dah punya banyak benget ide 3D di web, tinggal ada yang mo sponsorin gak :D :D :D

2 comments

Menggunakan Ulang XMLHTTPRequest di IE

Halo.halo..halo…

Dah lama ya saya gak posting disini. Soalnya lagi sibuk (dalam arti baik dan buruk :D). Dah sebulan ini saya porting purefect desktop untuk bisa jalan di IE (ver >= 7 only, makruh hukumnya megang yang lama :D :D :D). Kesimpulan sementara saya, IE 7 lebih baik di beberapa bagian dibandingin Firefox 2 (wah orang microsoft seneng banget nih ada pendukung baru) –> mungkin statement ini perlu data pendukung, nanti ya saya posting percobaan tentang itu. Tapi pendukung microsoft jangan seneng dulu, mrogram di IE 7 tuh perlu banyak banget trik karena ada banyak bug kecil-kecil yang agak mengganggu. Salah satu trik yang diperluin adalah penggunaan ulang XMLHTTPRequest.

Pertama-tama, saya mo bilang kalo purefect desktop tuh salah satu aplikasi AJAX yang bergantung banget dengan XMLHTTPRequest. Jadi sepanjang berjalannya purfect desktop mungkin ada ratusan ato ribuan request yang dibuat melalui XMLHTTPRequest. Sebenernya sih bisa aja untuk tiap request dibuat satu object, kan sistem di javascript pake garbage collector dimana tiap object yang udah gak dipake langsung dibuang (teorinya..). Tapi masalahnya untuk create object tuh nyebabin performance hit yang lumayan (apalagi di IE yang pake ActiveX yang tentu aja prosesnya makin berat karena pernyiapan ActiveX — memori, container proses — lumayan lama).

Salah satu solusinya adalah penggunaan ulang object XMLHTTPRequest (sederhana banget ya solusinya, semua programmer juga tau :D). OK.. OK.. OK.. mungkin gak perlu banget saya posting tentang hal sederhana ini, tapi saya mo bagi pengalaman soal penggunaan ulang XMLHTTPRequest di IE yang perlu trik dikit, soalnya dikit banget referensi yang ngebahas tentang hal ini. Hampir semua site AJAX cuma ngasih contoh melakukan request di XMLHTTPRequest baru, gak pernah menggunakan ulang. Ya wajar sih, soalnya penggunaan ulang kan harusnya sama dengan request baru (di Firefox, Opera, Safari berjalan baik). Tapi di IE perlu trik dikit. Btw ini khusus asynchronous, kalo synchronous gak masalah kayaknya.

Kalo dilihat dari contoh penggunaan AJAX, mungkin penggunaan XMLHTTP Request mirip kaya gini (sorry IE only, yang lain minta bantuan om Google aja) :

// initialization –> biasanya onLoad

var http = new ActiveXObject(”Msxml2.XMLHTTP”);
http.onreadystatechange = requestReady;

function doRequest(url)
{
http.open(”GET”, url, true); // true buat asynch
http.send(”");
}

function requestReady()
{
if (htpp.readyState == 4)
{
// do domething
}
}

nah masalahnya di IE, kalo kita manggil untuk kedua kalinya, maka fungsi requestReady gak pernah dipanggil lagi. Loh padahal kan onreadystatechangenya dah diset ? masalahnya apa ?

Ternyata pas saya coba-coba, di IE, saat kita manggil :

http.open(”GET”, url, true);

semua property dari http direset ulang, makanya supaya bisa dipake ulang kita ubah kodenya sedikit jadi :

// initialization –> biasanya onLoad

var http = new ActiveXObject(”Msxml2.XMLHTTP”);

function doRequest(url)
{
http.open(”GET”, url, true);
http.onreadystatechange = requestReady; // set ulang property setelah open
http.send(”");
}

Coba lagi, pasti jalan :D. Ya emang gak penting banget sih postingannya, tapi lumayan lah ngebantu temen-temen yang pusing kenapa di IE XMLHTTPRequestnya agak beda prilakunya dengan browser lain.

No comments