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
![Page 1: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/1.jpg)
1
Approaches for Asynchronous Communication in Web Applications
Stefan Potthastand
Mike Rowe
![Page 2: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/2.jpg)
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]
![Page 3: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/3.jpg)
3
Outline of Topics
• Synchronous Web Pages• Asynchronous Web Applications• Asynchronous Web Technologies• Metrics• Results• Conclusions
![Page 4: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/4.jpg)
4
Web pages are becoming more complex and dynamic
![Page 5: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/5.jpg)
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
![Page 6: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/6.jpg)
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
![Page 7: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/7.jpg)
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
![Page 8: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/8.jpg)
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
![Page 9: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/9.jpg)
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.
![Page 10: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/10.jpg)
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
![Page 11: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/11.jpg)
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
![Page 12: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/12.jpg)
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.
![Page 13: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/13.jpg)
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.
![Page 14: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/14.jpg)
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
![Page 15: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/15.jpg)
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
![Page 16: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/16.jpg)
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
![Page 17: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/17.jpg)
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
![Page 18: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/18.jpg)
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
![Page 19: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/19.jpg)
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
![Page 20: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/20.jpg)
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
![Page 21: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/21.jpg)
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.
![Page 22: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/22.jpg)
22
Questions
– only easy ones please!
![Page 23: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/23.jpg)
23
Asynchronous Communication Architecture
AJAX
Influence to the Web
HTMLInline
FramesRDS
DOM3Load &
Save
Comparison
![Page 24: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/24.jpg)
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
![Page 25: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/25.jpg)
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
![Page 26: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/26.jpg)
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
![Page 27: Approaches for Asynchronous Communication in Web Applications](https://reader030.vdocuments.us/reader030/viewer/2022033105/56813678550346895d9e06c9/html5/thumbnails/27.jpg)
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