Understanding JavaScript Event-Based Interactions Saba Alimadadi - - PowerPoint PPT Presentation

▶
understanding javascript
SMART_READER_LITE
LIVE PREVIEW

Understanding JavaScript Event-Based Interactions Saba Alimadadi - - PowerPoint PPT Presentation

Apr 18, 2023 358 likes •685 views

Understanding JavaScript Event-Based Interactions Saba Alimadadi Sheldon Sequeira Ali Mesbah Karthik Pattabiraman Motivation JavaScript Widely used, very popular Event driven, dynamic, asynchronous Difficult to understand the

slide-1
SLIDE 1

Understanding JavaScript Event-Based Interactions

Saba Alimadadi Sheldon Sequeira Ali Mesbah Karthik Pattabiraman

slide-2
SLIDE 2

Motivation

  • JavaScript

– Widely used, very popular – Event driven, dynamic, asynchronous

  • Difficult to understand the dynamic

behavior and the control flow

– Lower level events – Their interactions

1 !

slide-3
SLIDE 3

Challenge 1: Event Propagation

html head body P div a div h1 table caption tr label input table textarea button

p ! User Click

p button body div table

foo() triggered ba{() triggered bar() triggered quy() triggered bar() triggered

td td

2 !

slide-4
SLIDE 4

Challenge 2: Asynchronous Events

User logs in

Timeout for page expiry Server request for login Server response for login

3 !

slide-5
SLIDE 5

Challenge 2: Asynchronous Events

Timeout for page expiry Server request for login Server response for login

View gallery

Server request Server request Server response Server response

3 !

slide-6
SLIDE 6

Challenge 2: Asynchronous Events

Timeout for page expiry Server request for login Server response for login Server request Server request Server response Server response

View slideshow

Timeout for next image

3 !

slide-7
SLIDE 7

Challenge 2: Asynchronous Events

Timeout for page expiry Server request for login Server response for login Server request Server request Server response Server response Timeout for next image Server request image Server response Timeout callback Timeout callback page expiry

3 !

slide-8
SLIDE 8

Challenge 3: DOM State

function submissionHandler(e) { ! $('#regMsg').html("Submitted!"); var email = $('#email').val();! if (isEmailValid(email)) { ! informServer(email);! $('#submitBtn').attr("disabled", true); }! }! . . .! function informServer(email) { ! $.get('/register/', { email } , function(data) { $(’#srvrMsg').append(data); });! }!

html head Body P div a srvrMsg regMsg div caption form label input submitBtn p

5 !

slide-9
SLIDE 9

Summary of Challenges

  • Event propagation
  • Asynchronous events
  • Implications of events

6 !

slide-10
SLIDE 10

Approach

JavaScript Transformation Trace Collection Model Visualization Behavioral Model Creation

7 !

slide-11
SLIDE 11

JavaScript Transformation

  • Interposing on DOM events
  • Capturing timeouts and XHRs
  • Recording function traces
  • Extracting DOM mutations

JavaScript Transformation Trace Collection Model Creation Model Visualization

8 !

slide-12
SLIDE 12

Trace Collection

JavaScript Transformation Trace Collection Model Creation Model Visualization

  • Interposing on DOM events
  • Capturing timeouts and XHRs
  • Recording function traces
  • Extracting DOM mutations

=> Detailed Trace

DOM events functions timeouts XHRs DOM mutations

9 !

slide-13
SLIDE 13

Behavioral Model Creation

JavaScript Transformation Trace Collection Model Creation Model Visualization

  • Customized graph
  • Nodes: episodes
  • Links: temporal and causal

10 !

slide-14
SLIDE 14

Model: Episodes

Timeout ID: 1 XHR ID: 1

DOM Event

(Click)

Target: SubmitBtn

Source Result Trace

body fieldset text input button div

inform Server Anonymous

e email

isEmail Valid Submission Handler

email

XHR Event

(Response)

XHR ID: 1

Source Trace

body fieldset text input button div

data

Anonymous

Timing Event

(TO Callback)

TO ID: 1

Source Trace

body fieldset text input button div

clearMsg

Result Result

– A period of JavaScript execution – Start and end points

11 !

slide-15
SLIDE 15

Model: Links

Timeout ID: 1 XHR ID: 1

DOM Event

(Click)

Target: SubmitBtn

Source Result Trace

body fieldset text input button div

inform Server Anonymous

e email

isEmail Valid Submission Handler

email

XHR Event

(Response)

XHR ID: 1

Source Trace

body fieldset text input button div

data

Anonymous

Timing Event

(TO Callback)

TO ID: 1

Source Trace

body fieldset text input button div

clearMsg

Result Result

emporal ausal

12 !

slide-16
SLIDE 16

Model: Story

Timeout ID: 1 XHR ID: 1

DOM Event

(Click)

Target: SubmitBtn

Source Result Trace

body fieldset text input button div

inform Server Anonymous

e email

isEmail Valid Submission Handler

email

XHR Event

(Response)

XHR ID: 1

Source Trace

body fieldset text input button div

data

Anonymous

Timing Event

(TO Callback)

TO ID: 1

Source Trace

body fieldset text input button div

clearMsg

Result Result

13 !

slide-17
SLIDE 17

Visualization: Overview

JavaScript Transformation Trace Collection Model Creation Model Visualization

14 !

slide-18
SLIDE 18

Visualization: Zoom Level 1

15 !

slide-19
SLIDE 19

Visualization: Zoom Level 1

Visualization: Zoom Level 2!

1 !

slide-20
SLIDE 20

Implementation

  • Clematis

https://github.com/saltlab/clematis

  • Languages: Java, JavaScript
  • Transform JavaScript & inject toolbar via proxy
  • Provide a RESTful API for retrieving data
  • Render a web-based visualization

17 !

slide-21
SLIDE 21

Usage Scenario

18 !

slide-22
SLIDE 22

Usage Scenario

18 !

slide-23
SLIDE 23

Usage Scenario

18 !

slide-24
SLIDE 24

Usage Scenario

18 !

slide-25
SLIDE 25

Evaluation

RQ1) Does using Clematis decrease the task completion

duration for web application comprehension? RQ2) Does using Clematis increase the task completion accuracy for web application comprehension? RQ3) Are there any certain categories of tasks for which Clematis improves the performance most?

19 !

slide-26
SLIDE 26

Industrial Controlled Experiment

  • Participants

– 20 software developers (from a large SW company) – Experimental group: Clematis – Control group: Chrome, Firefox & Firebug

  • Procedure

– 5 minute tutorial on Clematis – Tasks: control flow, feature location, DOM mutations, …

  • Data collection

– Task completion duration & accuracy

20 !

slide-27
SLIDE 27

Results: Duration

Average Time (mm:ss) Per Task Average Time (mm:ss) in Total

Task! Clematis! Other!

T1! 7:00! <<! 11:27! (39%!)! T2! 3:51! <<! 7:27! (48%!)! T3! 2:02! <<! 6:18! (68%!)! T4! 2:44! <! 4:00! (32%!)!

Task! Clematis! Other!

All! 15:37! <<! 29:12! (47%!)!

21 !

slide-28
SLIDE 28

Results: Accuracy

Average Accuracy (%) Per Task Average Accuracy (%) in Total

Task! Clematis! Other!

T1! 84! >>! 28! (67%!)! T2! 97! >>! 57! (41%!)! T3! 100! >! 80! (20%!)! T4! 95! >>! 30! (68%!)!

Task! Clematis! Other!

All! 90! >>! 35! (61%!)!

22 !

slide-29
SLIDE 29

Results

Task! Improvement!

T1! (39%!)! T2! (48%!)! T3! (68%!)! T4! (32%!)!

Duration

Task! Improvement!

T1! (67%!)! T2! (41%!)! T3! (20%!)! T4! (68%!)!

Accuracy

Task! Description! T1! Following control flow in presence of asynchronous events! T2! Finding DOM mutations caused by a DOM event! T3! Locating the implementation of a malfunctioning feature! T4! Detecting control flow in presence of event propagation!

23 !

slide-30
SLIDE 30

Consistent Performance

  • T1−Ctrl

T1−Exp T2−Ctrl T2−Exp T3−Ctrl T3−Exp T4−Ctrl T4−Exp Total−Ctrl Total−Exp 20 40 60 80 100

Accuracy (%)

  • T7−Ctrl

T7−Exp T8−Ctrl T8−Exp T9−Ctrl T9−Exp T10−Ctrl T10−Exp Total−Ctrl Total−Exp

Duration (mm:ss)

0:00 8:20 16:40 25:00 33:20 41:40 50:00

Duration (mm:ss) Accuracy (%)

24 !

slide-31
SLIDE 31

1 !