The Denny Depok

The Denny Depok

Gosipin IT Bareng Mas Denny Depok Yuk…

The Denny Depok RSS Feed
 
 
 
 

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.

Klorofil Explained - Part 1

Sambil merefactor kode klorofil/purefect untuk rilis yang sebentar lagi dilakukan, saya mo bagi motivasi, idealisme dan cerita-cerita dibalik project klorofil. Tujuannya sih supaya yang lain bisa ngerti dan ikut ngembangin, ato kalo tiba-tiba saya harus cabut dari project ini, mudah-mudahan project ini tetep bisa jalan.

Pada bagian ini saya mo nerangin tentang klorofil. Dibagian-bagian selanjutnya nanti saya akan menjelasin tentang purefect desktop, dan hubungan antar klorofil platform dan purefect desktop dan teknologi-teknologi spesifik yang ada klorofil seperti object serialization dan distributed object (televoke).

More »

The Good And The Evil Of InnerHTML

Sejak AJAX dan Web 2.0 jadi tren di Web Programming, ada beberapa bagian web yang sebenernya udah ada dari dulu jadi hal yang penting. Pertama tentu aja XML (loh bukannya X di ajax itu XML ?? - red), trus CSS, dan terakhir tentu aja InnerHTML.

Buat yang udah ngoding AJAX tapi belum maen-maen dengan 3 hal diatas, kasian deh kamu… :D Apa enaknya maen ajax tapi gak ngulik XML, CSS dan InnerHTML ??

XML dan CSS standar lah ya… termasuk juga teriakan-teriakan bete programmer web karena IE gak beres banget ngedraw CSSnya. Masa sih hack XML/CSS khusus untuk IE doang sedang browser laen pada sepakat !!! Maka dari itu, mulailah tinggalkan IE :D :D :D –> walau saya ngakuin IE 7 OK juga speednya, mungkin speednya mirip FireFox, tapi masih kalah sama opera. Kalo IE 6 kebawah, kelaut aja deh, uninstall trus delete permanen (bisa gak pake low level delete ? :D).

Disini saya mo ngebahas InnerHTML. Apaan tuh ? Sebenernya InnerHTML tuh fungsi DOM browser, jadi kita bisa ngubah-ngubah isi suatu div / span / layer on the fly, jadi tampilan bisa dinamik.

jadi contoh kita punya html kayak gini…

<div id="pesan">Pesan Awal</div>

nah setelah dapet response dari AJAX, kita mo ganti isi dari div diatas, cara yang paling gampang adalah dengan :

document.getElementById("pesan").innerHTML = ajaxResponse;

emang sih dari referensi yang ada, pemakaian innerHTML gak disarankan, kita disarankan menggunakan fungsi-fungsi DOM untuk ngubah isi suatu node, tapi kalo ngerubahnya ribet banget, misalnya jadi nambah kontrol baru (ini biasa terjadi di purefect desktop), pemakaian fungsi dom berlebihan banget, maksudnya programmernya udah resign duluan sebelum programnya selesai :D :D :D

Makanya dengan pemakaian innerHTML, penambahan node baru jadi super gampang dan feasible untuk diprogram.

Tapi tunggu dulu, disamping kemudahan innerHTML, ada sisi gelapnya. Yaitu kalau anda melakukan set nilai ke innerHTML, maka proses yang dilakukan oleh browser adalah sebagai berikut :

1. delete node yang ada
2. parsing HTML yang baru di set
3. gambar sesuai dengan html baru

yang perlu diperhatiin adalah langkah 1. Dengan sifatnya begitu, maka gak feasible kalo kita melakukan proses penambahan innerHTML seperti ini :

document.getElementById("pesan").innerHTML += newAddedHTML;

kalo misalnya innerHTML sebelumnya udah kompleks banget maka proses diatas akan memakan waktu, mungkin menimbulkan kesan browsernya hang –> inget semua browser cuma punya 1 thread untuk ngegambar HTML, jadi kalo ada yang mo buat browser multithread, saya terima kasih banget –> bisa jadi bahan skripsi nih !

Jadi gimana dong ? masa untuk yang udah kompleks kita harus kembali ke fungsi DOM sih. Ya gimana lagi, tapi saya punya tips dikit. Daripada semua pake fungsi DOM, saya membatasi redraw innerHTML. Caranya ?? gini kalo mo tau…

skenarionya, udah ada HTML yang kayak gini :

<div id="pesan">
<div id=”pesan1″>ini yang pertama</div>
</div>

trus kita mo rubah jadi kayak gini :

<div id="pesan">
<div id=”pesan1″>ini yang pertama</div>
<div id=”pesan2″>ini yang kedua</div>
</div>

nah tehniknya adalah sebagai berikut :

// javascript code nih

var node = document.createElement("div");
node.id = “pesan2″;

// set style seperlunya, contoh :
node.style.color = “#FF00FF”;
node.innerHTML = “ini yang kedua”;

document.getElementById("pesan").appendChild(node);

Jadi idenya adalah kita nambahin dulu kontainernya. Penambahan kontainer pake fungsi dom appendChild enggak menyebabkan redraw keseluruhan HTML. Nah setelah kontainernya ada, yang kita set innerHTMLnya adalah kontainernya, jadi yang redraw cuma isi kontainernya aja –> yang mana tentu aja masih kosong.

Kalo htmlnya cuma kayak diatas sih gak ngaruh, tapi kalo kamu mrogram aplikasi Web 2.0 yang kompleks kayak purefect, maka teknik diatas ngaruh banget.

Gitu deh tips dari saya. Kalo ada yang mo nanya-nya silakan aja, mo pos di komen ato langsung email ke denny(at)klorofil.org

OpenSource, Hasil Ato Proses ?

Jujur saya sering heran kalo mendenger orang ngaku sebagai orang opensource karena udah nginstall program opensource di komputernya. Soalnya, apa bener kalo kita dah nginstall program opensource trus kita dah jadi bagian dari gerakan opensource ?

Opensource tuh bukan soal memakai produk-produk opensource (cmiiw). Bagi saya gak ada bedanya antara orang yang memakai software propitery sama orang yang pake software opensource. Saya gak bilang kedua-duanya salah loh, tapi saya melihat keduanya seperti orang yang beli makanan. Buat orang yang mampu, bisa beli makanan yang lebih mahal yang memang sesuai selera dia, buat orang yang gak mampu mungkin pilihannya jadi lebih sedikit (dari segi harga) tapi enggak berarti semua yang murah gak enak dan gak sesai selera loh. Jadi gak ada bedanya, sama-sama berusaha memenuhi kebutuhannya, gak beda.

Nah kalo menurut saya opensource itu bukan pada level itu, tapi pada level komunitas yang ingin memenuhi kebutuhan bersama dengan cara saling menyumbang ide, pemikiran, dan tenaga untuk mewujudkan hal-hal yang jadi kebutuhan bersama. Mungkin gotong-royong masyarakat indonesia adalah bentuk awal dari opensource. Makanya kalo kita masih pada level nuntut dan cuma pake, kita bukan masyarakat opensource, tapi masyarakt konsumen biasa.

Bangsa kita yang (katanya) ingin menggalakkan opensource, mungkin harus me-redefinisikan lagi opensource dari kamus kita. Kita hanya berorientasi pada hasil, yaitu harus terbuka sourcenya dan harus gratis, padahal source yang sudah terbuka itu juga tidak pernah dibuka apalagi dikembangkan.

Opensource tuh soal proses, bagaimana sih kebutuhan kita bisa kita penuhin dengan saling bekerja sama, saling mendukung dan saling menguntungkan. Bagusnya lagi kalo saling bekerja sama tadi bisa mempercepat pemenuhan butuhan kita dan penemuan tehnik-tehnik baru yang mungkin bisa meningkatkan kesejahteraan bersama.

Jadi jangan sampe lagi ada menteri (yang katanya) informatika nanya opensource sudah memberikan apa :D mudah-mudahan menteri yang baru bisa lebih mengerti… (amin)

I’m Back ! (—> again :D)

He..he..he.. jadwal rilis mundur terus-terusan, maaf deh :D kemaren sibuk banget, ada kerjaan di saltanera dan di kampus (—> bohong banget, padahal aslinya males :D)

OK deh, kemaren emang agak kehilangan semangat, padahal dari saltanera udah ngasih insentif yang OK banget, mulai dari komputer yang jauh lebih keren (cpu + memori + layar + printer) mungkin lebih tepat jadi komputer maen game kali ya, tapi enggak kok, isinya cuma Windows, Office, Apache, PHP sama PhpDesigner. Ditambah pasokan perbekalan :D :D :D

Tapi sekarang I’M Back !!! mulai malem ini saya dah semangat lagi. Udah penuh dengan ide-ide baru yang pasti bakal ngejutin semua. So… sabar ya Boss !!!

Windows Service Dengan PHP

Kemaren saya nyari-nyari gimana bisa ngemulasiin Cronnya linux untuk diwindows. Solusi paling tepatnya tentu pake service-nya windows, soalnya kalo pake service bisa start program walaupun usernya belum login, trus kalo usernya logout programnya tetep jalan.

Hasil nyari-nyari diinternet akhirnya diputusin buat sendiri aja :D (abis enggak ada yang muasin sih) Apalagi nemu tehnik untuk membuat windows service dengan menggunakan PHP dari blognya Wez Furlong. Tehnik ini sebenernya udah cukup lama ada tapi referensi tentang penggunaannya masih sedikit banget, apalagi dalam bahasa indonesia. Karena menurut saya tehnik pembuatan windows service menggunakan PHP cukup penting, makanya saya ngebahas disini.
service_cron.PNG

Program windows service dengan PHP ngegunain model CLInya PHP (maksudnya PHP dirun langsung dari command prompt, bukan dari web server kaya Apache). Dalam implementasi, saya ngegunain PHP yang dipaket oleh WAMP 5 (sudah pake Apache 2 + PHP 5). Pertama, buka php.ini yang ada di :

c:\wamp\Apache2\bin

dan trus tambahin baris ini di bagian extention :

extension=php_win32service.dll

trus pastiin ada file :

c:\wamp\php\ext\php_win32service.dll

kemudian buat file cron.php di folder c:\wamp\www (posisi terserah sih, beda command jalaninnya aja nanti). isinya :

< ?php
if ($argv[1] == 'install')
{
win32_create_service(array(
'service' => 'purefectCron',
'display' => 'purefectCron',
'path'    => 'c:wampphpphp-win.exe',
'params'  => '-c c:wampApache2bin c:wampwwwcron.php run'));
}
else if ($argv[1] == 'uninstall')
{
win32_delete_service('purefectCron');
}
else if ($argv[1] == 'run')
{
chdir('c:wampwww');
win32_start_service_ctrl_dispatcher('purefectCron');
while (win32_get_last_control_message()!= WIN32_SERVICE_CONTROL_STOP)
{
echo('[' . date('c') . '] checking...');
// taro kode service disini
sleep(30);
}
}
?>

Kalo mau download, klik disini : cronphp.txt

Penjelasannya :

if ($argv[1] == ‘install’)
{

baris ini digunakan untuk mengecek parameter yang dipassing dari command line, bagian ini untuk proses install service.

win32_create_service(array(
'service' => 'purefectCron',
'display' => 'purefectCron',
'path' => 'c:wampphpphp-win.exe',
'params' => '-c c:wampApache2bin c:wampwwwcron.php run',
));

baris ini untuk mendaftarkan service dengan nama “purefectCron”. Service dan display boleh diganti, tapi saya saranin diisi dengan nilai yang sama.

path menunjuk ke exe dari PHP, saya gunain php-win.exe yang ada di c:\wamp\php

params adalah parameter yang akan dipassing ke php.exe saat menjalankan service.

-c c:\\wamp\\Apache2\\bin maksudnya adalah menggunakan konfigurasi php.ini yang ada di folder c:\wamp\Apache2\bin

c:\\wamp\\www\\cron.php run maksudnya php.exe menjalankan script cron.php yang ada di c:\wamp\www, dengan parameter “run”

else if ($argv[1] == ‘uninstall’)
{

baris ini untuk filter operasi uninstall service

win32_delete_service('purefectCron');

untuk menghapus service dari daftar service, parameternya adalah nama service yang sesuai dengan nama service/display waktu proses install.

else if ($argv[1] == ‘run’)
{

filter untuk proses ngejalanin service, bagian ini nanti yang dijalanin sama windows

chdir('c:\\wamp\\www');

Ganti working directory ke c:\wamp\www, maksudnya supaya kode selanjutnya berjalan di folder tersebut, jadi mirip sama kode web page punya kita.

win32_start_service_ctrl_dispatcher('purefectCron');

Baris ini untuk men-start servicenya, parameternya samain dengan nama service/display waktu proses install.

while (win32_get_last_control_message() != WIN32_SERVICE_CONTROL_STOP)
{

Kita looping selama belom di stop

writeln('[' . date('c') . '] checking…’);
// taro kode service disini
sleep(30);

Taro kode service anda disini, sebenernya gak masuk sense sih echoin string, tapi ini cuma contoh doang. Ubah kode diatas sesuai dengan kebutuhan service kamu.

trus untuk install servicenya, buat file :

c:\wamp\install.bat

yang isinya :

cd www
"../php/php.exe" -c ../Apache2/bin cron.php install
reg add HKLM\SYSTEM\CurrentControlSet\Services\purefectCron /V Description /t REG_SZ /d "Purefect Cron Daemon" /f
NET START purefectCron

kalo mau download, klik disini installbat.txt

Penjelasan :

cd www
"../php/php.exe" -c ../Apache2/bin cron.php install

Baris ini untuk jalanin cron.php untuk nginstall servicenya

reg add HKLM\SYSTEM\CurrentControlSet\Services\purefectCron /V Description /t REG_SZ /d "Purefect Cron Daemon" /f

Sebenernya baris ini optional, gunanya untuk mengeset description dari service (soalnya saya gak tau gimana ngesetnya dari php :D jadi manual aja)

NET START purefectCron

Baris ini untuk start jalanin servicenya

untuk uninstallnya, buat file :

c:\wamp\uninstall.bat

yang isinya :

NET STOP purefectCron
cd www
"../php/php.exe" -c ../Apache2/bin cron.php uninstall

kalo mau download, klik disini : uninstallbat.txt

Penjelasan :

NET STOP purefectCron

Kita berhentiin dulu sebelum uninstall

cd www
"../php/php.exe" -c ../Apache2/bin cron.php uninstall

panggil script cron.php, bagian uninstall.

Segitu aja penjelasan dari saya, kalo ada yang kurang jelas ato mau diskusi, bisa taro comment disini, ato kirim email ke denny(at)klorofil.org

Surat Terbuka Untuk Pemerintah & OpenSource Indonesia

Ass.Wr.Wb.

Pertama-tama perkenalkan nama saya Denny, salah seorang developer di proyek open source Klorofil (www.klorofil.org). Melihat perkembangan perdebatan tentang MoU Indonesia dengan Microsoft, saya merasa perlu untuk urun pendapat masalah tersebut sebab sepertinya keterwakilan pihak developer opensource agak kurang dalam perdebatan ini.

Pertama-tama saya ingin memberitahukan posisi saya sebagai orang yang setuju dengan MoU tersebut, sebab MoU itu sejalan dengan salah satu tujuan kami, yaitu lepas dari Jeratan Pembajakan. Tidak bisa dipungkiri sebagian besar komputer dipemerintahan indonesia berbasis Windows yang (mungkin) bajakan. Kalau pemerintah hendak membeli produk microsoft yang nyata-nyata sudah dipakai dan memberikan kontribusi untuk jalannya pemerintahan Indonesia saat ini, menurut saya itu adalah keharusan.

Tapi melihat debat antar pemerintah dan komunitas (yang mengatas namakan) opensource, menurut saya ada beberapa hal yang terlupakan :

1. OpenSource != Linux

Yap, walaupun linux mungkin produk opensource yang paling terkenal, tapi mohon jangan samakan OpenSource dengan Linux. Masih banyak produk OpenSource lain yang hebat bahkan mungkin secara sadar-tidak sadar melayani aktivitas IT anda selama ini seperti :

- Apache Web Server
- SendMail Server
- QMail Server
- Mozilla FireFox
- OpenOffice
- FreeBSD
- BIND Name Server
- PHP
- dan pendatang baru Java

2. OpenSource != Gratis

Gratis mungkin hanya fitur tambahan dari OpenSource, hal utama dari OpenSource adalah kebebasan berkreasi, pemunculan ide dan teknologi baru lebih cepat dan dalam jangka panjangnya mencapai kesejahteraan bersama.

3. OpenSource != Produk Hobi

Kalau IBM bermain dengan Eclipsenya, Novell dengan Linuxnya, Sun dengan Javanya apa masih bilang opensource produk hobi ? Apa pernah lihat keteraturan organisasi Apache & Mozilla ? OpenSource bukan ajang pembuktian kehebatan hacker-hacker, tapi lebih dari itu, gerakan untuk kemaslahatan bersama.

4. OpenSource == Pilihan Realistis

Saya bukan penentang closed source software, bagi anda yang mampu untuk membeli (secara legal) dan puas dengan posisi sebagai konsumen yang hanya menunggu inovasi dari vendor software (dan membayar lagi untuk tiap versi yang berisi inovasi tadi) saya persilakkan.

5. Masyarakat OpenSource Indonesia Harus Realistis

Yap, kita tidak bisa memaksa suatu pihak untuk pindah ke opensource kalau opensource belum bisa menyediakan kebutuhan-kebutuhan pihak tersebut. Sekali lagi, OpenSource adalah pilihan dan untuk tidak memakai opensource juga adalah sebuah pilihan yang harus dihormati.

Moga-moga saja bisa memberi masukkan. Kalau ada rekan yang ingin berkomentar, membantah atau berdiskusi lanjut, saya persilakkan untuk menghubungi saya ke denny (at) klorofil.org

————————-

Ada yang bisa bantuin forward-in ke sofyan jalil :D :D :D

Seleb IT dan Informatika (bukan pornomatika)

Saya punya cerita, lumayan lucu sih, tapi ngeselin juga :D Ceritanya begini, kemaren saya ketemu orang yang memang bukan orang IT. Dia nanya di bidang apa sih saya bekerja, ya langsung aja saya bilang saya bekerja di bidang IT. Mendengar jawaban itu kontan dia berkata “wah sama dong sama Roy Suryo”. Ya saya mengamini pernyataan dia, soalnya memang orang yang berkecimpung di dunia IT paling terkenal di indonesia ya memang mas Roy Suryo.

Awalnya sih saya enggak punya pikiran macam-macam, ya memang itu kenyataannya sih. Tapi omongan lanjutan orang tadi yang bikin sebel. Soalnya dia langsung bertanya “Gimana video YZ-ME kemaren ? Asli enggak ?” Asli BeTe banget !!! :( :(. Abis kesannya informatika itu cuma berhubungan dengan pornografi !!

Dengan agak malas saya menjawab, ya kemungkinan besar asli, kan belom ada yang bisa maenin file video kaya tehnik croping buat gambar. Paling juga nyari orang yang mirip, tapi iseng banget sih nyari orang mirip cuma buat bikin video panas :D lagian orangnya juga udah ngaku.

Melihat saya males ngejawab soal pornomatika, dia beralih ngomongin Handphone-handphone terbaru. Ya walaupun saya bukan gadget freak, saya ngebalas juga omongnya (dengan agak males juga-red).

Ada satu hal di kepala saya waktu ngobrol dengan orang itu, yaitu, Informatika di kepala sebagian besar orang Indonesia adalah pornografi dan handphone. Saya enggak nyalahin orang-orang itu, soalnya seleb-IT (selebriti-nya orang IT) yang muncul di media ngomonginnya cuma pornografi dan handphone. Sayang juga sih, padahal informatika tuh berisi banyak hal menarik yang secara langsung gak langsung mempengaruhi seluruh sisi kehidupan manusia modern, jadi bukan cuma pornografi dan handphone.

Tapi kan orang tau arti informatika dari orang-orang informatika yang ngomong di media kan, ya jadi memang salah kita juga, orang informatika, yang enggak banyak punya orang-orang yang bisa jadi corong untuk menunjukkan kepada publik apa sih informatika itu. Jadi kita perlu seleb IT-seleb IT lain untuk muncul di media. Kalo dibidang pornografi dan handpnone kita udah punya seleb-nya, mungkin perlu dibidang lain seperti jaringan, web beserta layanan-layanan yang tersedia, OS, software sehari-hari, hardware-hardware, gerakan OpenSource, software lokal dan bidang-bidang lain yang belum saya sebutin (tapi tetep menarik loh).

Jadi bayangin kalo seleb-IT di indonesia banyak mungkin nanti ada acara gosip khusus IT, misal cek and ricek edisi IT :D :D :D

Purefect Optimization (Bahasan Formal :D)

Sekali-kali mo bahas yang sedikit ilmiah :D

Purefect Desktop baru aja di re-release. Buat kamu yang mo nyoba purefect yang baru, bisa mengakses ke www.purefect.org. Dalam re-release ini yang baru adalah sudah dimasukknya beberapa teknik optimisasi untuk membuat purefect terlihat lebih cepat diloading. Buat yang sudah pernah nyoba purefect yang lama trus nyoba purefect yang di re-release, pasti ngerasa ada perbedaan besar dalam kecepatan loading. Ya mungkin masih enggak begitu bagus, tapi lumayan lah :D :D :D.

Disini saya mo ngebahas optimisasi yang sudah dilakukan secara lebih formal, supaya tehnik ini bisa dipake sama kamu-kamu yang perlu di proyeknya masing-masing (dan sekalian biar saya juga gak lupa :D).

Tehnik yang (telah dan akan) dipakai oleh purefect desktop adalah :

1. Minimalisasi HTTP Request

Dari pengalaman tim klorofil, hal yang paling berpengaruh dalam kecepatan loading adalah banyaknya request yang dilakukan browser ke server untuk menampilkan 1 page.

Maksudnya begini, misal kamu punya page yang perlu 5 image, 1 css dan 3 js file, maka banyaknya request browser ke server adalah 10 (1 untuk page, 5 untuk image, 1 untuk css dan 3 untuk js). Proses request adalah sebagai berikut :

  • Browser merequest page kemudian memparsing file htmlnya
  • Untuk tiap file yang dibutuhin (image, css, js) dilakukan HTTP request terpisah

Perlu diingat sesuai dengan spesifikasi HTTP, browser mendownload file pendukung maksimal 2 thread per page. Maksudnya dari 5 image tadi diatas, download dilakukan 2 image persatu waktu. Kemudian khusus untuk javascript, beberapa browser mendownload satu-satu untuk menjaga keterurutan kode.

Bisa dilihat kan bagaimana makin banyak HTTP request, makin lambat sebuah page diload. Yang paling berpengaruh tentu overhead request-response (yang dilakukan 2-2 :(). Oleh karena itu, meminimalkan jumlah HTTP request tentu aja sebuah ide yang sangat penting. Yang dilakukan di purefect :

a. Dekomposisi Javascript Kemudian Jadikan Monolitik

Maksudnya gini, usahain klasifikasikan kelas-kelas & fungsi-fungsi javascript berdasarkan kemungkinan perubahan. Jadi nanti kita bisa misahin antara yang gak akan berubah, yang jarang berubah dan sering berubah. Kemudian untuk yang gak pernah berubah, lebih baik dijadikan satu file besar aja, jangan terpisah. Yang jarang berubah diusahain sesedikit mungkin filenya (lakukan penggabungan sebanyak mungkin), yang sering berubah bebas. Tehnik ini nanti juga berpengaruh ke tehnik caching yang saya bahas dibawah.

b. Image Sliding & Image Sprite

Intinya sih gabungin beberapa gambar menjadi satu file. Image sliding cara kerjanya seperti ini, misal saya punya button dengan 3 state, mau pakai 3 gambar supaya kelihatan ada efek animasinya, nah kan ukuran gambarnya sama semua jadi saya bisa menggabungkan ke 1 file trus pake css posisi untuk membuat efek animasi.

Contoh file gambar :

Purefect Button

trus untuk state 1 pakai css :

style="{background: url(button.gif) no-repeat top left}"

untuk state 2 (dipake di event onMouseMove) :

style="{background: url(button.gif) no-repeat center left}"

untuk state 3 (dipake di event onMouseDown) :

style="{background: url(button.gif) no-repeat bottom left}"

Untuk image sprite, kita gabungin gambar-gambar menjadi satu file trus untuk menampilkannya pake css posisi dengan point.

contoh file 100×50, 1gambar 50×50 :

klorofil.PNG

Untuk nampilin gambar yang pertama :

style="{width: 50; height: 50; background: url(sprite.gif) no-repeat 0 0}"

Untuk nampilin gambar yang kedua :

style="{width: 50; height: 50; background: url(sprite.gif) no-repeat -50 0}"

dan seterusnya.

c. Connection KeepAlive

Idenya begini, kalau request dilakukan berulang-ulang maka ada overhead pembukaan koneksi socket antara browser dan server. Pembukaan koneksi adalah aktifitas yang memakan waktu dan resource server. Oleh karena itu kalau ada cara supaya permintaan yang berulang-ulang tersebut bisa hanya memakai 1 pembukaan koneksi pasti akan mempercepat proses download.

Untuk server apache tehnik ini bisa dilakukan dengan merubah setting berikut :

MaxKeepAliveRequests 0
Setting ini membuat semua request dijaga tetap tersambung, jadi bisa dipakai untuk request selanjutnya. Tapi jangan lupa untuk setting :

KeepAliveTimeout 15

Setting ini untuk menjaga koneksi yang sudah tidak request bisa langsung ditutup. Memang tehnik ini memerlukan akses ke httpd.conf, mungkin gak semua orang bisa melaksanakan. Untuk server lain cari sendiri ya :D

2. Compressing

Inti dari tehnik compressing adalah membuat file yang ditransfer sekecil mungkin supaya waktu transfernya lebih cepat. Yang mungkin dilakukan :

a. Usahain gambar dalam format GIF

gif sepertinya format yang mengkompress gambar paling baik, walau mungkin masalah warna terjadi pengurangan. Tapi kan enggak semua gambar kita perlu kualitas foto kan ?

b. Kalo pake jpeg, pake jpeg2000

jpeg 2000 melakukan kompresi lebih baik dari jpeg yang sebelumnya.

c. Turunin kualitas gambar (kalo bisa)

file jpeg dan png bisa ditentuin kualitas gambarnya, kalo bisa nurunin kualitas dalam batas yang masih ditoleransi, bisa menghemat byte file.

d. Hilangin whitepace di html, css dan javascript

whitespace (spasi, tab dan enter) enggak berpengaruh ke file-file diatas, kalo bisa dihilangin tentu aja menghemat byte yang perlu ditransfer. Tapi inget ada beberapa kasus di javascript yang gak bisa dihilangkan.

contoh

html asli :

body Text
html menjadi :

body text

css asli :

.control {
position: absolute;
left: 0;
top: 0;
font-family: Arial;
font-size: 8pt;
}

dijadikan :

.control {position: absolute;left:0;top:0;font-family:Arial;font-size:8pt;}

javascript asli :

for (var i = 0; i < 25; i++)
{
obj1.count(i);
}

dijadikan :

for (var i=0;i<25;i++){obj1.count(i);}
Tapi kalo dihilangin whitespecenya akan menyulitkan pembacaan kode selanjutnya, makanya pisahin antara kode pengembangan dan kode operasional.

kemudian di windows, enter adalah “\r\n” kalo bisa pakai “\n” aja, dibrowser diartikan sama aja

Selanjutnya, sehabis penghilangan whitespace biasanya menghasilkan kode seperti ini :

"satu "+" dua"

model ini bisa dioptimisasi jadi

"satu dua"

pertama menghemat byte, kedua menghemat proses jadi javascriptnya jadi lebih cepat.

e. Gunain variable sependek mungkin di javascript

misalnya kita pakai nama variable “TemporaryValue”, kalo diubah jadi “tmpVal” kan menghemat beberapa byte tanpa menghilangkan arti semantiknya.

Trus kalau ada kasus seperti ini :

this.button.setLeft(25);
this.button.setWidth(25);
this.button.setHeight(25);
this.button.setWidth(25);

bisa dirubah menjadi :

var o = this.button;
o.setLeft(25);
o.setWidth(25);
o.setHeight(25);
o.setWidth(25);

3. Caching

Caching adalah tehnologi yang paling sering disalah artiin sama web developer. Jadi banyak yang menganggap caching menyebabkan aplikasi web mereka jadi gak benar dan kehilangan kontrol terhadap akses ke web mereka. Padahal kalo aturan cache yang dilakukan browser, cache bisa menjadi tools yang sangat berguna bagi web developer.

Aturan cache yang dilakukan oleh browser :

a. file index (index.php / index.html) kemungkinan besar tidak dicache
b. bila di HTTP response ada “Cache-Control: no-cache” maka tidak dicache
c. bila di HTTP response tidak ada “ETag” atau “Last-Modified” tidak akan di cache
d. kalo request memakai method POST sebagian besar browser tidak akan mencache responsenya
e. kala di request dengan methos GET tapi ada query string contoh a.php?v=123 sebagian besar browser tidak mencache
f. SSL pasti tidak dicache

Jadi dengan menggunakan aturan diatas, kita membuat file yang jarang berubah untuk semaksimal mungkin bisa dicache di client.

a. image & css kemungkinan besar di cache

tapi kita bisa memastikan dengan setting apache :
ExpiresActive On
ExpiresByType image/gif “modification plus 1 year”
ExpiresByType image/png “modification plus 1 year”
ExpiresByType text/css “modification plus 1 year”

nb. menurut spesifikasi HTTP cache maksimal 1 tahun

b. js di cache, tapi untuk mengantisipasi perubahan kita memakai format nama file :

abc.ver1.js

jadi di htmlnya :

normalnya js akan dicache, nanti kalau ada perubahan di js, ubah nama filenya jadi :

abc.ver2.js

di htmlnya :

Kalau ada yang takut melakukannya dengan manual, maka bisa diotomatisasi dengan bantuan php :

nama file tetap :

abc.js

di html :

trus kita memakai rewrite engine apache, setting di httpd.conf :

RewriteEngine on
RewriteRule ^(.*\.)ver[0-9.]+\.(js)$ $1$2 [L]

mungkin ada yang sudah mengimplementasikan pake abc.js?ver=123, ternyata model tersebut tidak dicache oleh browser, jadi tehnik itu adalah tehnik yang sia-sia.

c. file php yang jarang berubah, untuk mencachenya bisa memakai :

Header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = “Expires: ” . gmdate(”D, d M Y H:i:s”, time() + $offset) . ” GMT”;
Header($ExpStr);

?>

d. Usahain gunain method GET untuk file yang jarang berubah

e. Gunain SSL seminimal mungkin

f. Kalo update file di server, update yang berubah saja

Sekian dulu dari saya mudah-mudahan bisa bermanfaat.

MOU Indonesia Dan Microsoft (lagi… :D)

Hmm… di detik lagi ribut lagi soal MOU Microsoft dan pemerintah Indonesia lagi. Ada yang bilang janggal, ada yang bilang ilegal ada yang bilang melanggar aturan, lucu, gak fair dll.

Wah saya gak mau ikutan ngomentarin deh, soalnya saya udah duga dari dulu, bahkan saya merasa pemerintah gak bakalan bergeming walau dikritik bagaimanapun. Ya mau gimana lagi dong, 99% kantor pemerintahan sekarang pake produk microsoft (bajakan 96% lisensi 3% :D) kalo mau pake produk laen (gak harus open source) pemerintah gak bakalan mau ambil resiko untuk melatih orang-orang untuk make produk laen tersebut.

Ya harus sadar dong, gimana sih kualitas kebanyakan pegawai pemerintahan. Udah bisa ngetik pake word aja sebenernya udah hebat banget. Bukan maksudnya ngerendahin loh, tapi itu kenyataan, soalnya saya udah pernah ngajarin pegawai, ngajarin word aja (yang harus diakui paling familier tampilannya) susah banget, apalagi pake produk lain.

Trus kalo ada yang bilang mau ngajarin, apa mampu ngajarin orang-orang kantor pemerintahan yang berserakan diseluruh indonesia ? Apa ada organisasi yang mampu dan bener-bener mau melaksanakan itu dengan waktu yang cepat dan biaya yang gak terlalu besar (jangan sampe sebesar biaya pembelian ke microsoft) ?

Itu baru soal pelatihan, belum yang paling utama PRODUKNYA !!! ada gak yang bisa menyediakan produk yang setara dengan microsoft ? yang bisa mengakomodari jutaan file yang terlanjur disimpan dalam formatnya microsoft. Mau bilang open office ? Yakin 100% bisa buka tanpa masalah ? trus ada gak yang bisa jamin permakaiannya, kalo ada error yang tanggung jawab siapa ? Ada organisasi yang bisa jamin ? kalo perorangan sih gak bisa berbuat apa-apa, kan orangnya juga masih kerja di perusahaan lain, trus kalo dia keluar kota gimana ? kalo sakit gimana ? itu yang perlu, ada organisasi yang berani memikul tanggung jawab super berat ini.
Tapi saya bukan orang yang pesimis, saya cuma mo bilang yang diperluin sekarang tuh konkritnya. Ya itu organisasi yang berani jamin semua yang dibutuhin pemerintah bisa dipenuhi (dengan segera - orang indonesia kan gak sabaran).

Nah boleh gak klorofil ngajuin untuk buatin yang pemerintah perlu (OS, office, database dll). Mungkin kasih 1 tahun untuk ngelengkapin semua dan biaya 1/4 aja dari yang ditawarin microsoft :D Boleh gak ? kalo boleh orang-orang klorofil berani gak ? (kalo saya berani :D yang laen gimana berani ? :D :D :D)