Understanding JavaScript event-based interactions

Web applications have become one of the fastest growing types of software systems today. Despite their popularity, understanding the behaviour of modern web applications is still a challenging endeavour for developers during development and maintenance tasks. The challenges mainly stem from the dynamic, event-driven, and asynchronous nature of the JavaScript language. We propose a generic technique for capturing low-level event-based interactions in a web application and mapping those to a higher-level behavioural model. This model is then transformed into an interactive visualization, representing episodes of triggered causal and temporal events, related JavaScript code executions, and their impact on the dynamic DOM state. Our approach, implemented in a tool called Clematis, allows developers to easily understand the complex dynamic behaviour of their application at three different semantic levels of granularity. The results of our industrial controlled experiment show that Clematis is capable of improving the task accuracy by 61%, while reducing the task completion time by 47%.

[1]  Alberto Pan,et al.  Automating Navigation Sequences in AJAX Websites , 2009, ICWE.

[2]  Arie van Deursen,et al.  A Controlled Experiment for Program Comprehension through Trace Visualization , 2011, IEEE Transactions on Software Engineering.

[3]  Jan Carlson,et al.  Generating Feature Usage Scenarios in Client-Side Web Applications , 2013, ICWE.

[4]  Jon Howell,et al.  Mugshot: Deterministic Capture and Replay for JavaScript Applications , 2010, NSDI.

[5]  Arie van Deursen,et al.  A Systematic Survey of Program Comprehension through Dynamic Analysis , 2008, IEEE Transactions on Software Engineering.

[6]  Ivica Crnkovic,et al.  Extracting client-side web application code , 2012, WWW.

[7]  Thomas A. Corbi,et al.  Program Understanding: Challenge for the 1990s , 1989, IBM Syst. J..

[8]  Tom Pixley.  Document Object Model (DOM) Level 3 Events Specification , 2000 .

[9]  Ali Mesbah,et al.  An Empirical Study of Client-Side JavaScript Bugs , 2013, 2013 ACM / IEEE International Symposium on Empirical Software Engineering and Measurement.

[10]  Porfirio Tramontana,et al.  The DynaRIA tool for the comprehension of Ajax web applications by dynamic analysis , 2013, Innovations in Systems and Software Engineering.

[11]  Koushik Sen,et al.  Jalangi: a selective record-replay and dynamic analysis framework for JavaScript , 2013, ESEC/FSE 2013.

[12]  Claes Wohlin,et al.  Experimentation in software engineering: an introduction , 2000 .

[13]  C. Pipper,et al.  [''R"--project for statistical computing]. , 2008, Ugeskrift for laeger.

[14]  Michael D. Ernst,et al.  Interactive record/replay for web application debugging , 2013, UIST.

[15]  Peng Li,et al.  Script InSight: Using Models to Explore JavaScript Code from the Browser View , 2009, ICWE.

[16]  Silviu Andrica,et al.  WaRR: A tool for high-fidelity web application record and replay , 2011, 2011 IEEE/IFIP 41st International Conference on Dependable Systems & Networks (DSN).

[17]  Marc Roper,et al.  A novel software visualisation model to support software comprehension , 2004, 11th Working Conference on Reverse Engineering.

[18]  Benjamin B. Bederson,et al.  A review of overview+detail, zooming, and focus+context interfaces , 2009, CSUR.

[19]  Arie van Deursen,et al.  Understanding Ajax applications by connecting client and server-side execution traces , 2012, Empirical Software Engineering.

[20]  Brad A. Myers,et al.  FireCrystal: Understanding interactive behaviors in dynamic web pages , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).