recovering the behaviour of ajax applications

Recovering the Behaviour of AJAX

Applications

Ahmed E.

Hassan

BramAdams

ShaneMcIntosh

YingZou

Traditional Web App Model

User waits while theresponse is generated!

2

AJAX Web App Model

User may interact with the page while response is

prepared

XMLHttpRequest

3

Web app engineering is hard

4

Extraordinarytime pressure

[MacDonald:WWW:2001][Pressman:IEEE

Softw:17(1):2000]

Web app engineering is hard

5

Extraordinarytime pressure

SE Process isjust overhead!

Lack of SEProcess

Web Dev

[MacDonald:WWW:2001][Pressman:IEEE

Softw:17(1):2000]

Web app engineering is hard

6

Extraordinarytime pressure

SE Process isjust overhead!

Lack of SEProcess

Web Dev

Short EmployeeTurnover Rate

I think it’s time fora change of scenery

[MacDonald:WWW:2001][Pressman:IEEE

Softw:17(1):2000]

Consider the New Developer

Out-of-datedocumentatio

n /** * @author Bob * This routine always * returns true */ bool hasDoodad() {

return false; }

7

Consider the New Developer

Out-of-datedocumentatio

n /** * @author Bob * This routine always * returns true */ bool hasDoodad() {

return false; }

Lack of seniorpersonnel

“Bob no longer works here.”

8

MailSimilar

AJAX is everywhere!Instant

It is critical that these applications are carefully designed and maintained!

10

1. Code sharing

Recovering the Behaviour of AJAX

Apps

Feature 1 Feature 2

11

2. Robustness1. Code sharing

Feature 1 Feature 2

12

Recovering the Behaviour of AJAX

Apps

Exploratory case study

LOC

Domain AJAX fordecoration

Timemanagement

Socialnews

6,744 9,380 11,368

13

Is behaviour shared amongst AJAX app

features?

+DTrace

Navigate feature 1.

foo()bar()

14

Is behaviour shared amongst AJAX app

features?

+DTrace

Navigate feature 2.

foo()bar()

foo()baz()

Feature 1

15

Is behaviour shared amongst AJAX app

features?foo()bar()

foo()baz()

Feature 1 Feature 2

foo()

SharedBehaviour

bar()

Feature 1specific

Feature 2specific

baz()

16

Traces are Indexed by Connection State

foo()bar()

Feature 1

17

Traces are Indexed by Connection State

foo()bar()

Feature 1

18

UNSENT

Traces are Indexed by Connection State

foo()bar()

Feature 1

19

UNSENTOPENED

Traces are Indexed by Connection State

foo()bar()

Feature 1

20

UNSENTOPENED

HEADER_RECEIVED

Traces are Indexed by Connection State

foo()bar()

Feature 1

21

UNSENTOPENED

HEADER_RECEIVED

LOADING

Traces are Indexed by Connection State

foo()bar()

Feature 1

22

UNSENTOPENED

HEADER_RECEIVED

LOADINGDONE

Traces are Indexed by Connection State

foo()bar()

Feature 1

23

UNSENTOPENED

HEADER_RECEIVED

LOADINGDONE

Sequence Diagrams Show Shared and Feature Behaviour

Feature-specific

24

Sequence Diagrams Show Shared and Feature Behaviour

Feature-specific

25

Sequence Diagrams Show Shared and Feature Behaviour

Feature-specific

26

Feature-specific

27

Most behaviour is shared amongst

featuresXmlHttpRequest

State

80% 50%UNSENTOPENED

HEADER_RECEIVED

LOADINGDONE

100%100%100%100%

58%100%100%62%

29

Most behaviour is shared amongst

featuresXmlHttpRequest

State

80% 50%UNSENTOPENED

HEADER_RECEIVED

LOADINGDONE

100%100%100%100%

58%100%100%62%

30

Design Features are Revealed

31

Design Features are Revealed

32

Request BatchingMechanism

Design Features are Revealed

33

Design Features are Revealed

34

Flood preventiontechnique

•Most states share a lot of behaviour

•Guided inspection shows designs for reuse

35

Is behaviour shared amongst AJAX app

features?

Yes

+DTrace

Navigate feature.

foo()bar()

Are AJAX apps prepared for loss of

network connectivity?

36

+DTrace

Navigate feature.

foo()bar()

foo()err()

Standardworkflow

Are AJAX apps prepared for loss of

network connectivity?

37

foo()bar()

foo()err()

Errorworkflow

foo()

SharedBehaviour

bar() err()

Are AJAX apps prepared for loss of

network connectivity?Standardworkflow

Standardspecific

Errorspecific

38

Studied Apps Seem Unprepared for Lack of

Connectivity

Unsettling behaviour given the trend towardswireless and mobile networking!

Vote was notsent to the server!

39

Are AJAX apps prepared for loss of

network connectivity?

40

•UI state often out-of-sync with server

Inconclusive, but unsettling

Threats to Validity

No serverside

analysis41

Threats to Validity

No serverside

analysis

Obfuscated Javascript is not handled gracefully

42

Threats to Validity

AJAXprojects

No serverside

analysis

Obfuscated Javascript is not handled gracefully

43

Threats to Validity Studiedprojects

AJAXprojects

No serverside

analysis

Obfuscated Javascript is not handled gracefully

44

Questions?

45