approaches for asynchronous communication in web applications
DESCRIPTION
Approaches for Asynchronous Communication in Web Applications. Stefan Potthast and Mike Rowe. Stefan Potthast, M.Sc. Computer Science Department University of Applied Sciences Darmstadt, Germany [email protected]. Mike Rowe, Ph.D. Computer Science and - PowerPoint PPT PresentationTRANSCRIPT
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