Separation of Concerns in AJAX - Software Engineering Konferenzen
Transcript of Separation of Concerns in AJAX - Software Engineering Konferenzen
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).
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