SeparationofConcerns in AJAX-basedweb applications

–abrief overview about the current situation –

SvenAbels Research &Development -TIE NederlandB.V. NL-1119 PS Amsterdam,Netherlands [email protected]

Petra Beenken Dep. of ComputingScience, University of Oldenburg D-26111Oldenburg, Germany [email protected]

Abstract: AJAX becameone of the major topics in the lastyear. It is often mentioned together with the “web 2.0” concept butisactuallyindependentofit. In this short article,asummary of experienceswith AJAX is given. This article concentrates on the situation in web applicationsthat are using AJAX and how they supportthe separation of business logicand design(i.e. view).

1Introduction

AJAX is probably one of themostimportanthypes that have appearedinthe last years. Today, the word “AJAX” canbeseeneverywhere. Astudy by Gartner recently rated AJAXasone of thefivemostimportanttechnologiesinthe next twoyears with high impact for the IT landscape (see [Co06]).

AJAX standsfor A synchronous J avaScript a nd X ML.Itdescribes theideatochange specificparts of aweb page withoutreloading thewholepage. AJAX“helps speed up computer operations by cuttingdownonthe need to request fresh Webpages from a distant server computer. Instead, Ajax applications can request smaller chunks of datato updateaWebpage already on auser’sscreen.” [MB05]. Within theAJAXapproach, dataisexchanged betweenthe webbrowser andaremoteAJAX-Engine on serverside (see [Ga05]). This enables aweb application to loadand renderonly aspecific part of a webpageinstead of reloading thewholepageincase of updates.Furthermore, updates of those partsare usually performed asynchronouslywhich enables theweb application to continueworkingwhile thedata is loaded fromthe server side.

Theresult is amorefluentway to navigate in websites. This makesitpossible for websites to behave much more likeadesktop application then likeatraditional web page.Popular examples of AJAX pages are theZimbraweb mailerand Google Maps.

35 2Pros and Cons

It is obvious that AJAX becamesomesort of ahype, which makes it necessary to carefullyjudge if theapplicationofAJAXtechnology is meaningful forasolving a specificproblem or not. On theone hand,AJAXenables asmoothnavigationand a more fluent waytouse awebsite.Thisisespecially useful forwebsitesthathavetodeal with alot of smallchanges on aweb page. It’s much more comfortable to simply update the piece of information that has changed ratherthentoreloadthe whole site.

On theother hand here are certaindisadvantages that comewith AJAX. Alex Bosworth haswritten an article where he describes17differentproblemsthathecalls “AJAX Mistakes” [Bo06].The twomostimportantproblemsthatcomewith thetechnologyare theproblematicintegrationofthe back-buttonfunctionality andthe problemtomakethe website availablefor searchengines. Forexample,with theGoogleAJAX-Framework 1 , awhole AJAXapplication(page) canconsist of asinglelineofHTML-code. Allother informationand text is integrated into theweb page by Javascript whenthe user looksat thesite. This makes it almost impossible to website spiders to catch the contentofthe page.Hence,the site might not be found in web engines correctly. Because of this it is very importanttocarefully judge if AJAXisanoptionfor aspecific website or not.

Anotherproblem that is especially to be mentionedfor business informationsystems is that AJAXbased websites obviouslywon’t work whenswitchingoff Javascript since AJAX is built around this technology. Althoughcompanies tendtoenable Javascript today, there are still alot of companies that switched offJavascript support in their web browsers for security reasons.

As mentioned in thelastparagraph, AJAX shouldn’t be usedeverywhere.However, there are two good examples forthe applicationofAJAX in thesoftware sellingprocess that shouldbementioned here.The first example is the order process. When acustomer changes,e.g., thequantity of aproduct or when he changesthe payment method, thenit is usually unnecessary to reloadthe wholeweb page. InsteadofthisAJAXcouldbeused to updatethe price information or addadditional informationtothe orderpage. For example, Varien has recently shown avideo that demonstratedanAJAX-based one-page checkout and ordering process [Va06].

The secondexample is located in the customer care domain. Many software vendors offer aspecial login area for thecustomer where he candownload his licenses, updates andreceipts. AJAX canbeusedinthisareatomake thepage as comfortable as possible. Onedoesn’t have to care about thesearch engineproblem,since thosepages will usually not be indexedanyway.

1 http://code.google.com/webtoolkit

36 3The problem with current AJAX implementations

The problems,mentioned in thelastsection aremoreorlesstechnicaland might be solvedbyvarious technical improvements.Despite thoseproblems, there are some seriousconcernswith thecurrent directionofimplementations found in many AJAX basedweb applications. From asoftware engineering pointofviewone of themost important principleswhen developingcomplex web applications is to separatethe business logicfromthe view of aweb application.

This ensures that aweb applicationcan easily be changed later and it also enables designerstoimplement aspecificvisualdesignindependently from theactual business logic. In this specificconcern AJAXhas, however, leadtoastepbackwards.The main idea is averyclean andmeanapproachthatfits quite well into modern software development approaches.However, real-worldscenarioshaveshownthatAJAX misleads developers to simply add business logicdirectly to HTML/Javascript code that shouldn’t reallyhavetodealwith this since it belongs to the“view”-part of aweb application.From practical experience, about 80% of today’s AJAX projects are including some kind of importantbusinessfunctionality in their Javascriptcode2 .Wedo not state that AJAX necessarily leads to unclean code but theAJAXapproachmakes it easier forweb application developers to notseparatebetween business logic anddesign. Since AJAX is mostly based on Javascript,itiseasy for developers to addsomeclasses to theclient-sidecodeinJavascript. This Javascript code is,however, not independent from theview-code any more andthereforeweoften find amixture of source code used forrendering awebsite andofsource code,used forcalculatingbusinesslogicrelated issues.

There are basically two waystoavoid this. Oneisthe application of frameworksthat enforce theusertostrictly separate betweenlogicand design (thisisintroducedinthe next section).Another oneistocarefully avoida“mixtureofconcerns”. Thismight for example be performed by running all business logic at the serversideoritmight be performed by separating theJavascript code into differentsections that do not mixeach other. There is ageneral trade-offbetween theclean separation of concernsand the performance of adistributedsystem. Placing some uncritical part of thebusiness logicat the client side can reduce thecommunication betweenclient andserversignificantly and might often lead to afaster web application. It might in somecases therefore be a sufficient decision to place some minor part of the businesslogic withinthe client side of an AJAX based web applicationbut it needs to be ensured that thebusiness part is still separatedfromthe view part.Ofcourse this obviouslyneeds good programmers and a high disciplinewhen designingand implementinganAJAXbasedweb application.

2 Please note that this number is only based on our experience. Aformalvalidation is outstanding in order to getaconcrete percentage.

37 4Using AJAX frameworks in the developmentprocess

It has to be discussedinthe last sectionthat developing with AJAX is dangerous because it definitely tends to entrap peopletoproduce unclean code. Thereasonisthatitisvery easy to mixJavascript code for business logicand design specificHTMLcode for presentationinstead of separatingthose concerns. It is therefore meaningful to use a Framework that helpstokeep thecodeclean andtoprovide amaximum of compatibility forall webbrowsers.The following listshowsanabstract of popular frameworks.

Name Lang uag e Com p any URL ASP.Net AJAX ASP.NET Microsoft http ://atlas.asp .net Dojo Javascript Dojo Foundation http://dojotoolkit.org Google WebTk.Java Google http://code.google.com/webtoolkit SpryJavascript Adobe http://labs.adobe.com/technologies/spry YUI Javascript Yahoo! http://developer.yahoo.com/yui Table1:Brief overview about popular AJAX frameworks Agoodexampleabout how aframework canhelptosupport theseparationofconcerns is theGoogleWeb Toolkit (GWT). In this framework,the entire website is developed in Java, allowing thedevelopers to easily stick to their existingdevelopmentpatterns.After finishingthe development,the Javacodeisautomaticallyconverted into corresponding Javascript by theGWT compiler. Hence, adeveloperdoes not even have to know about Javascript when developing an AJAX based web application. Thisapproach ensures not onlycross-browser compatibilitybut it also helpstosupport theseparationofconcerns. Developers candecide where to placethe view and the business logicbysimplyplacing their code in different packages. The client package is convertedtoJavascriptand sent to theweb browserwhile the server package is used for the server side business logic.This allowsthe developer to place some business logiconthe clientside while still separatingthe view from thelogicpart(see [GW07]).

References

[Co06] Computerzeitung, Jahrgang 37,Nr. 32-33, Seite 1, 14.08.2006,Gartner,2006

[Bo06] Bosworth, A.: “Ajax Mistakes”, 2006, available online: http://alexbosworth.backpackit.com/pub/67688, last access: 02.01.2007

[Ga05] Garret, J. J.: Ajax: ANew Approach to Web Applications, Essay,Adaptive Path,2005

[GW07]Google: Google Web Toolkit DeveloperGuide, 2007, available online: http://code.google.com/webtoolkit/documentation ,lastaccess: 03.01.2007

[MB05] Mangalindan,M.; Buckman, R.:New Web-based TechnologyDraws Applications, Investors, The Wall Street Journal,03.11.2005, 2005

[Va06] Varien: “AJAX-basedOne-PageCheckout”, 2006,available online: http://www.varien.com/blog/AJAX-based-one-page-checkout-video last access: 15.10.06

38