Understanding JavaScript event-based interactions

Abstract

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 di↵erent 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%.

Advances in Testing JavaScript-Based Web Applications

“…Alimadadi et al [6] provide a program comprehension framework, called Clematis, for assisting developers in understanding the complex eventdriven interactions in JavaScript applications. Through a combination of automated JavaScript code instrumentation and transformation, Clematis captures a detailed trace of a web application's behavior during a particular user session.…”

“…The weakly type nature of the language makes it particularly challenging to apply many established analysis techniques that work on statically typed languages such as Java. The language also enables asynchronous callbacks through mechanism such as setTimeout and the XMLHttpRequest (XHR) for server communication, which are errorprone [5] and difficult to follow [6].…”

“…To make things even more complex, a single event can propagate on the DOM tree and trigger multiple listeners according to the event capturing and bubbling properties of the event model [14]. Understanding these event-driven interactions in JavaScript is known to be challenging for developers [6].…”

“…All of these features make JavaScript-based web applications particularly error-prone [5,13,15], difficult to understand [6,16], and challenging to analyze [9,10,17] and test [18][19][20].…”

Discovering User-Defined Event Handlers in Presence of JavaScript Libraries

“…Alimadadi et al [14] presents a tool called Clematis to help developers in understanding the complex dynamic behavior of web applications. Clematis monitors the execution of JavaScript while developers are interacting with web pages, and displays the execution trace and effects at three different semantic levels of granularity.…”