Visualization Tool for Understanding Asynchronous Interactions in Full-Stack JavaScript
Explore how the Sahand visualization tool provides a comprehensive understanding of asynchronous interactions in Full-Stack JavaScript apps. Learn about the challenges faced and the innovative approach used to improve program comprehension and accuracy. See key insights and results from the controlled experiment conducted by the authors.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Understanding Asynchronous Interactions In Full-Stack JavaScript Saba Alimadadi, Ali Mesbah and Karthik Pattabiraman University of British Columbia ICSE 2016 Presented by David I. Samudio *All images are taken or adapted from paper s content or presentation (http://www.ece.ubc.ca/~saba/dl/sahand-slides.pdf)
Key Insights Provides a visualization tool for program comprehension based on timelines of call executions between client and server, Sahand. Sahand visualizes client-server communication live with time series charts, and attempts to minimize the information needed to understand such process with the help of visual aids. The aids represent client-server transactions at method level; temporal primitives such as time points and intervals, and time structures for linear and branched flow of time among methods. Authors claim these visualizations made Sahand's users perform tasks 3 times more accurately than the ones in the control group(using Chrome's developer tools[network chart, perhaps?], WebStorm). 2
Problem Challenges when developing JavaScript apps: 1. Server-Side callbacks where nested callbacks create a callback hell and are executed asynchronously. 2. Network Communications where distributed nature of client- server architecture makes race conditions common. 3. Asynchronous Client Side where following requests to the server and responses from it make them hard to keep track of. 3
Approach(1/4) Complete Real Behavioral Models Are Complex Alimadadi et al. 4
Approach(2/4) Complete VS minimal 5
Approach(3/4) minimal Visualization Criteria [Aigner et al.] Time Data Representation 6
Approach(4/4) It defines a temporal model based on an abstract interpretation of client-server communication and context in full-stack JavaScript, and given an application's source code, Sahand automatically infers a behavioral graph as the application is executed. Such inference is based on collecting traces of executed calls, thanks to the instrumentation of client and server code. Collected traces include: (1) Client: timeouts, event and DOM interactions, XHRs and function executions. (2) Server: event loop, callback invocations and Node.js events. (3) Overall transactions. 7
Results For the controlled experiment, they recruited of 12 subjects within authors' university and assigned evenly to the two groups, keeping in mind that expertise was balanced in both. 8
Questions What about the callback hell on the client side? Color code transactions rather than client-and-server? What about the tasks in the experiment? 9
