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 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


Program

User Interface

T&EComponent HTTP

Request

HTTPResponse



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


• 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.


Program

User Interface

T&EComponent

TransactionResponse

TransactionRequest

HTTPRequest

HTTPResponse



Program

8



Program

User Interface

T&EComponent

TransactionResponse

TransactionRequest

HTTPRequest

HTTPResponse



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


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


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



20

Document Object Model - msecscurrently very little support yet for this newest technology

TxTs TxTs TxTs

DOM3 LS

Internet Explorer



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




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


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

Documents

Approaches for Asynchronous Communication in Web Applications