Denny Depok IT Blog

Setelah dirilisnya source code Purefect Desktop, banyak yang mengalami kesulitan dalm instalasi code yang memang ditujukan untuk review awal. Oleh karena itu, saya menulis tutorial penggunaan fasilitas dasar Purefect Desktop mulai dari instalasi, pemakaian sampai pembangunan aplikasi diatas Purefect Desktop. Jadi terus pantau blog ini untuk perkembangannya (he..he..he.. jadi ngiklan gini…)

INSTALASI DIATAS XAMPP

Berikut ini saya tampilkan langkah-langkah menginstall Purefect Desktop diatas XAMPP. Pertimbangan saya, banyka developer PHP yang menggunakan paket ini. Tapi Bukan berarti paket yang lain gak bisa ya, tapi cuma perlu penyesuaian dikit.

Langkah pertama, tentu anda perlu install XAMPPnya dulu, bisa anda dapatkan di http://www.apachefriends.org/en/xampp.html. Untuk tutorial ini saya menginstall XAMPP ke “c:\xampp”. Jadi kalo anda mengintal ke folder lain harap menyesuaikan. Setelah anda menginstall XAMPP maka kalau anda buka older “c:\xampp\htdocs” maka akan terlihat seperti :

Kemudian download Early Access Code di sini (ambil yang compressed source untuk instalasi)
Kalau anda ekstract zip Early Access, maka akan berisi beberapa file dan sebuah folder yang bernama “www”. Kopi isi folder www ke folder “c:\xampp\htdocs” sehingga isi folder anda akan terlihat seperti :

Langkah selanjutnya adalah buka file “c:\xampp\htdocs\klorofil\conf\klorofil_purefect_Setting.conf”, ubah isinya sehingga terlihat seperti :

Kemudian buka file “C:\xampp\apache\bin\php.ini”, kemudian pastikan baris dibawah ini di uncomment, sebab secara default Purefect Desktop memakai PDO dengan SQLlite.

Setelah itu restart XAMPP khususnya apache. Kemudian buka browser (FireFox ato IE), dan buka ke “http://localhost”. Maka seharusnya anda akan melihat :

Masukkan user/password standar yaitu

User : admin

Pass : admin

Maka anda akan masuk ke Purefect Desktop sebagai berikut :

Demikian langkah instalasi singkat Purefect Desktop. Kalau ada pertanyaan bisa dikirim ke

denny[at]korofil.org

atau YM ke

denny_depok

Setelah pembangunan (dan banyak restrukturisasi ulang), Klorofil Project memulai fase pembangunan terbuka Purefect Desktop. Untuk tahap awal ini tim Klorofil membuka kesempatan untuk developer dan user Indonesia yang tertarik untuk mencoba dan mereview awal aplikasi dan kode Purefect Desktop. Untuk mendownload silakan klik disini. Sedangkan untuk rilis resmi, version control dan teknis lainnya sedang dipersiapkan oleh Reza Iqbal
Sebagai perkenalan bagi yang baru mengenal Purefect Desktop, berikut data-data Purefect Desktop.

1. Apakah Purefect Desktop Itu ?

Purefect desktop adalah lingkungan desktop yang berjalan diatas web. Tujuan dari web desktop ini adalah menyediakan lingkungan yang lengkap sehingga pembangunan aplikasi web menjadi lebih mudah, cepat, bagus dan menyenangkan. Selain itu Purefect Desktop menyediakan fasilitas-fasilitas advance sehingga aplikasi web bisa kaya seperti layaknya aplikasi desktop, tapi tentu saja dengan semua kelebihan yang dimiliki oleh aplikasi web.

Obsesi utama dari pembangunan Purefect Desktop adalah menyediakan desktop online sehingga semua orang dapat mengakses aplikasi dan data yang dimilikinya dimana saja, kapan saja dan dari komputer (dan peralatan lain) mana saja selama masih terhubung ke jaringan. The Net is The Computer, dan komputer kita hanya jendela kecil untuk fasilitas lengkap dalam jaringan.

2. Berapa Harga Purefect Desktop ?

Free, jadi enjoy :D.

Purefect Desktop di lisensi berdasarkan Common Public License v1.0. Lihat file LICENSE.TXT untuk lisensi secara lengkap atau kunjungi http://www.klorofil.org/legal/cpl-v10.html

3. Kenapa Purefect Desktop Di-Open Source-kan ?

Karena kami menganggap software dasar yang dipakai banyak orang seperti Purefect Desktop (dan OS, Database, WebBrowser dan Office Suite) tidak seharusnya ditutup kodenya. Karena seharusnya kita bersama sebagai pengguna bisa mengembangkan bersama-sama untuk kemajuan bersama dan kesejahteraan bersama.

4. Apakah Klorofil Project Itu ?

Klorofil Project adalah project open source yang bertujuan menyediakan framework pembangunan perangkat lunak terbuka yang feasible untuk dipakai dalam lingkungan Enterprise. Maksudnya dari feasible adalah mudah dipergunakan dan berperformansi tinggi untuk dipergunakan dalam lingkungan yang terdistribusi dan mempergunakan data yang relatif besar.

5. Apa Hubungan Saltanera dan Klorofil Project ?

PT. Saltanera (http://www.saltanera.com) adalah sponsor utama dari Klorofil Project. Sementara ini seluruh anggota Klorofil Project adalah staff dari PT. Saltanera.

6. Bagaimanakah Saya Mendapatkan Support ?

Untuk sementara bisa mengunjungi :

- Website Utama Klorofil Project, http://www.klorofil.org
- Blog Denny Depok, http://denny.klorofil.org

Atau mengajukan pertanyaan lewat email ke :
- Denny Depok (denny[at]klorofil.org)

7. Bagaimanakah Saya Bisa Ikut Berkontribusi ?

Untuk sementara bisa mengirimkan saran, permintaan atau bug report ke :
- Denny Depok (denny[at]klorofil.org)

Beberapa ScreenShot Purefect Desktop :

Login Form

Purefect Desktop di FireFox

Purefect Desktop di Internet Explorer

TaskBar Model Baru

FlazTalk Messenger (dengan conference)

Desktop Setting

Control Panel

User Managment


Program Managment

Logout

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). 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.

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).

Read more

Sekali-kali mo bahas yang sedikit ilmiah

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.

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 :

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 :

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

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);