understanding javascript event-based interactionssaba/dl/clematis-slides.pdf · dom event (click)...
TRANSCRIPT
![Page 1: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/1.jpg)
Understanding JavaScript Event-Based Interactions
Saba Alimadadi Sheldon Sequeira
Ali Mesbah Karthik Pattabiraman
![Page 2: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/2.jpg)
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!
![Page 3: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/3.jpg)
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
baz() triggered
bar() triggered
qux() triggered
bar() triggered
td td
2!
![Page 4: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/4.jpg)
Challenge 2: Asynchronous Events
User logs in
Timeout for page expiry Server request for login Server response for login
3!
![Page 5: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/5.jpg)
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!
![Page 6: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/6.jpg)
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!
![Page 7: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/7.jpg)
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!
![Page 8: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/8.jpg)
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!
![Page 9: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/9.jpg)
Summary of Challenges
• Event propagation
• Asynchronous events
• Implications of events
6!
![Page 10: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/10.jpg)
Approach
JavaScript
Transformation
Trace
Collection
Model
Visualization
Behavioral
Model Creation
7!
![Page 11: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/11.jpg)
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!
![Page 12: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/12.jpg)
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!
![Page 13: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/13.jpg)
Behavioral Model Creation
JavaScript
Transformation
Trace
Collection
Model
Creation
Model
Visualization
• Customized graph
• Nodes: episodes • Links: temporal and causal
10!
![Page 14: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/14.jpg)
Model: Episodes
Timeout ID: 1XHR ID: 1
DOM Event(Click)Target: SubmitBtn
Source
Result
Trace
body
fieldset
text input
button div
informServer Anonymous
e email
isEmailValid
SubmissionHandler
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!
![Page 15: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/15.jpg)
Model: Links
Timeout ID: 1XHR ID: 1
DOM Event(Click)Target: SubmitBtn
Source
Result
Trace
body
fieldset
text input
button div
informServer Anonymous
e email
isEmailValid
SubmissionHandler
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!
![Page 16: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/16.jpg)
Model: Story
Timeout ID: 1XHR ID: 1
DOM Event(Click)Target: SubmitBtn
Source
Result
Trace
body
fieldset
text input
button div
informServer Anonymous
e email
isEmailValid
SubmissionHandler
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!
![Page 17: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/17.jpg)
Visualization: Overview JavaScript
Transformation
Trace
Collection
Model
Creation
Model
Visualization
14!
![Page 18: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/18.jpg)
Visualization: Zoom Level 1
15!
![Page 19: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/19.jpg)
Visualization: Zoom Level 1
Visualization: Zoom Level 2!1!
![Page 20: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/20.jpg)
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!
![Page 21: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/21.jpg)
Usage Scenario
18!
![Page 22: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/22.jpg)
Usage Scenario
18!
![Page 23: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/23.jpg)
Usage Scenario
18!
![Page 24: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/24.jpg)
Usage Scenario
18!
![Page 25: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/25.jpg)
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!
![Page 26: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/26.jpg)
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!
![Page 27: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/27.jpg)
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!
![Page 28: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/28.jpg)
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!
![Page 29: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/29.jpg)
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!
![Page 30: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/30.jpg)
Consistent Performance
●
●
●
●
●●
●
● ●
●
T1−C
trl
T1−Exp
T2−C
trl
T2−Exp
T3−C
trl
T3−Exp
T4−C
trl
T4−Exp
Total−Ctrl
Total−Exp
020
4060
80100
Accuracy (%)
●
●
T7−C
trl
T7−Exp
T8−C
trl
T8−Exp
T9−C
trl
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!
![Page 31: Understanding JavaScript Event-Based Interactionssaba/dl/clematis-slides.pdf · DOM Event (Click) Target: SubmitBtn Source Result Trace body fieldset text input button div inform](https://reader034.vdocuments.us/reader034/viewer/2022042308/5ed410d28d46b66d2263641b/html5/thumbnails/31.jpg)
1!