ANALISIS DAN PERBANDINGAN AJAX DAN FLEX
Riza Dwi Arifiyanto¹, Kiki Maulana², Yanuar Firdaus A.w.³
¹Teknik Informatika, Fakultas Teknik Informatika, Universitas Telkom
Abstrak
Saat ini dunia web sedang dalam project menciptakan Rich Internet Application (RIA) untuk menggantikan aplikasi desktop. Rich Internet Application merupakan aplikasi web yang memiliki nilai konektifitas, user experience dan interaktifitas tinggi sehingga memiliki sifat mirip seperti aplikasi desktop tanpa perlu sering terjadi proses refresh halaman web.
Dalam proses pembuatan sebuah Rich Internet Application saat ini dapat digunakan 2 macam teknologi yang berbeda, yaitu teknologi ajax yang menerapkan protokol xmlhttprequest dan Flex yang menggunakan protokol AMF. Untuk teknologi ajax akan diambil 2 contoh penerapan yaitu ajax plaint text dan ajax JSON, sedangkan untuk teknologi Flex akan diambil Flex AMF. Tugas akhir ini memberikan simulasi perbandingan performansi kedua teknologi dalam melakukan loading data dalam jumlah sedikit, sedang dan banyak. Kemudian akan diuji pula reliability kedua teknologi terhadap sebuah skenario pengaksesan multiple user.
Flex AMF memiliki performansi lebih baik dibanding kedua teknologi ajax meskipun memiliki data transfer time yang lebih besar. Namun untuk nilai reliability Flex AMF memiliki nilai reliability paling buruk dibanding teknologi ajax.
Kata Kunci : Rich Internet Application, Ajax, JSON, Flex, AMF, web performansi
Abstract
At this time world web is on going project to build Rich Internet Application (RIA). Rich Internet Application is web application that has so high connectivity, user experience and interactivity values that just like desktop application characteristic without refresh web page.
In building a Rich Internet Application, today it is used 2 kind of technologies, ajax and Flex. As a sample ajax plain text and ajax JSON will be used and Flex AMF will be used for Flex. This final assignment simulate performance on loading few dan many datas and reliabilty by accessing using multiple concurrent user comparation.
Flex AMF has better performance than others though Flex AMF has the hightest data transfer time. But on reliabilty Flex AMF is worse than others.
2
Dasar Teori
2.1
Rich Internet Application
Rich Internet Application biasa disingkat sebagai RIA, merupakan aplikasi
berbasis web yang memiliki fungsi seperti aplikasi desktop namun dibutuhkan sebuah web browser untuk melakukan akses terhadapnya. RIA tidak seperti aplikasi desktop pada umumnya karena tidak memerlukan instalasi langsung terhadap aplikasi, namun hal ini juga tergantung pada aplikasinya, terkadang akan dibutuhkan komponen pendukung ActiveX, Java, Flash atau teknologi lain yang sejenis terinstal di komputer client agar dapat mengaksesnya dengan baik[15].
Aplikasi RIA yang dibangun saat ini memiliki banyak fitur menarik layaknya aplikasi desktop, diantaranya seperti kalkulasi, penanganan event, animasi, edit dan crop gambar, efek- efek visual, drag and drop, modal dan panel- panel. Seluruh fitur tersebut dibangun pada client side. Namun client side memiliki kelemahan, yaitu akan kembali ke state awal ketika dilakukan refresh
page karena ketika dilakukan refresh page, server side akan mengirimkan file-
file yang di-request oleh client side. Hal ini menyebabkan variable- variable hasil kalkulasi dan interaktifitas RIA lainnya akan hilang karena client side tidak memiliki system penyimpanan data permanen atau database seperti yang dimiliki
server side. Dengan batasan seperti ini, sebuah aplikasi RIA yang harus menjamin
konektivitasnya harus memastikan jalur komunikasi data client side dan server
sidenya berjalan secara asynchronous dan memastikan data yang dikirim sampai
dengan menggunakan protocol bersifat asynchronous yang dipilih aplikasi tersebut.
2.2
Apache Web Server dan PHP
Apache web server merupakan server yang menerjemahkan bahasa scripting PHP ke dalam bahasa HTML sehingga dimengerti oleh web browser yang terdapat pada sisi client.
PHP (PHP Hypertext Preprocessor) merupakan bahasa scripting yang berada pada sisi server. Bahasa scripting PHP disini digunakan sebagai perantara antara client Ajax dengan database ataupun Flex dengan database.
2.2.1 Symfony PHP Framework
Symfony merupakan salah satu dari sekian banyak PHP framework yang berfungsi untuk mempersingkat dan meringankan banyakya penulisan scripting PHP dengan library- library yang telah dimiliki. Symfony menerapkan design
pattern MVC (Model View Controller) sehingga bentuk perancangan sistem akan
mengacu pada bentuk design pattern ini. Symfony telah terintegrasi dengan ORM
(Object Relational Mapping) yang membantu memudahkan dalam pemodelan
Gambar 2.1 Diagram Workflow Symfony
2.2.2 Doctrine ORM
Doctrine adalah salah satu ORM PHP yang dapat diintegrasikan dengan Symfony selain Propel. Pada gambar 2-1, ORM mewakili blok data access dan
database abstraction. Fitur- fitur ORM yang terdapat pada Doctrine adalah
pembangunan database dari schema, pembangunan mapping model database berdasarkan schema, dump data, buka tutup koneksi database, doctrine query
language, pembangunan fitur CRUD (Create Read Update Delete) pada level
aplikasi dan migrasi database.
2.3
AJAX
Ajax adalah akronim dari Asynchronous JavaScript and XML. Ajax bukanlah sebuah bahasa pemrograman yang baru namun merupakan gabungan dari beberapa teknologi yang sudah ada seperti HTML, DOM, JavaScript, XML dan beberapa teknologi pendukung lainnya. Karakter utama dari AJAX adalah kemampuannya untuk mengirim dan menerima data dari web server tanpa
me-refresh keseluruhan halaman.
Ajax memungkinkan pengaksesan data dari server yang dikirimkan kepada
client di web menjadi lebih cepat daripada mekanisme biasa. Sebagai ilustrasi bisa
Pa client men keseluruha Sedangkan menerapk dilakukan pengirima ada saat me ngakses dat an respon d n pada ga an mekani di belakan an respon tid Ga Gambar 2.2 D enggunakan ta yang ada diterima ole ambar di sme Ajax, ng layar dan dak akan dir
ambar 2.3 Diag Diagram Aplik n mekanism a di server eh client sep bawah ad pengirima n akan diat rasakan ole gram Aplikasi
asi Web Konv
me pengirim maka clien perti yang te dalah gamb an respon d tasi oleh Aj h pengguna Web Menggun vensional man data b nt harus m erlihat pada baran aplik dari server jax engine a. nakan Ajax biasa, setiap menunggu sa a gambar di kasi web r ke client sehingga p p kali ampai i atas. yang t bisa proses
Meskipun ang dikirim atau diterim
disebut dengan Ajax, namun respon data y
a oleh client tidak selalu berupa XML. Sejauh ini telah ada tiga tipe data yang diketahui bisa dikirimkan menggunakan teknologi Ajax ini yaitu XML, plain text dan JSON. Berikut ini gambaran arsitektur Ajax pada umumnya.
JSON/XML/Plain Text
Web
Br
owser
HTMLs/.JS
YUI Libaries, JS Librarires Pars erController/ Request Handler
Application Server
Gambar 2.4 Arsitektur Ajax
client browser
file- f
berbasi
Pada sisi digunakan untuk melakukan interpretasi terhadap ile HTML dan .js. Javascript memegang peranan penting dalam mengendalikan segala aktifitas yang dilakukan pada client seperti animasi, efek visual, drag and drop termasuk berkomunikasi dengan server melalui object
xmlHttpRequest. Pada gambar diatas dijelaskan bahwa client berkomunikasi
dengan server melalui YUI atau JS library dengan menggunakan format file interchange JSON/XML.
2.3.1 JSON
JSON adalah format pertukaran data antar aplikasi yang ringan. JSON skan teks, mudah dibaca dan dapat merepresentasikan struktur data dan array asosiasi yang simple. JSON biasa digunakan di dalam aplikasi Ajax untuk mendistribusikan data dimana JSON digunakan sebagai salah satu alternatif dari format XML. Namun JSON tidak hanya bisa digunakan di dalam aplikasi Ajax saja namun juga bisa digunakan di berbagai bahasa pemrograman lainnya karena sudah disediakan fungsi - fungsi penerjemah data berformat JSON dalam berbagai bahasa.
Tipe dasar dari JSON adalah:
• Number (bisa berupa tipe data real, integer dan floating point), • String (ditandai dengan tanda petik ganda),
• Boolean (true atau false),
• Array (sekumpulan nilai yang terurut, dibatasi oleh tanda koma dan dilingkupi dengan kurung siku),
• Ob den • Nu bject(sekum ngan kurun mpulan nilai ng kurawal), dan kata ku ,
unci, dibataasi oleh komma dan dilinggkupi ull. 2.3.2 YU Pene scratch. P dan mem dalam pem YUI. YU memiliki memudahk UI Ajax Fr erapan tekn Penulis akan mpercepat pe mbangunan UI memiliki fitur datag kan untuk m amework nologi Aja n mengguna embuatan a n aplikasi b contoh- c grid yang melakukan p ax dalam t akan sebuah aplikasi Aj berbasis Aja contoh impl lengkap d pengukuran tugas akhir h Ajax frame ax. Ajax f ax adalah Y lementasi y dan fleksib n waktu. r tidak aka ework untuk framework Yahoo! Use yang mudah bel serta fi an dimulai k memperm yang digun er Interface h dipelajar fitur timer i dari mudah nakan e atau i dan yang 2.3.2.1 Y YUI merupakan untuk me dan mela datasource Data jumlah ko 2.3.2.2 Y YUI proses yan YUI DataTa I memiliki n kompone mbuat kon akukan pars e:
able dan Dat komponen en utama da eksi, meng sing data. taSource n yang ber alam pembe gendalikan o Berikut ini rnama datat entukan data object xmlh i beberapa table dan d agrid. Data httprequest, proses ya datasource source berf , menerima ang terjadi yang fungsi a data pada atable berfu olom dan row
YUI Logger I logger m ng terjadi da Gambar 2.5 ungsi untuk w dari data merupakan k an secara ot Diagram pros k membuat dan melaku komponen tomatis men
ses dalam Data
tampilan d ukan render YUI yang ncatat waktu asource datagrid den r. ngan menghhitung berfungsi u proses yan untuk men ng terjadi. ncatat
2.4
Flex
Flex merupakan sebuah framework untuk membuat website RIA yang dibangun oleh sebuah perusahaan software terkenal, Adobe. Flex digunakan untuk pengembangan dan deployment antar platform aplikasi internet yang berbasis pada platform Adobe flash. Adobe mencari cara untuk dapat mengadaptasi platform animasi flash pada aplikasi web. Flex menggunakan format MXML yang merupakan XML berbasis markup language untuk membangun dan membuat layout antar muka pengguna. File MXML inilah yang akan di-compile menjadi aplikasi flash. Interaktifitas Flex ditangani dengan penggunaan actionscript, bahasa core flash player yang merupakan standar ECMAScript. Flex memiliki semua komponen yang dimiliki script HTML. Berikut ini arsitektur dari pengembangan Flex.
Gambar 2.6 Diagram Environment Pengembangan Flex
Di dalam model multitiered, aplikasi Flex menempati presentation tier. Namun tidak seperti aplikasi yang berbasis halaman HTML, aplikasi Flex tidak membutuhkan loadingstate untuk melakukan pengaksesan halaman baru.
Pada gambar di atas dapat dilihat bahwa Flex membutuhkan flash player pada client side untuk dapat melakukan parsing dan rendering data actionscript yang dikirimkan dari server melalui HTTP, AMF, JSON atau RTMP. Dalam menjalankan fungsinya, flash player menerima inputan berupa bytecode, event dan control tag. Flash player memiliki ActionScript Virtual Machine 2 (AVM2) yang menerapkan Just In Time (JIT) compiler yang meng-compile inputan bytecode dan event yang menghasilkan display list untuk di render, sedangkan inputan control tag tidak perlu untuk di-compile langsung dapat masuk pada display list. Berikut ini arsitektur client side flex atau flash player.
Gambar 2.7 Flow chart proses parsing dan rendering pada flash player
Flex menyediakan beberapa cara untuk dapat berkomunikasi dengan sisi server secara asynchronous, yaitu http request, web service dan remote object. Penulis hanya akan menggunakan metode remote object untuk perbandingan karena metode remote object dianggap paling cepat dalam transfer data.
2.4.1 sfAMFPlugin
Plugin sfAMFPlugin merupakan salah satu plugin Symfony yang
mengadopsi sabreAMF library untuk menangani AMF request dari aplikasi Flex.
Plugin sfAMFPlugin menyediakan servis sebagai tempat pengolahan logik dan
gatewayyang mengubah data menjadi format data transfer binary.
2.4.2 AMF Protocol
AMF atau Action Message Format merupakan salah satu format pertukaran data yang digunakan oleh aplikasi Flex untuk dapat berkomunikasi dengan sisi server. Pertukaran data ini menggunakan Remote Procedure Call. Format AMF dianggap dapat memberikan performansi paling cepat dibandingkan dengan format lainnya pada Flex karena AMF merupakan action script object graph yang kemudian diubah formatnya menjadi bentuk binary yang padat. Pada implementasinya, seluruh live data yang baru di- fetch dari database akan diserialisasikan dan dikirimkan ke dalam gateway yang selanjutnya akan di deserialisasi kembali dan remote class yang berhubungan akan di instansiasi untuk melakukan pengecekan security dan memanggil class method yang sesuai dengan argumen. Serialisasi data yang akan dikirim akan dilakukan kembali setelah semua proses dilakukan. Proses serialisasi ini mengubah data- data tersebut menjadi binary yang selanjutnya akan dikirim ke client untuk kemudian di transfer ke client agar dapat dibaca oleh client. Pada client, data yang diterima dibaca oleh actionscript virtual machine yang dibawa oleh flash player, kemudian di render dalam bentuk gambar[1]. Berikut ini merupakan diagram flow chart proses remoting object pada flex menggunakan protokol AMF.
Gambar 2.8 Diagram Flowchart Remoting Object Flex
Tipe data yang didukung format AMF diantaranya[1]: • Tipe undefined (tipe ini akan dianggap null oleh AVM) • Tipe null
• Tipe boolean (true dan false) • Tipe integer • Tipe double • Tipe string • Tipe XMLDocument • Tipe date • Tipe array
• Tipe objek (hanya pada AMF3) • Tipe XML (hanya pada AMF3) • Tipe ByteArray (hanya pada AMF3)
2.5
Apache JMeter
Apache Jmeter merupakan sebuah aplikasi java desktop murni 100% yang didesain untuk melakukan load terhadap client atau server yang di tes[3]. Jmeter dapat digunakan untuk men-simulasikan sebuah proses load yang berat pada server, jaringan atau sebuah objek untuk di tes kekuatannya atau menganalisa
menggunakan ketiga teknologi berbeda dan dengan kapasitas user yang berbeda pula.
2.6
Parameter Perbandingan Performansi
Parameter- parameter performansi yang akan digunakan sebagai perbandingan adalah sebagai berikut:
2.6.1 Server Execution Time
Server execution time merupakan waktu yang dibutuhkan oleh web server untuk dapat memenuhi request yang diberikan dan mengembalikannya dalam bentuk response. Baik pada teknologi ajax maupun Flex memiliki nilai server execution time untuk melakukan load data dari database kemudian mengolahnya menjadi format data transfer yang diinginkan.
2.6.2 Data Transfer Time
Data transfer time merupakan waktu yang dibutuhkan untuk melakukan inisialisasi koneksi ke server kemudian melakukan transfer/ pengiriman data dari server kepada client.
2.6.3 Parse Time
Parse time merupakan waktu yang dibutuhkan oleh client untuk dapat menterjemahkan data compact yang telah dikirimkan oleh server sehingga dapat dimengerti oleh bahasa scripting client. Data compact tersebut dapat berupa format plain text, JSON atau binary tergantung pada teknologinya.
2.6.4 Render Time
Render time merupakan waktu yang dibutuhkan oleh client untuk dapat menampilkan data yang telah di-parsing ke dalam bentuk grid atau tabel.
2.7
Reliability
Reliability merupakan parameter ketahanan atau kekuatan suatu aplikasi web terhadap banyaknya akses yang di-request pada suatu saat tertentu. Dalam pembangunan aplikasi web, nilai reliability akan sangat dipertimbangkan karena aplikasi web dibuat untuk diakses oleh user yang sangat banyak. Reliability dapat dilihat dari persentase error terhadap jumlah keseluruhan request yang dikirim terhadap server dalam jangka waktu tertentu yang bersamaan. Semakin besar persentase error nya maka semakin kecil reliability- nya.
5
Kesimpulan dan Saran
5.1
Kesimpulan
Berdasarkan penelitian, pengujian dan analisis terhadap implementasi teknologi ajax plain text, ajax JSON dan Flex AMF yang telah dilakukan maka bisa diambil kesimpulan sebagai berikut :
1. Penerapan teknologi Ajax dan Flex dalam suatu aplikasi simulasi yang dapat mengukur server execution time, transfer time, render time dan parse time setiap teknologi dalam melakukan komunikasi dengan server dalam bentuk load live data teks dari database dapat diimplementasikan dengan mencatat waktu dan log setiap aktivitas aplikasi.
2. Ajax plain text memiliki kerja server yang paling rendah untuk menghasilkan file berformat plain text dengan ukuran paling kecil menjadikan Ajax plain text memiliki performansi paling baik untuk data berjumlah sedikit.
3. Ajax JSON memiliki format JSON yang lebih mudah di parser oleh client, namun memiliki kerja server dan ukuran file yang lebih besar dibanding Ajax plain text menjadikan Ajax JSON memiliki performansi lebih baik ketika data berjumlah besar.
4. Flex AMF memiliki kerja server paling besar dan harus melakukan pengiriman header 2 kali namun diimbangi dengan proses parse dan render yang sangat kecil menjadikan Flex AMF memiliki performansi paling baik ketika data berjumlah besar.
5. Reliability dapat diukur dengan menggunakan software Apache Jmeter dimana Flex AMF memiliki nilai reliability server paling buruk karena memiliki kerja server paling besar dan sebaliknya nilai reliability paling baik dimiliki oleh Ajax plain text.
5.2
Saran
Berikut ini saran – saran yang perlu dipertimbangkan untuk membuat aplikasi lebih lanjut :
1. Menggunakan framework Ajax lain yang dapat menangani JSON dan plain text dan memiliki fitur datagrid yang lengkap karena secara default Flex memiliki fitur datagrid yang lengkap karena YUI mungkin belum bisa mewakili seluruh framework Ajax yang ada.
2. Mengukur parameter performansi lain pada client side untuk fitur RIA lainnya yang tidak berhubungan dengan komunikasi server.
3. Mengukur nilai reliability dari sisi kompatibilitas Ajax dan Flex terhadap seluruh web browser yang ada.
REFERENSI
[1] Adobe System Incorporated . 2006 . Action Message Format – AMF3 . didownload pada tanggal 16 April 2009.
[2] Adobe Flex3 Developer Guide . http://adobe.com/Flex. didownload pada
tanggal 16 April 2009.
[3] Apache Software Foundation . 2007 . User Manual Jmeter
[4] Crockford, Douglas. 2007. JSON and Browser Security. http:/yuiblog.com. didownload pada tanggal 3 Maret 2008.
[5] Fowler, Martin, David Rice, Matthew Foemmel, Edward Hieatt, Robert Mee, Randy Stafford . 2002 . Pattern of Enterprise Application
Architecture .
[6] Hadlock, Kris. 2006. AJAX for Web Application Developers. Sams Publishing. United States of America. Didownload pada tanggal 30 April 2008.
[7] Hall, Marty. 2008. AJAX: The Basics.
http://www.courses.coreservlets.com. Didownload pada tanggal 16 Juni 2008.
[8] Hewitt, Joe. 2007. AJAX Debugging with Firebug. http://www.ddj.com. Diakses pada tanggal 16 Mei 2008.
[9] Herrington, Jack dan Emily Kim. 2008 . Getting Started with Flex 3 . http://adobe.com/Flex . didownload pada tanggal 16 April 2009.
[10] JSON.org: Introducing JSON. diakses pada tanggal 3 Maret 2008.
[11] Marinescu, Floyd dan Stefan Tilkov. 2006. JSON VS XML as a data
interchange format. http://www.infoq.com. Didownload pada tanggal 3
Maret 2008.
[12] Masykur, Ahmad. 2007. Penerimaan Data JSON melalui AJAX. http://masykur.web.id. Didownload pada tanggal 3 Maret 2008.
[13] Masykur, Ahmad. 2008. JSON VS XML. http://masykur.web.id. Didownload pada tanggal 3 Maret 2008.
[14] Wikipedia.org. JSON. Diakses pada tanggal 3 Maret 2009.
[15] Wikipedia.org. Rich Internet Application . Diakses pada tanggal 3 Maret 2009.
[16] Yahoo! . 2009 . YUI Cheat Sheet . http://developer.yahoo.com/yui . didownload pada tanggal 16 April 2009.
