understanding asynchronous interactions in full-stack
TRANSCRIPT
Understanding Asynchronous Interactions
In Full-Stack JavaScript
Saba Alimadadi, Ali Mesbah and Karthik Pattabiraman
ICSE [email protected]
Sahand: http://github.com/saltlab/sahand
1
JavaScript:Most popular language
JavaScript:Top languages on GitHub
Understanding JavaScript Apps
2
Whole Picture
Challenge 1. Server-Side Callbacks
• Asynchronous execution• Callback hell
3
Little pyramidof doom
fs.readdir(source, function(err, files) {files.forEach(function(filename, fileIndex)
gm(source + filename).size(function(err, values) {widths.forEach(function(width, widthIndex) {
this.resize(w, h).write(newName, function(err) {})
})})
})}) // example from callbackhell.com
Challenge 2. Network Communications
4
client
server
request 1request 2
processing time 1processing time 2
response 1response 2
Time
Challenge 3. Asynchronous Client Side
5
Time
interval
response(timeout)
XHR
server
Summary of Challenges
• Server-side callbacks• Network communication• Asynchronous client side
6
Zaidman et al.EMSE’13
Hibschman et al. UIST’14
Alimadadi et al.ICSE’14, ECOOP’15
Related work:
Our Approach: Sahand
7
1. Instrument automatically
2. Trace full-stack execution
3. Infer a behavioural model
4. Visualize the model
InaAct Act
Act
ActSch
Application
Behavioral Model
8
NodesLifelines of function executions
Act
ActSch Ina Act
Act
(A)Synchronous client/server events
Links Time, Type, Direction
foo()
bar()
baz()
event
Act Ina Act
Real Behavioural Models Are Complex
9
10
foo()
bar()
baz()
app.js:45
qux()
active
active
active
active
active
act
activescheduled
VisualizationClient-SideAnalysis
Server-SideAnalysis
Connecting client and server
baz()
app.js:45
qux()
active
active
act
activescheduled
foo()
bar()
active
active
active
11
VisualizationClient-SideAnalysis
Server-SideAnalysis
Time Temporal primitives Time points
Events and DOM interactionsTimeouts
XHRs
Event loop
foo()
bar()
active
active
active
baz()
app.js:45
qux()
active
active
act
activescheduled
12
VisualizationClient-SideAnalysis
Server-SideAnalysis
Time Temporal primitives Time intervals
Function executions
Callbacks
baz()
app.js:45
qux()
active
active
act
activescheduled
foo()
bar()
active
active
active
13
VisualizationClient-SideAnalysis
Server-SideAnalysis
Time Structure of time Linear & Branching
baz()
app.js:45
qux()
active
active
act
activescheduled
foo()
bar()
active
active
active
14
VisualizationClient-SideAnalysis
Server-SideAnalysis
Time Structure of time Linear & Branching
Implementation:Sahand
• Express.js application• Proxy -> dynamic instrumentation• Esprima, Estraverse, Escodegen
https://github.com/saltlab/sahand
15
Evaluation
Does using Sahand improve developers’ performance in program comprehension tasks?
16
Controlled Experiment
• Sahand’s effect on developers’ performance• 12 Participants• Object: full-stack JavaScript application
17
Controlled Experiment
• Design– Control: tool and expertise level – Measure: performance
• Procedure– Pre-questionnaire– Tutorial– Tasks– Post-questionnaire
18
Results Highlight
19
●
T1−Exp
T1−C
trl
T2−Exp
T2−C
trl
T3−Exp
T3−C
trl
Tot−Exp
Tot−Ctrl
0
20
40
60
80
100
Accuracy (%)
Using Sahand3 times more accuracy
In the same time
Accu
racy
Tasks
Control group
Experimental (Sahand) group
20Saba Alimadadi Hire Me!
Sahand: http://github.com/saltlab/sahand