1
Approaches for Asynchronous Communication in Web Applications
Stefan Potthastand
Mike Rowe
2
Contact Information
Stefan Potthast, M.Sc.Computer Science DepartmentUniversity of Applied SciencesDarmstadt, [email protected]
Mike Rowe, Ph.D.Computer Science and Software Engineering DepartmentUniversity of Wisconsin - PlattevillePlatteville, WI [email protected]
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
Web Browser Web Server
Program
User Interface HTTP
Request
HTTPResponse
Synchronous Communication
Asynchronous Communication
Program
6
Asynchronous Communication Architecture
Web Browser Web Server
Program
User Interface
T&EComponent HTTP
Request
HTTPResponse
Synchronous Communication
Asynchronous Communication
Program
• 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.
Web Browser Web Server
Program
User Interface
T&EComponent
TransactionResponse
TransactionRequest
HTTPRequest
HTTPResponse
Synchronous Communication
Asynchronous Communication
Program
8
Asynchronous Communication Architecture
Web Browser Web Server
Program
User Interface
T&EComponent
TransactionResponse
TransactionRequest
HTTPRequest
HTTPResponse
Synchronous Communication
Asynchronous Communication
Program
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 TaskApproach Program Length (LOC) Code Dispersion (D)
AJAX(XHR) 26 0
HTML Inline Frames 29 0.07
Microsoft RDS 13 0.31
DOM3 Load and Save 14 0
16
Complexity: Saving Task
Approach Program Length (LOC) Code Dispersion (D)
AJAX(XHR) 27 0
HTML Inline Frames 37 0.14
Microsoft RDS(Did not support task)
N/A N/A
DOM3 Load and Save(Did not support task)
N/A N/A
17
AJAX - msecs Opera could not load more than 5KB;
TxTs TxTs TxTs
AJAX
Internet Explorer
Mozilla Firefox Opera
mean sd mean sd mean sdLoad 1 kb 82.00 6.88 289.84 11.16 107.03 9.72
Load 10 kb 93.91 2.71 296.87 3.93 180.27 49.32
Load 100 kb 295.30 17.61 485.78 9.38 332.55 12.06
Save 1 kb 200.57 6.60 297.19 2.21 331.00 9.27
Save 10 kb 499.39 8.69 663.13 20.89 N/A N/A
Save 100 kb 5340.30 249.70 5623.80 100.30 N/A N/A
18
INLINE Frames - msecs
TxTs TxTs TxTs
IFrames
Internet Explorer
Mozilla Firefox Opera
mean sd mean sd mean sd
Load 1 kb 137.47 8.63 342.67 14.56 127.80 13.34
Load 10 kb 138.58 8.77 329.36 8.78 135.00 19.55
Load 100 kb 283.88 22.00 619.85 29.99 384.88 16.31
Save 1 kb 213.92 12.00 331.87 9.66 373.24 6.65
Save 10 kb 276.82 7.33 536.92 15.66 N/A N/A
Save 100 kb 923.36 13.19 4517.30 177.58 N/A 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
TxTs TxTs TxTs
RDS
Internet Explorer Mozilla Firefox Opera
mean sd mean sd mean sd
Load 1 kb 108.43 4.05 N/A N/A N/A N/A
Load 10 kb 109.49 0.50 N/A N/A N/A N/A
Load 100 kb 249.34 7.70 N/A N/A N/A N/A
Save 1 kb N/A N/A N/A N/A N/A N/A
Save 10 kb N/A N/A N/A N/A N/A N/A
Save 100 kb N/A N/A N/A N/A N/A N/A
20
Document Object Model - msecscurrently very little support yet for this newest technology
TxTs TxTs TxTs
DOM3 LS
Internet Explorer
Mozilla Firefox Opera
mean sd mean sd mean sd
Load 1 kb 77.16 4.38 N/A N/A N/A N/A
Load 10 kb 124.83 16.60 N/A N/A N/A N/A
Load 100 kb 301.80 10.65 N/A N/A N/A N/A
Save 1 kb N/A N/A N/A N/A N/A N/A
Save 10 kb N/A N/A N/A N/A N/A N/A
Save 100 kb N/A N/A N/A N/A N/A 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
HTMLInline
FramesRDS
DOM3Load &
Save
Comparison
24
AJAX Loading Time
110
100
Internet Explorer
Opera
Firefox
0
50
100
150
200
250
300
350
400
450
500
Time (ms)
Data Amount [kb]
AJAX - Loading Data
Internet Explorer Opera Firefox
25
AJAX Saving Time:Opera was not able to save more than 5 KB
110
100
Opera
Internet Explorer
Firefox
0
1000
2000
3000
4000
5000
6000
Time [ms]
Data Amount [kb]
AJAX - Saving Data
Opera Internet Explorer Firefox
26
I-Frames Saving Date
110
100
Opera
Internet Explorer
Firefox
0
500
1000
1500
2000
2500
3000
3500
4000
4500
5000
Time [ms]
Data Amount [kb]
Inline Frames - Saving Data
Opera Internet Explorer Firefox
27
Inline Frames Loading Data
110
100
Internet Explorer
Opera
Firefox
0
100
200
300
400
500
600
700
Time [ms]
Data Amount [kb]
Inline Frames - Loading Data
Internet Explorer Opera Firefox