1 approaches for asynchronous communication in web applications stefan potthast and mike rowe
TRANSCRIPT
![Page 1: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/html5/thumbnails/1.jpg)
1
Approaches for Asynchronous Communication in Web Applications
Stefan Potthastand
Mike Rowe
![Page 2: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/html5/thumbnails/3.jpg)
3
Outline of Topics
• Synchronous Web Pages• Asynchronous Web Applications• Asynchronous Web Technologies• Metrics• Results• Conclusions
![Page 4: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/html5/thumbnails/4.jpg)
4
Web pages are becoming more complex and dynamic
![Page 5: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/html5/thumbnails/22.jpg)
22
Questions
– only easy ones please!
![Page 23: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/html5/thumbnails/23.jpg)
23
Asynchronous Communication Architecture
AJAX
Influence to the Web
HTMLInline
FramesRDS
DOM3Load &
Save
Comparison
![Page 24: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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: 1 Approaches for Asynchronous Communication in Web Applications Stefan Potthast and Mike Rowe](https://reader035.vdocuments.mx/reader035/viewer/2022062423/56649e9f5503460f94ba2352/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