1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe

2 Contact Information Stefan Potthast, M.Sc. Computer Science Department University of Applied Sciences Darmstadt, Germany Mike Rowe, Ph.D. Computer Science and Software Engineering Department University of Wisconsin - Platteville Platteville, WI

3 Outline of Topics Synchronous Web Pages Asynchronous Web Applications Asynchronous Web Technologies Metrics Results Conclusions

4 Web pages are becoming more complex and dynamic

5 Synchronous Communication Architecture UI direct initiates the HTTP request and is blocked until the response is returned. This loads a complete new page  often high latency – high bandwidth requirements Page metaphor of the Web

6 Asynchronous Communication Architecture Transaction and Embedding (T&E) process is added to the browser. The T&E process handles communications with the Web Server This frees the User Interface from blocking

7 Asynchronous Communication Architecture Rather than making HTTP Requests directly, the UI sends asynchronous requests to the T&E The T&E in turn sends requests for content to the server. When content is returned the T&E embeds the new content. Under this mechanism the UI is not blocked and it more closely resembles a desktop application. This mechanism has been available for many years, being initially deployed as ActiveX.

8 Asynchronous Communication Architecture  Blocking of the interface for User  Loading of a complete new page only the changed data needed  Often high Lower latency and Lower Bandwidth requirements.  Page metaphor of the Web User Experience is that of a Desktop Application

9 AJAX In 2005 Jesse James Garrett described a combination of already existing technologies for asynchronous JavaScript and XML (AJAX). This introduction of the term AJAX, gave the functionality a common name. Often Ajax (lower case “jax”) is used for non-JavaScript and XML asynchronous implementations.

10 Asynchronous Technologies Studied Four different approaches were studied: AJAX HTML Inline Frames MS Remote Data Services (RDS) Document Object Model (DOM) Level 3 Load and Save

11 Tests An application with two primary parts was implemented. Data Loading – downloading data from the Server to the Browser Data Sending – sending data from the Browser to the Server

12 Metrics Complexity LOCs: needed to implement applications Dispersion (D): LOCs i in the main block, LOCs o outside the main block, D = LOCs o / (LOCs i + LOCs o ) The fewer LOCs and low D we believe increase maintainability.

13 Metrics Runtimes Data Loading time - the time needed to download data from the Server to the Browser Data Sending time – the time needed to sending data from the Browser to the Server Each of above were tested with 1KB, 10KB and 100KB datasets.

14 Metrics Features – subjective measure of the richness of each technologies feature set. Drawbacks – subjective measure of shortcomings of each technology. Browser Support – each test was attempted on Firefox, Opera, and IE 6.0

15 Complexity: Loading Task ApproachProgram Length (LOC)Code Dispersion (D) AJAX(XHR)260 HTML Inline Frames Microsoft RDS DOM3 Load and Save140

16 Complexity: Saving Task ApproachProgram Length (LOC)Code Dispersion (D) AJAX(XHR)270 HTML Inline Frames Microsoft RDS (Did not support task) N/A DOM3 Load and Save (Did not support task) N/A

17 AJAX - msecs Opera could not load more than 5KB; AJAX Internet Explorer Mozilla FirefoxOpera meansdmeansdmeansd Load 1 kb Load 10 kb Load 100 kb Save 1 kb Save 10 kb N/A Save 100 kb N/A

18 INLINE Frames - msecs IFrames Internet Explorer Mozilla FirefoxOpera meansdmeansdmeansd Load 1 kb Load 10 kb Load 100 kb Save 1 kb Save 10 kb N/A Save 100 kb N/A

19 MS Remote Data Services - msecs Note RDS is only supported by IE and only on server side; very fast loading; currently this technology is deprecated RDS Internet ExplorerMozilla FirefoxOpera meansdmeansdmeansd Load 1 kb N/A Load 10 kb N/A Load 100 kb N/A Save 1 kb N/A Save 10 kb N/A Save 100 kb N/A

20 Document Object Model - msecs currently very little support yet for this newest technology DOM3 LS Internet Explorer Mozilla FirefoxOpera meansdmeansdmeansd Load 1 kb N/A Load 10 kb N/A Load 100 kb N/A Save 1 kb N/A Save 10 kb N/A Save 100 kb N/A

21 Conclusions Inline Frames were not originally meant for asynchronous communication; high complexity RDS provides very fast loading, but is too specialized as well as being nearly dead DOM3 LS is still in the fledgling stages; poor browser support AJAX performed consistently well in all decisive criteria. For a much more detailed report on this problem see Stefan Potthast’s Thesis.

22 Questions – only easy ones please!

23 Asynchronous Communication Architecture AJAX Influence to the Web HTML Inline Frames RDS DOM3 Load & Save Comparison

24 AJAX Loading Time

25 AJAX Saving Time: Opera was not able to save more than 5 KB

26 I-Frames Saving Date

27 Inline Frames Loading Data