12/05/2010

Sejarah AJAX



Introduksi

Tahun 2005, selain dianggap tahun SOA (Services Oriented Architecture), juga dianggap tahun RIA yang merupakan singkatan dari Rich Internet Application. Sebenarnya RIA adalah momen kembalinya dunia teknologi informasi masuk ke era tahun 80-an, yaitu era mainframe. RIA ini versi lanjutan dari solusi berbasis Web. Ide ini muncul sebenarnya dikarenakan dianggap PC untuk mengakses solusi Web ini terlalu canggih. Perbedaannya dengan mainframe, tentu saja RIA lebih berwarna dan lebih interaktif, tidak hijau hitam. Console modern ini disebut dengan Browser.

RIA sebenarnya adalah sebuah mekanisme memindahkan komponen yang umum dan sering dipakai ke sisi client, dan dicache sehingga setiap mengakses halaman Web, tidak perlu mendownload 2 kali, tetapi membacanya dari cache yang ada.

Arsitektur RIA sedikit berbeda dengan aplikasi sebelumnya, dan client untuk RIA ini bermacam-macam, bukan harus browser, dan malahan hebatnya dari RIA ini, dapat menggabungkan beberapa solusi yang bukan satu teknologi menjadi saling dapat menggunakan.

1. Sejarah AJAX

Selama lebih dari satu atau dua tahun terakhir, antar muka (UI) pada web telah mengalami transformasi yang cukup signifikan. Meskipun teknologi web sudah ada sejak satu dekade yang lalu, tapi kini perhatian khusus diberikan pada sisi optimasi kesan pengguna aplikasi pada browser. Mekanisme optimasi kesan pengguna pada browser client memunculkan suatu teknik yang disebut dengan "AJAX", yang merupakan kependekan dariAsynchronous JavaScript and XML. Teknik ini memungkinkan suatu halaman web untuk memperbarui dirinya tanpa harus melakukan full round-trip pada server.

Beberapa teknologi dikembangkan dengan menggunakan teknik AJAX, tidak terkecuali pada platform Microsoft .NET. Microsoft membangun satu set framework yang diberi nama "ATLAS". Atlas merupakan satu set teknologi pada sisi client dan server untuk aplikasi ASP .NET 2.0. Beberapa komponen ATLAS memungkinkan untuk meningkatkan kemampuan aplikasi web Anda tanpa harus mempelajari teknologi AJAX secara spesifik. ATLAS di desain untuk berjalan dalam lingkungan .NET dengan sangat mudah dari sisi penggunaannya. Beberapa komponen lainnya memanfaatkan penggunaan JavaScript dan Document Object Model (DOM) yang merupakan standar pada kebanyakan browser. Disinilah peran Atlas, dimana ia memberikan kontribusi terbesar pada suatu framework yang sangat kaya dengan teknik AJAX, dibangun di atas JavaScript, yang mengizinkan Anda melakukan banyak operasi seperti pemanggilan web service atau modifikasi antar muka (UI) pada beragam browser secara independen, serta hal-hal lainnya yang dapat dikembangkan secara lebih spesifik.

AJAX (Asynchronous JavaScript and XML) atau disebut juga Web 2.0, ternyata punya masalah utama yaitu tidak bersahabat dengan Search Engine, karena AJAX mengandalkan JavaScript dan CSS/XML. Ini artinya semua fitur AJAX tidak dapat di akses oleh search engine atau pengunjung yang men-disable javascript-nya.

AJAX (disisi user) merupakan alternatif untuk kenyamanan bagi user (Contohnya GMail), dimana browser tidak akan mengambil seluruh halaman, tapi hanya loading bagian yang perlu di ganti saja dari halaman tersebut. Sayangnya kenyamanan ini harus dibayar cukup mahal, karena search engine tidak akan mengenali seluruh isi dari website tersebut.

Dari sisi pandangan bisnis/marketing ini menjadi masalah besar karena tidak dapat ter-index secara baik oleh search engine. Bayangkan saja jika anda memiliki situs dengan banyak halaman, tapi yang terindex oleh search engine hanya halaman depan saja. Ini tentu saja akan mengurangi peluang dari calon pengunjung anda untuk dapat mencari situs anda melalui search engine.

2. Aspek Teknik AJAX

Aplikasi RIA yang populer dipasaran diantaranya adalah NexaWeb yang merupakan extensi dari Applet, Canno yang merupakan extensi dari Swing, serta AJAX (Asynchronous Javascript and XML), sebuah jargon baru yang sedang hot-hotnya, karena mengawinkan JavaScript dengan XML, sedangkan didunia Microsoft muncul ATLAS.

Solusi RIA umumnya memiliki sebuah aplikasi yang rich berjalan di sisi client, dan juga pemrosesan di sisi server. Pemisahaan ini terbukti telah menekan beban server mulai dari 30% sampai 60% (Sumber dari NexusEdge).

Malahan dengan merestruktur mekanisme pengembangan aplikasi, bisa jadi server yang sekarang sudah ada dan sudah overload, dapat ditambahkan aplikasi baru, dan bukannya harus membeli server baru, tetapi malah diserver yang ada yang sudah overload.

2.1 RIA di Dunia Java

Java yang terkenal sangat erat hubungannya dengan XML, tentu saja merupakan salah satu teknologi yang sangat agresif mengadopsi RIA, seperti NexaWeb dan Canoo adalah solusi propietary dari RIA yang berbasis Swing Applet. 

Sedangkan untuk solusi RIA berbasis Browser (AJAX), telah terjadi sinergi antara projek Javascript dengan Java, terutama pada framework MVC, seperti DWR yang diintegrasikan dengan Apache Struts 2.0 WebWork, atau Google Widget Toolkit yang menggunakan perintah Java untuk menghasilkan AJAX. 


Malah Eclipse yang terkenal dengan IDEnya, sedang mempersiapkan IDE untuk Javascript yang berjalan diatas Eclipse. Tim penulis mengembangkan solusi AJAX yang mengutilisasi AJAX adalah Cimande, terdapat contoh implementasi Struts 2.0 dan DWR didalamnya.

Malah IBM, Sun yang merupakan dianggap tetua dunia Java, telah bergabung kedalam konsorisium OpenAJAX dan DojoToolkit, untuk mengutilisasi AJAX kedalam solusi mereka. Malah integrasi JSF dengan AJAX telah menjadi default sample untuk Netbeans (IDE Open Source keluaran Sun).

Dengan semakin dirasakannya kebutuhan dan benefit implementasi AJAX, telah terjadi trend untuk menghadirkan Dual MVC, ini artinya implementasi MVC dua lapis, yaitu disisi server dan sisi client. Yang mana di server dapat menggunakan WebWork Struts atau JSF, sedangkan di clientnya, saat ini sedang terjadi progress kearah MVC, yang paling populer saat ini adalah DojoToolkit.

Sayangnya implementasi gabungan MVC Java dengan Dojo terkesan terhenti, karena Dojo semakin hari semakin lengkap dan komplek, sehingga sepertinya diperlukan integrasi manual. Pihak WebWork Struts yang semua memasukan Dojo, akhirnya mengeluarkan Dojo dari bundlenya.

2.2 Keamanan Solusi RIA


Solusi berbasis AJAX, terbukti telah membuat beban server berkurang, dan meningkatkan interaktifitas. Yang secara tidak langsung juga membuat sebuah celah baru dalam pengembangan, dikarenakan ada script yang dapat diinject kedalam Javascript, yang dapat berakibat keamanan solusi AJAX berkurang.

Yang saat ini sedang jadi issue pembicaraan. Hal ini dibuktikan dengan semakin focusnya Mozila terhadap issue keamanan pada browsernya, yang dianggap Mozilla adalah browser AJAX masa depan.

Tim riset Sun yang dikepalai Richard Bair sedang mengembangkan mekanisme agar Swing dapat bekerja sebagai replacement browser, mengganti browser dengan Swing.Project ini disebut Swing-WS, yang bekerja dibawah SwingLabs JDesktop. Projek ini OpenSource.

Sayangnya apakah Javascript akan diembeded kedalam Swing, sehingga komponen yang dicache, bukan lagi dicache tetapi dibundle, serta diberi digital signature terhadap packagenya belum diketahui. Pendekatan pengembangan yang memungkinkan solusi AJAX diganti dengan Swing ini sebenarnya adalah implementasi Web Services atau SOA.

3. Aplikasi-aplikasi pada AJAX

3.1 Yahoo

Jika anda ingin melihat seperti apa perkembangan web selanjutnya, anda dapat melihatnya pada Yahoo. Tren penggunaan Ajax merupakan kewajiban bagi website generasi mendatang. Website yang lebih interaktif dengan tampilan sederhana merupakan syarat jika web kita ingin tetap eksis dalam memasuki era Web 2. Yahoo merupakan contoh website yang baik apabila kita ingin membuat website yang bagus. Hebatnya lagi dengan tampilan yang mewah, waktu yang diperlukan untuk mengakses Yahoo tidak berubah, masih cepat seperti dulu.

Dengan munculnya AJAX, sebagai sebuah jargon baru tetapi menggunakan teknologi lama yang sudah ada sejak awal-awal Internet, yaitu Javascript dan XMLHttpReqeust. Telah menghadirkan trend baru didunia pemograman. Beberapa produk AJAX yang siap pakai diantaranya adalah Google via GWT-nya (Google Widget Toolkit), merupakan sebuah compiler AJAX berbasis Java, Yahoo UI, DojoToolkit, dan JSON.

Beberapa contoh aplikasi yang dengan cepat telah merubah aristekturnya dari non RIA menjadi RIA adalah SugarCRM versi 4.5, GoogleMail, atau Yahoo Mail Beta.

Yang pasti saat ini perang Google dengan Microsoft (Windows Live), akan membuat solusi RIA menjadi senjata pamungkasnya. Layanan Google yang terang-terangan menantang Office Live telah lahir, seperti Google Writely, Google Spreadsheet, atau GoogleMail yang semuanya sangat mengutilisasi AJAX.

Tentu saja Microsoft memiliki produk saingan Javascript dengan nama VBScript, sehingga mungkin saja Microsoft tidak akan pernah mempromosikan AJAX, karena ini sama dengan mempromosikan produk kompetitornya.

Sekarang solusi AJAX yang berat-berat dan sedang naik daun, umumnya tidak dapat berjalan di Internet Explorer, tetapi di Mozilla. Jadi jangan kaget bilamana tertulis di webnya, hanya berjalan di Mozilla atau Gecko. Opera yang merupkan browser tercepat didunia mengadopsi Gecko, yang merupakan engine inti dari Mozilla.

Malah ledakan popularitas AJAX telah membuat Microsoft rela mengadopsi satu perintah yang paling penting dalam dunia AJAX yaitu XMLHttpRequest, dimana sebelumnya adalah implementasi ActiveX XML yang hanya berjalan di Windows, dimana momentum ini akan dimulai tentu saja setelah Internet Explorer 7 release (saat ini masih beta).

3.2 Purefect
Purefect adalah desktop environment yang berjalan 100% di atas web browser. Purefect mengadopsi teknologi RIA (Rich Internet Application). Dengan Purefect, aplikasi web tidak lagi berbentuk halaman-halaman web yang selama ini kita ketahui, tapi berbentuk aplikasi-aplikasi window seperti layaknya aplikasi yang berjalan pada komputer desktop kita.

Purefect berusaha untuk mengkombinasikan kelebihan dari sistem GUI pada desktop dengan kelebihan dari sistem web. Seluruh aplikasi dalam sistem Purefect berjalan di atas web browser dan dibangun dengan berbasiskan teknologi Web 2.0 dan AJAX (Asynchronous JavaScript and XML) yang akan mempermudah penggunaan dan pengaturan aplikasi.

Beberapa keuntungan dari Purefect adalah:

  • Mempermudah dan mempercepat pembangunan aplikasi web secara signifikan
  • Aplikasi yang dibangun bersifat multi-platform

  • Untuk menjalankan aplikasi berbasis Purefect yang dibutuhkan hanyalah web browser tanpa diperlukan plug-in atau software tambahan lainnya (ActiveX, Java, dsb)
  • Berbasis object oriented

  • Arsitektur lengkap: login system, personalized desktop, manajemen user, advanced windowing system, task management, dsb.

3.3 Implementasi AJAX pada Delphi

Untuk keperluan membangun aplikasi berbasis Web maka tersedia beberapa komponen built-in pada Delphi, yaitu Indy dan Intraweb. Indy sebenarnya hanya menyediakan kebutuhan internet dasar sedangkan Intraweb dapat langsung dipergunakan untuk membangun website dengan Delphi seperti layaknya kita membangun aplikasi berbasis Windows. Salah satu komponen yang cukup bagus adalah ExpressWeb dari DevExpress yang terkenal dengan komponen berkualitas tingginya. Hanya Intraweb versi 8.0.23 yang mulai mendukung AJAX.

4. Tool AJAX

Untuk mempermudah developer dalam bekerja dengan aplikasi ASP .NET 2.0 berbasis Atlas, maka dibuatlah Atlas Toolkit Control, yakni satu set kontrol dan API yang kaya dengan fitur dan dapat digunakan secara gratis. Hingga saat tulisan ini dibuat, tidak kurang dari 25 kontrol telah tersedia dan dapat Anda gunakan. Beberapa kontrol yang penulis akan bahas secara singkat adalah sebagai berikut :

1. Accordion
Kontrol web Accordion memungkinkan Anda untuk menyediakan multiple pane dan menampilkannya sekaligus dalam satu waktu. Setiap Accordion memiliki template pada Header dan Content-nya dengan state yang disimpan bahkan saat terjadi postback.

kode pembentuknya :
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
AutoSize="None">
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"

HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">

. . .
. . .
.
.
.
... 
...

2. AlwaysVisibleControl


Kontrol ini memungkinkan Anda untuk 'mempaku' suatu informasi pada halaman web sehingga ia akan tetap tampil 'mengambang' di atas isi halaman web baik saat di-scroll maupun di-resize.

Informasi jam tetap berada di sudut kanan atas meskipun halaman web di-scroll ke bawah. Tata letak informasi dapat diatur sedemikian rupa apakah ingin tetap di tengah, di sudut kanan atas, kiri atas, kanan bawah, atau kiri bawah, atau tidak 'dipaku'.


Kode pembentuknya :

TargetControlID="timer" 
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration=".1" />

3. Animation
kontrol ini memungkinkan anda untuk melakukan suatu animasi yang menarik untuk efek yang spesifik seperti OnLoad, OnClick, OnMouseOver atau OnMouseOut. Umumnya digunakan untuk animasi pada pergerakan (moving), perubahan ukuran (resizing), penampakan (fading), dan pewarnaan (coloring).

4. CascadingDropDown
Kontrol ini memungkinkan untuk melakukan pemuatan data secara dinamis ke dalam suatu DropDownList tanpa harus refresh ke server.

Perubahan ini secara dinamis terjadi secara langsung dengan menggunakan mekanisme web service.

Kode pembentuknya :
...
TargetControlID="DropDownList2"
Category="Model"
PromptText="Please select a model"
LoadingText="[Loading models...]"
ServicePath="CarsService.asmx"
ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList1"
SelectedValue="SomeValue" />
...

5. CollapsiblePanel
Kontrol ini berfungsi untuk menambahkan mekanisme tampilkan-sembunyikan atau show-hide suatu area pada halaman web.Kontrol CollapsiblePanel sebelum menampilkan detail. Developer dapat mengatur apakah ingin menggunakan tulisan atau ikon.

kode pembentuknya :


TargetControlID="Panel1"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="True"
TextLabelID="Label1"
CollapsedText="Show Details..."
OpenedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Height"/>

6. ConfirmButton

Kontrol ini memudahkan developer untuk menampilkan jendela konfirmasi pada user.

Kode pembentuknya:

TargetControlID="LinkButton1" 
ConfirmText="Are you sure you want to click this?" />

7. ModalPopup
Kontrol ini berfungsi untuk menghasilkan fokus pada suatu area informasi di suatu halaman web. Area yang tidak mendapat fokus akan berwarna lebih gelap.

Kode pembentuknya :
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton">

8. NumericUpDown
Kontrol ini digabungkan dengan kontrol inputan teks (TextBox) untuk menghasilkan tombol "Up" dan "Down" yang akan menaikkan dan menurunkan nilai kontrol teks tersebut. Tombol "Up" dan "Down" dapat diganti dengan gambar apapun yang Anda inginkan.

Kode pembentuknya :

TargetControlID="TextBox1"
Width="100"
RefValues="January;February;March;April"
TargetButtonDownID="Button1"
TargetButtonUpID="Button2"
ServiceDownPath="WebService1.asmx"
ServiceDownMethod="PrevValue"
ServiceUpPath="WebService1.asmx"
ServiceUpMethod="NextValue"
Tag="1"
/>
...

9. Slider
Kontrol ini berfungsi untuk mengubah 'wajah' kontrol inputan teks (TextBox) yang memiliki isian berupa angka dengan batas tertentu menjadi berbentuk Slider.

kode pembentuknya :
TargetControlID="Slider1"
Minimum="-100"
Maximum="100"
BoundControlID="Slider1_BoundControl"
Steps="5"
/>

TargetControlID="Slider2"
BoundControlID="Slider2_BoundControl"
Orientation="Vertical"
EnableHandleAnimation="true"

/>

10. ToggleButton
Kontrol ini berfungsi untuk mengubah 'wajah' dari standar kontrol CheckBox menjadi bentuk yang lebih elegan.Standar kontrol CheckBox diubah dengan gambar jempol ke atas dan ke bawah.

Kode pembentuknya :
runat="server">
TargetControlID="CheckBox1"
ImageWidth="19"
ImageHeight="19"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
CheckedImageUrl="ToggleButton_Checked.gif"
DisabledUncheckedImageUrl="ToggleButton_DisabledUnchecked.gif"
DisabledCheckedImageUrl="ToggleButton_DisabledChecked.gif"
/>

Contoh-contoh di atas tersebut memberikan gambaran kepada kita bahwa Atlas menggabungkan kekuatan kode pada sisi server dan kemudahan kode pada sisi client. Banyak solusi berbasis Atlas untuk ASP .NET 2.0 hanya berdasarkan penulisan kode secara deklaratif saja, meski untuk beberapa kasus yang kompleks kita harus membuat sendiri.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)