Approaches for Asynchronous Communication in Web Applications

1
Approaches for Asynchronous Communication in Web
Applications

• Stefan Potthastand Mike Rowe

2
Contact Information

• Stefan Potthast, M.Sc.
• Computer Science Department
• University of Applied Sciences
• Darmstadt, Germany
• stefan.potthast_at_sopheon.de

• Mike Rowe, Ph.D.
• Computer Science and
• Software Engineering Department
• University of Wisconsin - Platteville
• Platteville, WI 53818
• rowemi_at_uwplatt.edu

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 (TE) process is added
  to the browser.
• The TE 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 TE
• The TE in turn sends requests for content to the
  server.
• When content is returned the TE 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) LOCsi in the main block, LOCso
  outside the main block, D LOCso / (LOCsi
  LOCso)
• 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
16
Complexity Saving Task
17
AJAX - msecs Opera could not load more than 5KB
18
INLINE Frames - msecs
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
20
Document Object Model - msecscurrently very
little support yet for this newest technology
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 Potthasts Thesis.

22
Questions

• only easy ones please!

23
Influence to the Web
Comparison
AJAX
HTMLInlineFrames
RDS
DOM3Load Save
Asynchronous Communication Architecture
24
AJAX Loading Time
25
AJAX Saving TimeOpera was not able to save more
than 5 KB
26
I-Frames Saving Date
27
Inline Frames Loading Data