Separation of Concerns in AJAX-

based web applications

- a brief overview about the current situation -

6 April 2007

Dr. Sven Abels, Petra Beenken

- Experience Report -

2

Agenda

What is AJAX

Pros and Cons

Problems in the typical development of AJAX-based web applications

Frameworks and their contribution

Example

3

What is AJAX?

Asynchronous JavaScript And XML

Idea: Update specific parts of a web page without reloading the whole page*

Ajax applications can request smaller chunks of data to update aweb page already on a user’s screen*

In the proper meaning of the definition: Only the exchange of data between client (browser) and AJAX-Engine (server side) is AJAX

AJAX is also often used as a summary for all dynamic JavaScript-based site-updates.

* compare to: [MB05], [Ga05]

4

What is AJAX?

Page update doesn’t block the websiteevent based

Result: Smoother impression, no screen reloading. Almost as in a Desktop Application

Only a JavaScript-based web browser is required No plugins, no specific operating system, etc.

Examples: Zimbra (E-Mail), Flickr, Writeley, Live.com, etc.

5

Some Problems

There are also some problems / Cons when using AJAX:Back-Button often not usable

Search Engines cannot index JavaScript-content

Browser compatibility JavaScript required (turned off?)Correct Browser? Correct version? Correct Platform (e.g. Mobile)?…

No Links (Bookmarking?)

For more details see Alex Bosworth [Bo06]

6

Development

Development (Ideal Case):Separation between MVCBusiness Logic <> Presentation

Best Case: Browser renders view, logic is kept at the server

Development (Typical Case):Business Logic inside PresentationBrowser has to handle significant parts of the logicJavaScript that handles the logic is often found directly between the HTML code in about 80% of the cases (to be verified)

This makes it very hard to exchange the HTML pages or to maintain the code.

7

Problem Specification

Things to keep in mind when developing AJAX applications “manually”:

Timeout-ManagementLimitation of the number of requests at the same timeBrowser compatibility (major)etc.

Summary: We need to face 3 kind of challenges1) Usability issues

Back-Button, etc.2) Technical issues

Browser compatibility, etc.3) “Methodological” issues

Separating presentation from Business Logic, etc.

8

Frameworks

Solution 1: ‘Good’ conceptualization and implementation usually needs Gurus and a lot of discipline

Solution 2: Application of AJAX-Frameworks1) Usability issues

Partially solved: e.g. support of Back-Button, specific URLs, etc.

2) Technical issuesCompletely solved: Those issues are usually encapsulated by the framework

3) “Methodological” issuesDepends on developerCan be supported by the framework

9

Frameworks

A brief overview about popular frameworks:

http://developer.yahoo.com/yuiYahoo!JavascriptYUI

http://labs.adobe.com/technologies/spryAdobeJavascriptSpry

http://code.google.com/webtoolkitGoogleJavaGoogle Web Toolkit

http://dojotoolkit.orgDojo FoundationJavascriptDojo

http://atlas.asp.netMicrosoftASP.NETASP.Net AJAX(ATLAS)

URLCompanyLanguageName

10

Frameworks

It can be distinguished between 2 different types:

Type 1) Javascript FrameworksAdd functionality as JavaScript-files.Typical Scenario: HTML-Code ‘calls’ javascript functionality:<… onClick='testClass.myecho(“hello world");'…/>

Problems:Again: Seduces to mix HTML, Logic, etc.Leads to 2 different languages for the same project: Needs Javascript “experts” for the Client side and e.g. C#-Experts on server side

11

Frameworks

Type 2) “Native” Frameworks

Frameworks written in the language that is also used on server side

For example Java, C#, etc.

Those Frameworks automatically convert native code to JavaScript

No JavaScript knowledge necessary any more

Often: Definition of a structure where to put the view-related code and where to put e.g. business logic (making separation easier).

12

Frameworks

Example: Google Web Toolkit

13

Advantages

Advantages (GWT example):Usage of proven tools for separating concernsNo need for mixed-languages (just java)Application of GUI-Builder (up to a certain extend / very early stage)Automatic…

serialization between classes / objects (JavaJavascript)cachingcross-browser handlingetc.

Combination with other frameworks possible

14

Example 2

Example 2: Visual Web Gui (C#)

Idea: Use “normal” VidualStudio RAD-tools that are used to create desktop applications

Afterwards, GUI is transformed into HTML with AJAX calls

Allows a very fast creation of AJAX enabled web applications

Allows creation of hybrid-applications

15

Example Project

Example Project: youpo.de-project

Web application to create personalized stamps

Developed in Java with the Google Web Toolkit

Frontend: Completely AJAX based

Backend: Application of Spring, Hibernate, etc.

Over 80 classes that needed to be transformed into Javascript. Too many at once?

16

Example

Example: youpo.de-projectExperience: Pros:

Clean separation of logic and design

Easily maintainable

Fast on both, client and server side

Experience: Cons:Compilation Java JavaScript takes time (~2-3 Minutes) and compiles the whole source each time.

Summary of Experience:In this case using a framework that enabled us to use a common programming language for all areas helped us to develop clean code and also to handle complex web application processes

Separation of Concerns in AJAX-

based web applications

- a brief overview about the current situation -

6 April 2007

Dr. Sven Abels, Petra Beenken