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

2. 2 Contact Information Stefan Potthast, M.Sc. Computer Science Department University of Applied Sciences Darmstadt, Germany stefan.potthast@sopheon.de Mike Rowe, Ph.D. Computer Science and Software Engineering Department University of Wisconsin - Platteville Platteville, WI 53818 rowemi@uwplatt.edu

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

4. 4 Web pages are becoming more complex and dynamic

5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15 Complexity: Loading Task ApproachProgram Length (LOC)Code Dispersion (D) AJAX(XHR)260 HTML Inline Frames290.07 Microsoft RDS130.31 DOM3 Load and Save140

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

17. 17 AJAX - msecs Opera could not load more than 5KB; AJAX Internet Explorer Mozilla FirefoxOpera meansdmeansdmeansd Load 1 kb82.006.88289.8411.16107.039.72 Load 10 kb93.912.71296.873.93180.2749.32 Load 100 kb295.3017.61485.789.38332.5512.06 Save 1 kb200.576.60297.192.21331.009.27 Save 10 kb499.398.69663.1320.89N/A Save 100 kb5340.30249.705623.80100.30N/A

18. 18 INLINE Frames - msecs IFrames Internet Explorer Mozilla FirefoxOpera meansdmeansdmeansd Load 1 kb 137.478.63342.6714.56127.8013.34 Load 10 kb 138.588.77329.368.78135.0019.55 Load 100 kb 283.8822.00619.8529.99384.8816.31 Save 1 kb 213.9212.00331.879.66373.246.65 Save 10 kb 276.827.33536.9215.66N/A Save 100 kb 923.3613.194517.30177.58N/A

19. 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 108.434.05N/A Load 10 kb 109.490.50N/A Load 100 kb 249.347.70N/A Save 1 kb N/A Save 10 kb N/A Save 100 kb N/A

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

21. 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. 22 Questions – only easy ones please!

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

24. 24 AJAX Loading Time

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

26. 26 I-Frames Saving Date

27. 27 Inline Frames Loading Data