Nex a Web Ajax Characteristics

8/14/2019 Nex a Web Ajax Characteristics

1/16

The char act er i st i cs of Aj ax appl i cat i ons

The under l yi ng t echnol ogi es behi nd cl ass i c Web appl i cat i ons ( HTML) ar e pr et t y si mpl e andst r ai ght f orwar d. Thi s si mpl i ci t y, however , comes wi t h a cer t ai n cost . Cl assi c web pageshas ver y l i t t l e i nt el l i gence and l ack of dynami c and i nt er act i ve behavi or s.

Aj ax, Asynchr onous J avaScr i pt and XML, changes t he l andscape. Aj ax i s not a speci f i cpr oduct or t echnol ogy. I nst ead, i t r ef er s t o a set of t echnol ogi es and techni ques t hatal l ow web pages be i nt er act i ve l i ke deskt op appl i cat i ons. Di f f erent f r om cl assi c HTML webappl i cat i ons, Aj ax appl i cat i ons have the fol l owi ng characteri st i cs.

The Web Page as Appl i cat i onAj ax bl ur s t he boundary bet ween web pages and appl i cat i ons. I n cl assi c web appl i cat i ons,a web page i s an HTML document t hat can be r ender ed by a br owser f or i nf or mat i on di spl aypur pose. I t has l i mi t ed or of t en zer o i nt el l i gence on i t s own.I n an Aj ax appl i cat i on, t he HTML page t he ser ver sends t o t he br owser i ncl udes code t hatal l ows t he page t o be a l ot smart er . Thi s code runs i n t he backgr ound act i ng as t hebr ai n whi l e t he HTML document i s r ender ed i n t he browser wi ndow. The code can det ectevent s such as key st r okes or mouse cl i cks and perf orm act i ons r espondi ng t o t heseevent s, wi t hout maki ng a round tr i p t o t he ser ver .

Through Aj ax, a web page f eel s l i ke a deskt op appl i cat i on. I t r esponds f ast , al mosti mmedi at el y to user act i ons, wi t hout f ul l page ref r esh. I t can f ur t her cont i nuousl yupdat e t he page by asynchr onousl y f et chi ng dat a f r om t he ser ver i n t he backgr ound,achi evi ng deskt op appl i cat i on experi ence.

Server s ar e For Dat a, Not PagesAj ax changes t he rol e of web pages f r om bei ng mer el y HTML document s i nt o appl i cat i onst hat have bot h HTML markup as wel l as code. Si mi l arl y, Aj ax changes t he r ol e of ser ver f r om merel y ser vi ng HTML pages t o ser vi ng dat a as wel l .

I n cl assi c web appl i cat i ons, web ser ver s s erve HTML web pages. Some of t he pages ar est at i c whi l e ot her s are gener at ed dynami cal l y by ser ver si de l ogi c. I n part i cul ar , whent he appl i cat i on has dynami c dat a, t he ser ver much conver t such dat a i nt o HTML mar kup andsend them t o t he br owser f or di spl ay as HTML pages. I n t hi s r egard, t he ser ver i s merel yservi ng scr een i mages t o t he cl i ent si de whi l e the cl i ent si de br owser i s merel y ascr een i mages r ender i ng engi ne.

I n Aj ax web appl i cat i ons, ser ver s do not need t o conver t dat a i nt o HTML markup. Servercan send dat a to t he cl i ent si de di r ect l y. The cl i ent si de code wi l l pr ocess t he dat ai nsi de t he br owser and dynami cal l y updat e t he HTML di spl ay accor di ngl y. Thi s el i mi nat essi gni f i cant overhead on t he ser ver si de f or generat i ng HTML pages f r om dynami c dat a,l everages t he cl i ent - si de pr ocessi ng powers and del i ver s bet t er per f ormance andscal abi l i t y, as shown i n Fi gur e X.


2/16

Server

Client

Server

Client

User Interface

Ajax Engine

Client logic

Data

Business logic

Data

User Interface

UI logic

Business logic

Data

Fi gur e X: Lef t : Server serves HTML pages i n cl assi c web appl i cat i ons; Ri ght : Serverser ves dat a i n Aj ax appl i cat i ons.

I n f act , havi ng t he ser ver ser vi ng dat a i nst ead of generat i ng and ser vi ng HTML pages i st he r i ght way to ar chi t ect Aj ax appl i cat i ons. Put t i ng dat a on t he cl i ent si de gi ves t hecl i ent si de a l ot more f l exi bi l i t y, avoi ds unnecessar y net work request/ r esponses andi mpr oves perf or mance. Such ar chi t ect ur e can f ur t her enabl e of f l i ne capabl e appl i cat i ons.

Dynami c and Cont i nuous User Exper i encesAn i mpor t ant char acteri st i c of Aj ax i s i n i t s f i r st l et t er A a user exper i ence t hati s asynchr onous. Asynchr onous means t hat user s cont i nue t o i nt eract wi t h t heappl i cat i on whi l e t he br owser i s communi cat i ng wi t h t he ser ver . No more cl i ck, wai t andpage ref r esh, t he Aj ax user experi ence i s dynami c and cont i nuous.

Cl assi c web appl i cat i ons del i ver a cl i ck, wai t and page r ef r esh user experi ence.Because t he Web was or i gi nal l y desi gned f or browsi ng HTML document s, a Web br owserr esponds t o user act i ons by di scar di ng t he cur r ent HTML page and sendi ng an HTTP r equestback t o t he Web ser ver. Af t er per f ormi ng some pr ocessi ng, t he ser ver r et urns a new HTMLpage t o t he br owser , whi ch t hen di spl ays t he new page. The cycl e of br owser r equest s,

ser ver r esponds i s synchr onous, meani ng t hat i t happens i n r eal - t i me r at her t han i n t hebackgr ound so t hat t he user must wai t and cannot perf orm ot her t asks. Fi gur e Xi l l ust r at es t he tr adi t i onal HTML cl i ck- wai t - r ef r esh paradi gm.

Figure X: Traditional HTML click, wait and page refresh user experience

I n AJ AX- based appl i cat i ons, par t i al screen updat es r epl ace HTML s cl i ck- wai t - r ef r eshand asynchronous communi cat i on repl aces synchr onous r equest / r esponse. Thi s modeldecoupl es user i nt er act i on f r om ser ver i nt er act i on, whi l e updat i ng onl y t hose useri nt erf ace el ement s t hat cont ai n new i nf ormat i on. Thi s more ef f i ci ent appl i cat i onarchi t ect ur e el i mi nat es t he wai t so user s can keep worki ng, and al so makes possi bl e non-

l i near workf l ows. Li kewi se, i t r educes net work bandwi dt h consumpt i on and ser ver l oad f ori mpr oved perf or mance and scal abi l i t y. Fi gur e 2 i l l ust r ates t he AJ AX asynchr onous/ par t i alupdat e par adi gm.


3/16

Figure 1: AJAX continuous user experience

The Aj ax Sof t war e Pl at f or m: Requi r es Real Desi gn

Aj ax devel opment and Mai nt enance Chal l engesAj ax has cert ai nl y rai sed awar eness of t he hi gh pot ent i al of web appl i cat i ons. At t hemeant i me, Aj ax has al so br ought t he usage of J avaScr i pt and DHTML t o a much deeper andbr oader l evel i n appl i cat i on devel opment . Ther e ar e si gni f i cant benef i t s of Aj ax, butt her e are al so si gni f i cant chal l enges.

The bi ggest chal l enge of usi ng Aj ax i s i t s scr i pt i ngbased appr oach. Aj ax r equi r esdevel oper s t o wr i t e a l ot of J avaScr i pt code. J avaScr i pt code i s hard t o devel op, debug,t est and mai nt ai n. J avaScr i pt / DHTML i s not st andar di zed and t here ar e i ncompati bi l i t i es

between di f f erent br owsers, di f f erent br owser ver si ons, and di f f erent oper ati ng syst ems. Ther e i s a sever e l ack of t ool s f or devel opi ng, debuggi ng and t est i ng J avaScr i pt / DHTMLcode. There i s al so a l ack of a robust component market pl ace. By i t s def i ni t i on, ascr i pt i ng l anguage emphasi zes qui ck and di r t y at t he cost of code mai nt ai nabi l i t y. I ncont r ast , a r eal programmi ng l anguage l i ke J ava and C++ emphasi zes f or mal i t y andst r i ct ness. For exampl e, unl i ke J ava or C++, J avaScri pt i s not st r ongl y typed.Progr ammi ng er r ors can onl y be uncovered at r unt i me. J avaScr i pt obj ect pr opert i es andmethods can be easi l y (and arbi t r ari l y) modi f i ed r egardl ess of a pr edef i ned i nt erf ace none of whi ch i s al l owed i n J ava or C++.

Secondl y, Aj ax i t sel f does not provi de r i ch user i nt erf ace or i ncr ement al updat ecapabi l i t y. Devel oper must code such f unct i onal i t y usi ng J avaScr i pt and DHTML. There arevar i ous J avaScri pt l i br ar i es avai l abl e t hat al l evi at e t hi s i ssue t o some degr ee, but t heyst i l l r equi r e devel oper s t o wr i t e J avaScr i pt and t hus do not sol ve t he f undament al

chal l enge.

Thi r dl y, Aj ax devel opment model t ends t o br eak t he " mar kup + l ogi c" desi gn pat t er n."Mar kup + l ogi c" i s a wel l est abl i shed desi gn pat t ern t hat separat es user i nt erf ace f r omappl i cat i on l ogi c. User i nt erf aces ar e descr i bed as markup document s and appl i cat i onl ogi c ar e wr i t t en separat el y i n a pr ocedur e l anguage t o cont r ol t he behavi or. I n order t ocr eate r i ch user i nt erf ace, a l ot of Aj ax devel opers embed si gni f i cant amount of

J avaScr i pt i nsi de t hei r web pages. Mi xi ng J avaScr i pt wi t h present at i on br eaks t he cl earseparat i on and makes appl i cat i on even more di f f i cul t t o devel op and mai nt ai n.

I n a t ypi cal appl i cat i on l i f e cycl e, t he most expensi ve par t i s not t he i ni t i aldevel opment but t he ongoi ng mai nt enance. How t o overcome t he above chal l enges and t husenabl e manageabl e and mai nt ai nabl e Aj ax s houl d be a t opi c of hi gh pr i ori t y andi mport ance f or any si gni f i cant Aj ax devel opment pr oj ect .

Aj ax Appl i cat i on Ar chi t ect ur eGi ven t he chal l enges associ at ed wi t h Aj ax, i t i s par t i cul ar l y i mpor t ant t o ar chi t ect anAj ax appl i cat i on pr operl y. Ot herwi se t he r esul t can be ei t her l ackl ust er per f ormance orcode mai nt enance ni ght mar e, or even bot h.

Ther e ar e t wo i t ems i mpact Aj ax appl i cat i on ar chi t ect ur e si gni f i cant l y: t he choi ce of anAj ax engi ne and cl i ent - si de appl i cat i on l ogi c i mpl ement at i on.

Aj ax Engi neFrom t he poi nt of vi ew of sof t war e ar chi t ect ur e, t he si gni f i cant di f f er ence bet ween anAj ax appl i cat i on and a cl assi c HTML web appl i cat i on i s t he i nt r oduct i on of a cl i ent - si deengi ne. Thi s engi ne, whi ch r uns i nsi de t he Web browser , act s as an i nt ermedi ar y bet weent he appl i cat i on s UI and t he ser ver . User acti vi t y l eads t o cal l s t o t he cl i ent - si deengi ne i nst ead of a page r equest t o the server . Li kewi se, dat a tr ansf er t akes pl acebetween t he ser ver t o the cl i ent - si de engi ne, r ather t han di r ect l y t o the Web br owser.


4/16

Aj ax engi ne i s t he key t o t he AJ AX appl i cat i on model . Wi t hout i t , every event generat edby user act i vi t y must go back to t he ser ver f or pr ocessi ng. Fi gur e 3 i l l ust r at es t hi sl at t er case, whi l e Fi gur e 4 i l l ust r at es t he mor e ef f i ci ent AJ AX model .

Figure 2: Classic web application architecture. Figure 3: AJAX Architecture.

There ar e many di f f er ent ways t o i mpl ement t he cl i ent si de Aj ax engi ne. One appr oach i st o wr i t e i t f r om scr atch based on t he appl i cat i on need. Another appr oach i s t o use anAj ax t ool ki t t hat i s avai l abl e i n t he market t oday. There ar e many Aj ax tool ki t s t oday, al ot of whi ch ar e open sour ce. Some t ool ki t s ar e communi cat i on l i br ari es, some of t hem ar er i ch user i nt erf ace component s and some of t hem pr ovi de bot h. Choosi ng t he ri ght t ool ki t

woul d si gni f i cant l y l ower appl i cat i on devel opment and mai nt enance chal l enge.

Appl i cat i on l ogi c par t i t i on

Regardl ess of t he cl i ent - si de Aj ax engi ne i s i mpl ement ed, how t o part i t i on appl i cat i onl ogi c di r ect l y i mpact s appl i cat i on per f or mance and mai nt ai nabi l i t y. Appl i cat i on l ogi cpar t i t i on r ef er s t o t he amount of appl i cat i on l ogi c t hat r uns on t he cl i ent si de ver sust he amount of l ogi c t hat r uns on t he ser ver si de. On t he one si de, put t i ng more l ogi c ont he cl i ent si de woul d del i ver bet t er appl i cat i on per f or mance. However , cl i ent - si de l ogi ccan easi l y resul t i n a l ot of hard t o mai nt ai n J avaScr i pt code. For exampl e, Googl eMap i sa rel at i vel y si mpl e appl i cat i on and has l i mi t ed f uncti onal i t y, but i t st i l l has mor e thana hundr ed Ki l obytes of J avaScri pt l ogi c on t he cl i ent si de (af t er obf uscat i on andcompr essi on) . On t he ot her si de, put t i ng more l ogi c on t he cl i ent si de can potent i al l ycr eat e appl i cat i on mai nt enance pr obl em t hat i s expensi ve and hard to scal e t o l ar gedevel opment t eams.

What ki nd of l ogi c shoul d be put on t he cl i ent si de, how much l ogi c and how t he l ogi cshoul d be i mpl ement ed? These ar e key quest i ons devel oper s must eval uat e car ef ul l y i norder t o bui l d manageabl e and mai nt ai nabl e appl i cat i ons.

Aj ax devel opment model of f er s a l ot of f l exi bi l i t y i n appl i cat i on l ogi c part i t i on asshown i n Fi gur e XX. On t he l ef t si de of t he f i gur e, most of t he appl i cat i on l ogi c as wel las dat a ar e on t he cl i ent si de. Thi s i s a cl i ent - cent r i c model t hat r esembl es cl osel y tot he t ypi cal desktop appl i cat i on model . On t he r i ght si de of t he f i gur e, al l appl i cat i onl ogi c resi des on t he ser ver si de. Thi s i s a ser ver - cent r i c model t hat i s ver y si mi l ar t ot he cl assi c HTML web appl i cat i on model except f or t he RI A Aj ax engi ne on t he cl i entsi de. Obvi ousl y, devel opers can deci de t o part i t i on thei r appl i cat i on anywhere bet weent hese t wo ext r eme cases.

What i s wor t hy of poi nt i ng out i s t hat t he ser ver - cent r i c model i s f ul l y capabl e ofdel i ver i ng a r i ch user experi ence such as ri ch UI and asynchr onous part i al updat es. Ther eason i s t he i nt r oduct i on of t he RI A Aj ax engi ne. I n thi s model , t he number of r oundt r i ps i s not necessari l y r educed compar i ng wi t h the cl assi c HTML appl i cat i on model , butt he amount of dat a t o be t r ansf err ed i s much smal l er. The asynchr onous nat ur e of t he Aj axengi ne st i l l enabl es t he cont i nuous user experi ence. The popul ar J avaServer Faces ( J SF)model i s such a server- cent r i c model t hat encour ages al l pr ocessi ng happeni ng on t heser ver si de. The benef i t s of t hi s model i ncl ude not onl y much enhanced user experi encet han a cl assi c HTML appl i cat i on by t he i nt r oduct i on of a cl i ent - si de Aj ax engi ne, butal so good appl i cat i on mai nt ai nabi l i t y. Because al l l ogi c st ays on t he ser ver si de, i t i smuch easi er devel op and mai nt ai n appl i cat i on code on t he server si de t han deal i ng wi t h

J avaScr i pt code on t he cl i ent si de.

I n compari son, a ser ver - cent r i c model wi l l not be abl e t o del i ver t he same perf ormanceand avai l abi l i t y as a cl i ent - cent r i c model . I n cl i ent - cent r i c model s, t her e ar e si gni f i cantappl i cat i on l ogi c runs on t he cl i ent si de. As a r esul t , most of user i nt er act i ons can be


5/16

pr ocessed l ocal l y wi t hout i ncur r i ng a r ound t r i p t o t he ser ver . Fur t her , t he appl i cat i oncan be more resi st ant t o spor adi c network connect i vi t y dr op of f . Appl i cat i onavai l abi l i t y i s i mpr oved because of t hi s r educed net work dependency. The dr aw back ofsuch a cl i ent - cent r i c model i s t he chal l enges associ ated wi t h devel opi ng, shari ng andmai nt ai ni ng t he amount of cl i ent si de J avaScr i pt code.

Server

Client User Interface

UI logic

Business logic

Data

Data

User Interface

UI logic

Business logic

Data

User Interface

UI logic

Business logic

Data

User Interface

UI logic

Business logic

Data

Business logic

RIA Engine RIA Engine RIA Engine RIA Engine

Rich Thin

Fi gure xx: Aj ax model of f ers s i gni f i cant f l exi bi l i t y i n appl i cat i on l ogi c par t i t i on

Some of t he Aj ax t ool ki t s pr ovi de f r ameworks t hat woul d f aci l i t at e the appr opr i atepar t i t i on of appl i cat i on l ogi c bet ween t he cl i ent si de and ser ver si de. For exampl e, J SFi s such a f r amewor k t hat encour ages al l l ogi c on t he ser ver si de.


6/16

Al t er nat i ves t o Aj ax

Aj ax i s cer t ai nl y a vi abl e way of devel opi ng r i cher , mor e i nt er act i ve web appl i cat i ons. These ki nds of appl i cat i ons ar e t ypi cal l y r ef er r ed t o as Ri ch I nt er net Appl i cat i on( RI A) . RI A i s a t erm t hat descr i bes the next generat i on web appl i cat i ons t hat combi nest he per f ormance, f unct i onal i t y of deskt op sof t war e wi t h t he uni ver sal depl oymentadvant ages of t he web.

Though i t i s st i l l evol vi ng r api dl y, t oday s RI A mar ket pl ace i s al r eady r i ch i n choi ce,and I T i s chal l enged t o mat ch t echnol ogy opt i ons wi t h busi ness goal s. But whi l e there ar e

a var i ety of appr oaches and pr oduct s avai l abl e f or bui l di ng and depl oyi ng RI As, t heynear l y al l f al l i nt o one of onl y t wo basi c cat egor i es:

Obj ect - or i ent ed progr ammi ng ( OOP) based approaches: J ava and . NET Scr i pt i ng based appr oaches: Aj ax and Fl ash.

The comparat i ve st r engt hs and weaknesses of t he di f f er ent RI A appr oaches cent er l ar gel yon t he progr ammi ng model and appl i cat i on execut i on envi r onment t hey empl oy. Theprogrammi ng model i mpact s devel opment and mai nt enance ef f or t , avai l abi l i t y and cost ofdevel oper ski l l s, avai l abi l i t y of i ndust r y and devel opment communi t y support , and such.

The execut i on envi r onment si gni f i cant l y i mpact s not onl y appl i cat i on perf or mance,f unct i onal i t y, and r el i abi l i t y; but al so t he depl oyment model .

St r engt h and Weakness of RI A Appr oachesI n gener al , OOP appr oaches have t he advant ages of obj ect or i ent ed progr ammi ng and ar ebet t er sui t ed f or ent er pr i se- cl ass appl i cat i ons. Scri pt i ng based appr oaches have t headvant ages of scr i pt i ng, whi ch i s bett er sui t ed f or gett i ng si mpl e t asks done qui ckl y butnot necessar i l y good f or appl i cat i on mai nt enance.

The f ol l owi ng t abl e summar i zes advant ages and di sadvant ages of t he f our appr oaches:

St r engt hs WeaknessesAj ax( J S)

Most compat i bl e wi t h exi st i ngHTML i nf r ast r uct ur e and cont ent ;Bui l t - i n suppor t i n mostbr owser s easy t o tr y wi t houtt he need f or addi t i onalsof t war e;

J avaScr i pt / DHTML code i sdi f f i cul t t o mai nta i n;

J avaScr i pt / DHTML code i sdi f f i cul t t o devel op;

Not desi gned f or t eamdevel opmentPer f ormance and f unct i onal i t yl i mi t at i ons

J ava Lar ge and br oad i ndust r y suppor tf or J avaLar ge J ava devel oper communi t y;Wi del y adopted i n t he ent erpr i seRobust perf or mance, scal abi l i t yand r el i abi l i t yRobust OOPDesi gned f or t eam devel opmentMai nt ai nabl e and manageabl e code

Requi r es hi gher pr ogr ammi ng ski l lset t han scri pt i ngRequi r es a J ava Vi r t ual Machi net o run t he appl i cat i on

Fl ash Suppor t s r i ch UI f eat ur es l i keani mat i on and vi deoFl ash engi ne i s smal l and wi del yavai l abl e

Act i onScr i pt code i s di f f i cul t tomai nt ai n;Not desi gned f or t eam devel opmentPer f ormance and f unct i onal i t y


7/16

Large Fl ash desi gner communi t y l i mi t ati onsFl ash desi gners ar e notdevel oper s l ack of ent erpri sedevel oper mi ndshar e

. NET Suppor t ed by Mi cr osof tRobust per f or mance, scal abi l i t yand r e l i abi l i t yRobust OOPDesi gned f or t eam devel opmentMai nt ai nabl e and manageabl e code

Suppor t ed by Mi cr osof t onl y;Requi r es a . NET vi r t ual machi nesi n or der t o r un appl i cat i onsRequi r es hi gher ski l l set s t hanscr i pt i ng

One Si ze Doesn t Fi t Al lI n t ypi cal ent er pr i se envi r onment s, t her e ar e al ways di f f er ent appl i cat i ons pr of i l es. Onone si de, some appl i cat i ons are l arge scal e and busi ness cr i t i cal , whose perf ormance andr el i abi l i t y ar e of par amount i mpor t ance. Such appl i cat i ons are t ypi cal l y wr i t t en by al arge devel opment t eam. Fur t her, mai nt ai nabi l i t y of such appl i cat i ons wei ghs more t hant he i ni t i al devel opment . On the ot her si de, some appl i cat i ons are smal l and not cri t i cal

t hat ar e wr i t t en by one to t wo devel oper s. Mai nt ai nabi l i t y of such appl i cat i ons i s notcr uci al . And ther e ar e many appl i cat i ons t hat woul d f al l between these t wo.

I t i s i mpor t ant t o poi nt out t hat Aj ax i s not t he sol ut i on t o al l appl i cat i ons. I ngeneral , l ar ge scal e busi ness appl i cat i ons t hat r equi r e t eam devel opment and l ong t ermmai nt enance ar e much bet t er ser ved by OOP based appr oaches l i ke J ava and . NET. Scri pt i ngbased appr oaches ar e more sui t ed f or appl i cat i ons where t he t asks ar e si mpl er,devel opment t eam i s smal l er and mai nt ai nabi l i t y i s a l ess concer n.

The f ol l owi ng t abl e shows how di f f er ent appr oaches f i t di f f er ent appl i cat i on pr of i l es anddevel oper ski l l set s :

Sui t abl e Appl i cat i on Pr of i l e Devel oper Fi tAj ax( J S)

HTML- cent r i c or web cont entor i ent ed appl i cat i onsCasual usage pat t ern appl i cati ons

Fast appl i cat i on l oadi ng andst ar t up i s i mpor t antLi mi t ed cl i ent s i de l ogi c ( l owermai nt enance r equi r ement )

J avaScr i pt devel oper s ( CSS,DHTML, J avaScr i pt , cr ossbr owser ski l l s)

J ava Tr ansact i on or i ent ed appl i cat i onsResponsi ve user i nter acti on andr unt i me per f or mance ar e i mpor t antExpert usage pat t ern appl i cat i ons( f r equent usage, l ong dur ati onusage)Per f or mance, scal abi l i t y andre l i abi l i ty can not be sacr i f i ced.Appl i cati ons t hat must bemai nt ai ned f or many year s.

J ava devel opers

Fl ash Casual usage pat t ernLi mi t ed cl i ent s i de l ogi c ( l owermai nt enance r equi r ement )

Fl ash devel opers

RIA Approaches and Application Profile Map

Application Scale, Complexity and User Responsiveness

A

l i c a t i onB

u s i n e s s C r i t i c a l i t

Scripting:Ajax (JS)Flash

OOP:Java.NET


8/16

Ri ch medi a or i ent ed appl i cat i ons

. NET ( sui t abl e appl i cat i on pr of i l es ar esi mi l ar t o J ava)

. NET devel oper s ( C#, XAML,et c ) .

Gi ven t he di ver se appl i cat i on pr of i l es and devel oper ski l l set s wi t hi n a gi ven ent er pr i seenvi r onment , and each RI A approach has i t s own st r engt h and weakness, t he i nevi t abl econcl usi on i s t hat one si ze does not f i t al l . Not one par t i cul ar RI A appr oach ( J ava,Aj ax, . NET or Fl ash) wi l l excl usi vel y own t he ent erpri se envi r onment . There are someappl i cat i ons bet t er ser ved by a scr i pt i ng based appr oach l i ke Aj ax, some ar e bett erser ved by Fl ash, some ar e bet t er ser ved by . NET whi l e ot hers are best ser ved by a J avabased RI A sol ut i on. Al l t hese f our t echnol ogi es wi l l co- exi st i n any si gni f i cantent erpri se envi r onment .

Al t er nat i ve Pr oduct s t o Aj ax There ar e qui t e a f ew al t er nat i ve product s avai l abl e t oday f or bui l di ng r i ch i nt er netappl i cat i ons. Each of t hem f i t i nt o one of t he appr oaches ment i oned above. Some of t hesol ut i ons come wi t h t ool i ng t hat can si mpl i f y devel opment and mai nt enance. The f ol l owi ngt abl e shows a l i st of sol ut i ons avai l abl e today:

Runtime Solutions ToolingJava Nexaweb Pl at f or m

j Rex Thi nl et

Nexaweb St udi o

.NET XAML ( Mi cr osof t ) Vi sual St udi o

AJAX Open sour ce:Doj o , Apache XAP, Apache Kabuki , Ri co ,DWRCl ose sour ce:Bi ndows , Backbase , J ackBe , I somorphi c

Flash Adobe Fl ex Laszl o

Adobe Fl ex Bui l der

Though t hese ar e di f f er ent RI A sol ut i ons and t hey ar e al l based on di f f er ent under l yi ngt echnol ogy pl at f orms, t he general RI A pr ogr ammi ng model i s act ual l y conver gi ng i nt o acommon ddecl ar at i ve UI devel opment model .

Thi s gener al RI A pr ogrammi ng model i s cent er ed on t he usage of an XML- based UI mar kupl anguage t o cr eat e a r i ch user i nt er f ace. The XML- based UI markup provi des a much hi gherl evel of abst r act i on t han HTML f or bui l di ng ri ch user i nt er f aces. XML UI f r eespr ogr ammers t o f ocus on t he appl i cat i on s cor e l ogi c and si gni f i cant l y r educes t he needf or scri pt i ng ( f or more det ai l ed benef i t descri pt i on, see XML Journal: XML for Client-sideComputing , March 10, 2004) .

Bel ow we wi l l show exampl es f r om scr i pt i ngbased appr oaches ( Adobe Fl ex and Laszl oSyst ems ) as wel l as an OOP- based approach ( Nexaweb ) . Al l sol ut i ons are zero- i ns ta l l andt hus can be run i nsi de any popul ar web br owser t oday wi t hout any i nst al l at i on or s of t waredownl oad. On t he cl i ent si de, Fl ex r equi r e t he pr esence of Fl ash engi ne ( Fl ash 8 andabove) . Laszl o r equi r es t he presence of a Fl ash engi ne ( Fl ash 6 and above) whi l e Nexawebr equi r es t he pr esence of a J VM ( J DK 1. 1 and above) .

Fl ex:Fl ex i s Adobe s pr oduct f or del i ver i ng Ri ch I nt er net Appl i cat i ons. Fl ex i s a Fl ash- basedsol ut i on. Devel opers woul d cr eat e Fl ex appl i cat i on usi ng an XML- based UI markup l anguagecal l ed MXML ( Macr omedi a mar kup Language) and wr i t e appl i cat i on l ogi c usi ngAct i onScr i pt . The Fl ex Present ati on Ser ver wi l l compi l e t he MXML f i l es i nt o SWF ( Fl ashmovi e f ormat ) , del i ver t he compi l ed SWF t o t he cl i ent si de Fl ash engi ne and r un t he

appl i cat i on.


9/16

Example xx: Flex Code Example

Figure xx: Flex Code Example UI

Laszl o:Laszl o i s al so a Fl ash- based pr oduct t hat i s f ai r l y si mi l ar t o Fl ex techni cal l y, t hough

i t i s devel oped by Laszl o Syst ems and cur r ent l y of f ered as an open sour ce pr oduct .

Hel l o, Wor l d Example xx: Laszlo Code Example

Figure xx: Laszlo Code Example UI

Nexaweb:Nexaweb i s a J avabased RI A product . Devel oper s woul d use an XML- based UI mar kup t ocreat e ri ch user i nt erf ace, and bui l d cl i ent - si de busi ness l ogi c by wr i t i ng cl i ent - si de

j ava beans ( cal l ed Managed Cl i ent Obj ect ) , whi ch ar e st andar d J ava pr ogram obj ect s.Nexaweb Cl i ent r unt i me woul d dynami cal l y r ender t he XML UI mar kup t o pr esent a r i ch useri nt er f ace, and dynami cal l y downl oad cl i ent - si de J ava obj ect s t o t he cl i ent si de f orexecut i on i n a on demand f ashi on.


10/16

Example xx: Nexaweb Code Example

Figure XX: Nexaweb code example UI

As s hown f r om t he above exampl es, t hough Nexaweb uses J ava and Lasz l o/ Fl ex uses Fl ash,RI A UI devel opment i s concept ual l y i dent i cal between di f f erent RI A sol ut i ons. The XML UIabst r act i on si gni f i cant l y l ower s t he compl exi t y and cost f or bui l di ng r i ch useri nt erf aces, of whi ch Aj ax devel opment can cer t ai nl y l ear n and benef i t f r om as wel l .

Cr oss Technol ogy RI A Sol ut i onsAl l RI A sol ut i ons ar e f undament al l y const r ai ned by i t s underl yi ng t echnol ogy: Aj ax,Fl ash, J ava or . NET. I f a devel oper pi cks Fl ex to devel op hi s RI A, he has t o l i ve wi t ht he pr os as wel l cons of Fl ash. Li kewi se, i f a devel oper pi cks an Aj ax t ool ki t t o devel ophi s RI A, t he devel oper has t o l i ve wi t h t he vari ous chal l enges associ at ed wi t h DHTML and

J avaScr i pt . As we ment i oned ear l i er , among t he f our t echnol ogi es, each has i t s st r engt hand weakness .

There i s some ver y i nt er est i ng devel opment i n t he RI A mar ket pl ace r ecent l y: cr oss -t echnol ogy RI A sol ut i ons. Bot h Laszl o Syst ems and Nexaweb announced t hat t hei r product sar e suppor t i ng mor e t han one t echnol ogy. The same appl i cat i on can be del i ver ed andr endered on di f f erent t echnol ogy pl at f orms. Laszl o support s bot h Fl ash and Aj ax ( DHTML) .Nexaweb support J ava and Aj ax. Thi s i s an ext r emel y i nt erest i ng devel opment . Wi t h t hi sdevel opment , devel opers do not have t o f i ght t he rel i gi ous war of J avaScr i pt vs. J ava,

J ava vs. . NET or . NET vs. Fl ash. Such devel opment accommodat es not onl y di f f er entdevel oper ski l l set s, but al so open t he door of combi ni ng t he benef i t s of scr i pt i ng basedappr oaches wi t h t hose of OOP- based appr oaches, del i ver i ng opt i mal r esul t s.

Fi gur e XX i s an ar chi t ect ur e di agr am shows how Aj ax and J ava can co- exi st wi t hi n t he samepr ogr ammi ng model f or t he same appl i cat i on. Thi s i s pr i mari l y accompl i shed by usi ng anXML abst r act i on l ayer t hat can be pr ocessed and rendered by ei t her Aj ax or J ava on t hecl i ent s i de.

(Source: Nexaweb. http://www.nexaweb.com/products.aspx?id=326)


11/16

The f ol l owi ng i s a sampl e appl i cat i on wr i t t en usi ng such an XML abst r act i on l ayer . Thi ssampl e appl i cat i on i s an RSS r eader t hat woul d r ead RSS f eeds f r om Yahoo and di spl ay al lt he f eeds i n a t abl e. The code i s shown i n Exampl e 5 and t he UI scr een di spl ay i s showni n Fi gure 6.

{*( t i t l e ) }

Example 5: A Simple RSS Feed Application

Figure 6: Example 5 Screen Display


12/16

Real - Wor l d Aj ax: Some Cl assi c Exampl es

Ever si nce t he phr ase Aj ax was coi ned, Aj ax has been spr eadi ng l i ke wi l df i r e i ndevel oper communi t i es. There ar e l ots of appl i cat i ons are devel oped usi ng Aj ax, i n f act ,a l ot of appl i cat i on were devel oped usi ng Aj ax l ong ti me bef ore Aj ax was phr ased asAj ax. I n t hi s sect i on, we wi l l go over some Aj ax appl i cat i on exampl es t o gi ve t her eader some sense of what Aj ax i s capabl e of and what appl i cat i ons have been bui l t usi ngAj ax so f ar .

AJ AX Chat Appl i cat i onsChat appl i cat i on r epr esent s an excel l ent AJ AX experi ence t hat i s not possi bl e wi t hcl assi c web model . Chat r equi r es asynchronous communi cat i on and can not af f or d f ul l pager ef r esh, whi ch i s one of t he reasons t hat many chat/ I M appl i cat i ons showed up si nce Aj axbecame popul ar .

Gabbl y: Li ve Chat f or Any Websi t e

Gabbl y i s a new appl i cat i on t hat embeds a chat wi ndow i n any web page. As a user , you seet he tar get websi t e as t he way i t i s except f or an addi t i onal chat wi ndow. From t he chatwi ndow, you can have r eal - t i me chat wi t h ot her user s.

Gabbl y uses I f r ame to di spl ay t he tar get websi t e. Then i n a separat e I f r ame, i t di spl ayst he chat wi ndow. The chat wi ndow uses Xml Ht t pRequest obj ect t o communi cat e chat messageswi t h t he ser ver asynchronousl y. Fi gur e xx shows how Gabbl y wor ks wi t h CNN. com:

Figure xx: Gabbly running on CNN.com As an Example

Gabbl y i s a gr eat web 2. 0 appl i cat i on t hat can add si gni f i cant val ue t o var i ous websi t es.For exampl e, i t woul d enabl e al l CNN. com r eader s t o be abl e t o i nt eract wi t h each other


13/16

i n r eal - t i me. Such r eal - t i me i nt er act i on bet ween r andom web vi si t ors t ur ns t he web f r om ast at i c, passi ve medi a i nt o an i nt er act i ve soci al envi r onment .

AJ AX I M, t he AJ AX i nst ant messenger

AJAX IM i s an AJ AX i nst ant messagi ng cl i ent . I t has a cl ean r i ch i nt er f ace f eat ur i ngmul t i pl e wi ndows t hat f eel s l i ke a normal deskt op appl i cat i on.

AJ AX+PHP CSS Popup Chat

AJAX+PHP CSS Popup Chat i s anot her AJ AX chat appl i cat i on t hat i mpl ement one t o onechat usi ng popup wi ndows. The appl i cat i on i s wr i t t en i n PHP, MySQL and i s avai l abl e f ordownl oad f r ee under GPL l i cense.

Meebo: Connect i ng Al l Popul ar I M Syst ems

Meebo i s a web- based I nst ant Messagi ng ser vi ce t hat connect s wi t h al l maj or I M syst emssuch as AOL, Yahoo and MSN. A user can l ogi n usi ng hi s/ her account f r om any of t hese I Msyst ems, r etr i eve t he buddy l i st and chat wi t h them.

By t he end of 2005, Meebo aver ages about 250, 000 l ogi ns per day. On December 7, t wel veweeks af t er l aunch, Meebo had 236, 000 successf ul l ogi ns, 6, 534, 948 messages sent and

appr oxi mat el y 13, 069, 896 t ot al messages car r i ed.


14/16

AJ AX Of f i ce Appl i cat i ons

Of f i ce appl i cat i ons are anot her cat egor y of appl i cat i ons t hat ar e not possi bl e bef or ewi t hout Aj ax ( Aj ax bei ng def i ned i n a br oad sense as DHTML and J avaScr i pt ) . There ar ewor d processor s, spr eadsheet , and sl i de show and so on.

Aj ax Word Pr ocessor s: Wr i t erl y, Aj axWord

Wr i t er l y ( ht t p: / / www. upst ar t l e. com) i s an Aj ax- based word pr ocessor , r ecent l y acqui r ed byGoogl e. Wr i t erl y enabl es onl i ne document edi t i ng f r om a br owser , shar e document si nst ant l y wi t h aut hori zed users, col l abor ate wi t h peopl e and st ore document secur el yonl i ne.

Aj axWor d ( ht t p: / / www. aj axword. com) i s an open sour ce word pr ocessor mi mi cki ng t heMi cr osof t WORD l ookandf eel , wr i t t en usi ng J avaScr i pt and DHTML. I t f eat ur es ser ver - si def i l e st or age t hat i s dedi cat ed t o each user . User s woul d use a f ami l i ar f i l e di al og t oopen or save f i l es. When cr eat i ng a new f i l e, a user wi l l be pr ompt ed t o sel ect f r om al i st of t empl at es f r om a modal di al og.

Di f f er ent f r om al l ot her web- based wor d pr ocessor s, Aj axWord f eat ur es a mul t i pl e wi ndowsi nt erf ace ( MDI ) t hat enabl es a user t o work on mul t i pl e document s at t he same t i me.


15/16

Aj ax Spr eadsheet : NumSum

Numsum ( ht t p: / / numsum. com/ ) , a web- based spr eadsheet power ed by DHTML and J avascr i pt , f ort eam col l abor at i on and dat a shar i ng. Numsum can al so wor k of f l i ne i f i t i s saved as aweb page on l ocal di sk The web page i s t he appl i cat i on. You can si mpl y cr eat espreadsheet s on t he f l y and name t hem i f you want t o keep and share f or awhi l e, or j usthave one use and move on. You can vi ew ot her peopl e s shar ed spr eadsheet s.

Mashups

A mashup i s a web appl i cat i on t hat del i ver s an i nt egr at ed experi ence by seaml essl yassembl i ng cont ent f r om more t han one sour ce and di spl ayi ng t hem i n an i nt egr at ed useri nt e r f ace.

Mashup sounds si mi l ar t o tr adi t i onal appl i cat i on i nt egrat i on. I n f act , appl i cat i oni nt egr at i on devel opers have been assembl i ng dat a f r om mul t i pl e sour ces and pr esent t hemi n one i nt egr at ed appl i cat i on f or many year s. The mai n di f f erence bet ween Mashups andt r adi t i onal appl i cat i on i nt egrat i on i s wher e the i nt egrat i on t akes pl ace. Tr adi t i onalappl i cat i on i nt egr at i on i nt egr at es dat a on t he ser ver si de ( back end i nt egr at i on) ,whi ch woul d t ypi cal l y r equi r e ser ver si de pr ogr ammi ng ski l l s ( J ava, C++, etc) and accesst o ent er pr i se ser ver - si de r esour ces. Mashups t ypi cal l y per f or m t he i nt egr at i on at t hebr owser l ayer wi t hout t ouchi ng ser ver - si de at al l ( f r ont end i nt egr at i on) , whi ch onl yr equi r es J avaScri pt and HTML codi ng ski l l s, and dat a access i s r eadi l y avai l abl e f r omeBay, Amazon, Googl e et c vi a t he publ i c I nt ernet. ( http://www.programmableweb.com/ l i st scl ose to 200 publ i c API s as of Apr i l 2006) .

Aj ax( J avaScr i pt and DHTML) i s a maj or r easons t hat enabl ed t he popul ari t y of mashups.Wi t hout t he wi de popul ar i t y and suppor t f or Aj ax, i t woul d have been ver y di f f i cul t , i fnot i mpossi bl e, t o i nt egr at e dat a f r om mul t i pl e websi t es at t he br owser l ayer .

Si mi l ar t o how bl ogs r evol ut i oni zed onl i ne publ i shi ng, mashups are r evol ut i oni zi ng webdevel opment by al l owi ng anyone t o combi ne exi st i ng dat a f r om sour ces l i ke eBay, Amazon,Googl e, Wi ndows Li ve and Yahoo i n i nnovat i ve ways. The gr eat er avai l abi l i t y of si mpl e andl i ght wei ght API ' s have made mashups r el at i vel y easy t o desi gn. They r equi r e mi ni malt echni cal knowl edge and t hus cust om mashups ar e somet i mes cr eat ed by unl i kel y i nnovat or s,combi ni ng avai l abl e publ i c dat a i n new and cr eat i ve ways. Today t her e ar e many mashupsavai l abl e on the web ( http://www.programmableweb.com/ t r acks a tot al over 600 mashups as ofApr i l 2006) , t hough a l ot of t hem ar e si mpl y cut e wi t hout si gni f i cant r eal val ue. Thei nt erest i ng t r end t o wat ch i s what mashups mean t o t he ent erpr i se. Woul d i t enabl e anew way of ent erpri se appl i cat i on i nt egr ati on? Woul d i t enabl e ent erpri ses to t hi nk


16/16

of a new way of servi ce or i ent ati on, f or exampl e, maki ng data not onl y avai l abl e vi aSOAP but al so vi a REST?

Mashup Exampl e: Housi ngMapsAl most i mmedi at el y af t er Googl e publ i shed Googl eMaps, pr ogr ammers st ar t ed bui l di ng mashupservi ces atop Googl e' s map i nf r ast r uct ur e. Housi ngMaps ( ht t p: / /

ht t p: / / www. housi ngmaps. com ) i s one of t he earl i est and best known one.Housi ngMaps i s a si t e t hat pul l s real - est at e l i st i ngs of f t he popul ar cl assi f i ed- ads si t ecr ai gs l i s t ( ht t p: / / www. crai gl i s t . org ) , uses t he addr esses of t he l i st ed homes andapart ment s i n a gi ven nei ghborhood t o f i gur e out t hei r l ati t udes and l ongi t udes, and l etsuser s vi ew t he pr opert i es on a Googl e map. Each l i st i ng i s s hown as a pushpi n, andcl i cki ng on t he pushpi n pops up a smal l wi ndow wi t h t he pri ce and somet i mes a t humbnai li mage of t he pr opert y. A l i st of t he vi si bl e pr oper t i es r uns down t he si de of t he scr een,each l i nked t o the ori gi nal Cr ai gsl i st post i ng. And because resul t s are f i l t er ed i nt opr i ce cat egor i es, user s can easi l y steer cl ear of hi gh- r ent di st r i ct s. Housi ngMaps has noaf f i l i at i on wi t h crai gsl i st or Googl e, but i s merel y accessi ng bot h websi t es vi a publ i cAPI s .

Summar yAj ax enabl ed a l ot of i nt er est i ng appl i cat i ons. Thi s secti on t al ked about t r adi t i onalof f i ce pr oduct i vi t y appl i cat i ons such as word pr ocessors, and chat/ I M. What i si mpor t ant but was not ci t ed i n t hi s sect i on ar e Aj ax appl i cat i ons i n t he ent er pr i seenvi r onment . There ar e many compani es t hat are act i vel y usi ng Aj ax f or t hei r busi nessappl i cat i ons, dr amat i cal l y enhanci ng user experi ence and pr oduct i vi t y.

Aj ax al so enabl es a new ki nd of appl i cat i on: mashups. Mashup opens up new possi bi l i t i esof how appl i cat i ons can be bui l t and how web appl i cat i ons can be consumed. Combi ng dat af r om mul t i pl e web si t es, mashups br i ng si gni f i cant addi t i onal val ue t o user s. I n t heent erpr i se envi r onment , mashups and t he t r adi t i onal i nt egr at i on appr oach woul d got oget her as t wo compl ement ary ways of ent erpr i se i nt egr at i on.

Documents

Nex a Web Ajax Characteristics