OPTIMASI PERFORMANSI AJAX DENGAN MENGGUNAKAN JSON

Seminar Nasional Informatika 2008 (semnasIF 2008) UPN ”Veteran” Yogyakarta, 24 Mei 2008

ISSN: 1979-2328

OPTIMASI PERFORMANSI AJAX DENGAN MENGGUNAKAN JSON Yanuar Firdaus Arie Wibowo1), Dana Sulistiyo Kusumo2), Annas Abdillah Marta3) 1,2,3) Departemen Teknik Informatika Institut Teknologi Telkom (IT TELKOM) Jl. Telekomunikasi No. 1, Terusan Buah Batu, Dayeuhkolot, Bandung 40287 E-mail: 3)[email protected], 2)[email protected], 3)[email protected]

Abstrak Web-based application development at this time concentrate or on the way to interactivity and response time closely to desktop application. AJAX (Asynchronous JavaScript and XML) is one of method to create a webbased application become more interactive like desktop application, with AJAX is possible for web not to reload full of one web page again from server but only part of information on page that requested, with the result is improvement of bandwidth usage. AJAX web application in connection with web server usually use XML (Extensible Markup Language) as data interchange format, but XML have redundancy in their data format, it have duplicated at tags (opening and closing tags) that cause less efficient and probably impact to AJAX performance. JSON (JavaScript Object Notation) is alternative data interchange format can be used in AJAX that has less redundancy than XML, it make JSON more lightly better than XML. Web performance it can be know from response time and bandwidth. Test result is showing that for large amount of data, AJAX performance with JSON is better than AJAX with XML but there are little different result from attribute that used in XML, test result for user access is showing same pattern with testing in single computer. Keywords: AJAX, XML, JSON, performance, response time, bandwidth.

1.

PENDAHULUAN Aplikasi web berbasis AJAX memiliki karakteristik respon yang diberikan oleh server adalah request yang diminta sehingga browser atau client tidak mendownload satu halaman penuh, namun hanya bagian tertentu saja sesuai dengan kebutuhan. Salah satu faktor yang memepengaruhi performansi adalah seberapa cepat request itu diparsing, sehingga dibutuhkan request dengan format pertukaran data yang efisien dan cepat dalam proses parsing tersebut. XML merupakan format pertukaran data yang umum digunakan dalam aplikasi AJAX namun hal ini bukanlah cara yang terbaik. XML memiliki sintaks yang komplek dan harus diparsing menjadi DOM (Document Object Model). Format pertukaran data selain XML yaitu JSON (Javascript Object Notation) yang merupakan bagian dari JavaScript sehingga parsing dilakukan oleh JavaScript tersebut dan memiliki sintaks yang lebih sederhana daripada XML. Secara spesifikasi JSON lebih baik performansinya daripada XML. Performansi suatu web dapat ditentukan dari berapa lama waktu yang dibutuhkan untuk mendapatkan respon yang diminta atau response time dan seberapa besar data itu dikirimkan dari server ke client atau pun sebaliknya. Penelitian dilakukan untuk menganalisis performansi dari aplikasi web berbasis AJAX yang mengimplementasikan XML dan JSON sebagai format pertukaran datanya. Selanjutnya dilakukan analisis perbandingan format data antara JSON dan XML serta pembuktian bahwa performansi dari AJAX dengan JSON sebagai format pertukaran datanya lebih baik daripada menggunakan XML. Pencapaian tujuan di atas maka memerlukan analisis dari hasil performansi web yang dapat ditentukan sebagai berkut: a. Response time yaitu waktu yang diperlukan untuk mengirim request hingga request tersebut direspon dan data respon tersebut ditampilkan. b. Bandwitdh yaitu besarnya data atau total trafik response server terhadap request yang dikirimkan client. c. Create time yaitu waktu yang digunakan untuk membuat data XML atau JSON. d. Analisis data (XML dan JSON), digunakan berbagai macam data XML dan JSON yang berbeda-beda. e. Pengaruh jumlah user yang mengakses terhadap performansi web AJAX. 2.

STUDI PUSTAKA AJAX (Asynchronous JavaScript and XML) adalah sebuah metode untuk membangun sebuah web yang dinamis dan interaktif. Halaman web dibuat lebih responsif dengan melakukan pengiriman sejumlah data dari server secara background process dan tidak seluruh komponen halaman web ditransmisikan setiap user mengirimkan request. Hal ini mampu meningkatkan interaktifitas, kecepatan, fungsionalitas dan kegunaan dari sebuah halaman web. 61


ISSN: 1979-2328

Gambar 1. Model aplikasi web klasik dan model aplikasi web berbasis AJAX. Extensible Markup Language (XML) merupakan subset Standard Generalized Markup Language (SGML) yang dapat diklasifikasikan dalam extensible language karena mengijinkan user untuk mendefinisikan sendiri tagsnya. AJAX menggunakan XML sebagai format pertukaran data yang dalam penerapannya dokumen XML harus diparsing ke dalam DOM (Document Object Model) agar bisa digunakan pada aplikasi web. XML strukturnya terdiri dari beberapa elemen yang dapat disertai dengan atribut sebagai properti dari elemen. Nested element atau kedalaman elemen mungkin terjadi pada dokumen XML. Berikut adalah contoh data XML yang digunakan sebagai data uji dalam penelitian ini:

Gambar 2. Contoh data XML. Javascript Object Notation (JSON) adalah format pertukaran data yang ringan, susbet dari JavaScript, textbased, format yang mudah dibaca untuk merepresentasikan struktur data dan objek. Format JSON dispesifikasikan dalam RFC 4627 oleh Douglas Crocford. Dalam AJAX, JSON merupakan alternatif dari format data yang umumnya digunakan yaitu XML.

Gambar 3. Contoh data JSON. 62


ISSN: 1979-2328

Gambar 3 di atas menunjukkan contoh data JSON yang digunakan dalam pengujian. Data tersebut sama dengan data XML pada gambar sebelumnya. Data JSON tidak terdapat atribut sehingga sebagai pembanding XML dengan atribut yakni elemen pada JSON. Perancangan Web AJAX Pemodelan sistem AJAX yang dibuat menggunakan UML (unified modelling language) diperlihatkan pada use case berikut:

Gambar 4. Diagram use case sistem web AJAX. Terdapat empat use case yang masing-masing mengambarkan tentang implementasi web AJAX dengan format pertukaran data XML atau JSON dan implementasi web AJAX dengan data berasal dari database untuk XML atau JSON. Sistem web AJAX di atas terdapat aktivitas yang melibatkan beberapa use case yang terlihat pada activity diagram berikut:

Gambar 5. Activity diagram web AJAX. Diagram di atas menunjukkan aktivitas yang terjadi dalam sistem web AJAX yang berhubungan dengan client. Sistem ini menerima inputan dari client yang berupa pilihan pengujian web AJAX. Kemudian di dalam sistem pilihan tersebut diproses dengan memanggil web AJAX dengan XML ataupun dengan JSON sesuai dengan pilihan. Setelah semua proses selesai kemudian menampilkan halaman web yang berupa hasil dari pengujian. Implementasi Sistem Aplikasi web AJAX untuk pengujian ini terdiri dari empat fungsi utama yang akan diterapkan. Masingmasing fungsi akan diuji dengan beberapa parameter uji serta jumlah datanya. Keempat fungsi tersebut akan dihubungkan dengan sebuah interface yang di dalamnya terdapat sebuah form yang berisi pilihan pengujian yang dapat dilakukan.

63


ISSN: 1979-2328

Gambar 6. Model implementasi sistem web AJAX. 4.

HASIL DAN PEMBAHASAN Data uji yang akan digunakan meliputi tiga parameter yaitu elemen, kedalaman dan atribut yang berasal dari file data XML dan JSON yang telah dibuat dan disimpan dalam database. Parameter atribut hanya akan diterapkan pada XML dengan pemakaian atribut sebanyak 2, 4, 8, 16, dan 32. Parameter elemen menggunakan 2, 4, 8, 16, dan 32 element pada XML maupun JSON. Sedangkan parameter kedalaman sebanyak 2, 4, 8, dan 16. Jumlah data yang digunakan yaitu 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, dan 16384 dengan setiap data terdapat 10 karakter dan masing-masing data sifatnya identik. Kategori uji atribut XML akan dibandingkan dengan data uji JSON kategori elemen dimana jumlah atribut pada XML sama dengan jumlah elemen pada JSON. Pengujian terhadap web AJAX yang telah dibuat dilakukan dalam tiga tahapan atau kategori pengujian berdasarkan: a. File Data pengujian pada tahap ini berasal dari file XML dan JSON yang terdapat di server dan pengujian dilakukan pada stand alone system.

Gambar 7. Hasil pengujian elemen terhadap response time – file dengan beragam jumlah data.

Gambar 8. Hasil pengujian kedalaman terhadap response time – file dengan beragam jumlah data. 64


ISSN: 1979-2328

Response time yang dihasilkan web AJAX dengan JSON lebih cepat daripada web AJAX dengan XML pada data yang lebih besar dari 1024 item data pada parameter uji elemen, kedalaman dan atribut. Hal ini terjadi karena pada response time terdapat tiga faktor pembangun yaitu: i. waktu pengiriman response dari server ke client, waktu ini dipengaruhi oleh kondisi jaringan dan besarnya data yang dikirimkan, karena pengujian ini dilakukan pada komputer stand alone maka faktor ini dapat diabaikan. ii. waktu parsing masing-masing data, cara parsing antara XML dan JSON berbeda sehingga waktu yang dibutuhkan berbeda pula. Parsing JSON mengubah data JSON ke dalam data JavaScript sedangkan XML ke dalam DOM, hal ini membuat JSON lebih cepat parsingnya. iii. waktu penampilan data ke halaman web, besarnya data yang akan ditampilkan mempengaruhi waktu yang dibutuhkan dan karena data yang ditampilkan pada XML dan JSON adalah sama maka faktor ini dapat diabaikan. Pengujian bandwidth pada parameter uji elemen dan kedalaman, dihasilkan bahwa web AJAX dengan JSON membutuhkan bandwidth lebih kecil daripada web AJAX dengan XML pada jumlah data yang sama hal ini terjadi karena pada XML terjadi pengulangan tags (adanya tags pembuka dan penutup) pada setiap penambahan elemen atau kedalaman.

Gambar 9. Hasil pengujian elemen terhadap bandwidth – file dengan beragam jumlah data.

Gambar 10. Hasil pengujian kedalaman terhadap bandwidth – file dengan beragam jumlah data.

Gambar 11. Contoh data uji dengan empat elemen pada XML dan JSON. 65


ISSN: 1979-2328

Sedangkan pada parameter uji atribut memperlihatkan bahwa web AJAX dengan XML lebih ringan daripada web AJAX dengan JSON karena pada XML untuk setiap penambahan atribut tidak terjadi penambahan tags penutup dan jumlah data XML lebih sedikit daripada JSON. b.

Database Tahap pengujian ini data yang digunakan berasal dari database yang sebelum dikirimkan data tersebut dibuat terdahulu file XML atau JSON. Hasil dari pengujian memperlihatkan pola yang sama dengan tahap pengujian file sedangkan untuk hasil pengujian create time memperlihatkan waktu yang cenderung sama baik pad aweb AJAX dengan XML maupun web AJAX dengan JSON. c.

User Akses Pengujian ini dilakukan dilakukan pada sebuah jaringan lokal dengan beragam jumlah user yang mengakses sebuah server. Hasil pengujian pada masing-masing komputer memperlihatkan nilai yang cenderung sama dengan pengujian pada komputer stand alone. Hal ini terjadi karena mesin AJAX berada dan berjalan di sisi client, sehingga tidak memberikan perubahan nilai jika dibandingkan dengan pengujian pada komputer stand alone, dengan asumsi tidak memperhitungkan kecepatan server dalam merespon setiap permintaan yang dilakukan oleh client. 5. a.

b.

c.

d.

KESIMPULAN Performansi web AJAX dengan menggunakan JSON pada pengujian elemen, kedalaman dan atribut untuk parameter response time lebih baik daripada web AJAX dengan menggunakan XML apabila menangani proses dengan data yang lebih besar dari 1024. Tinjauan terhadap parameter bandwidth, JSON membutuhkan bandwidth lebih kecil daripada XML pada pengujian elemen dan kedalaman. Sedangkan tinjauan parameter atribut, XML lebih ringan daripada JSON kecuali untuk penggunaan 1 atribut XML. Penggunaan atribut pada XML membuat bandwidth yang dihasilkan lebih kecil daripada JSON, namun untuk response time khususnya pada data lebih dari 1024 data, JSON masih lebih baik daripada XML meskipun hasilnya semakin nilai yang sama. Penggunaan 32 atribut XML menghasilkan response time terbaik dari seluruh format data XML dalam pengujian ini. Data JSON yang digunakan dalam AJAX selalu lebih ringan daripada dengan XML, karena dalam XML terdapat tags penutup yang menyebabkan jumlah karakter data XML lebih banyak daripada JSON dengan jumlah data yang sama, pengecualian terjadi untuk data XML yang menggunakan atribut data lebih ringan daripada JSON, disebabkan pendeklarasian setiap data XML tidak memerlukan tags penutup dan lebih hemat dalam pendeklarasian variabel datanya. Performansi web AJAX tidak terpengaruh oleh banyaknya user yang mengakses server, karena proses paling mesin AJAX terjadi dan dieksekusi pada komputer client.

6. DAFTAR PUSTAKA Asleson Ryan, T.Schutta Nathaniel, ”Foundation of AJAX”, Apress. Babin Lee, “Beginning AJAX with PHP: From Novice to Professional”, 2006, Apress. Ballard Phil, “Teach Yourself AJAX in 10 Minutes”, 2006, SAMS. Darie Cristian, Brinzarea Bogdan, Chereches-Tosa Filip, Bucica Mihai, “Building Responsive Web Applications with AJAX and PHP”, PACKT. Eichorn Joshua, “Understanding AJAX: Using JavaScript to Create Rich Internet Applications”, 2006, Prentice Hall. Firdaus Yanuar, “Diktat Mata Kuliah Rekayasa Aplikasi Internet: AJAX Programming”, 2006, Jurusan Teknik Informatika, STT Telkom. Firdaus Yanuar, Maharani Warih, “Development of AJAX Website with Prado and CakePHP Framework”, 2008, Departemen Teknik Informatika, IT Telkom. Gehtland Justin, Galbraith Ben, Almaer Dion, “Pragmatic AJAX: a Web 2.0 Primer”, 2006, The Pragmatic Programmers LLC. Hadlock Kris, “AJAX for Web Application Developer”, 2006, SAMS. JSON, “Introduction of JSON”, www.json.org, diakses pada 28 Desember 2007. JSON, “JSON: Fat-Free Alternatif to XML”, www.json.org, diakses pada 2 Januari 2008. Kelly Sean, “Speeding Up AJAX with JSON”, www.developer.com, diakses pada 20 Desember 2007. L Merrill, Christopher, “Performance Impacts of AJAX Development: Using AJAX to Improve the Bandwidth Performance of Web Applications”, www.webperformanceinc.com, diakses pada 23 Desember 2007. Pranata Antony, ”Panduan Pemrograman JavaScript”, 2001, Andi Offset. Richards Robert, “Pro PHP XML and Web Services”, 2006, Apress. Velayudham Senthil, J Pring Edward, Morar John, “Convert XML to JSON in PHP”, www128.ibm.com/developerworks, diakses pada 20 Desember 2007. 66


ISSN: 1979-2328

Wikipedia, AJAX (Programming), en.wikipedia.org, diakses pada 2 Januari 2008. Wikipedia, DOM, en.wikipedia.org, diakses pada 2 Januari 2008. Wikipedia, JavaScript, en.wikipedia.org, diakses pada 2 Januari 2008. Wikipedia, JSON, en.wikipedia.org, diakses pada 2 Januari 2008. Wikipedia, XML, en.wikipedia.org, diakses pada 2 Januari 2008. Zakas C. Nicholas, Fawcett McPeakandjoe Jeremy, “Professional AJAX”, 2006, Wrox Press.

67

OPTIMASI PERFORMANSI AJAX DENGAN MENGGUNAKAN JSON

Recommend Documents