Scoped: Evaluating A Composite Visualisation of the Scope Chain Hierarchy Within Source Code

Abstract

This paper presents two studies that evaluate the effectiveness of a software visualisation tool which uses a composite visualisation to encode the scope chain and information related to the scope chain within source code. The first study evaluates the effectiveness of adding the composite visualisation to a source code editor to help programmers understand scope relationships within source code. The second study evaluates the effectiveness of each individual component within the composite visualisation. The composite visualisation is composed of a packed circle tree diagram (overview component) and a list view (detail view component). The packed circle tree functions as an abstract mini-map to provide viewers with a high-level overview of the scope chain hierarchy within a source code document. The list view provides additional information about identifiers (variables, functions, and parameters) that are accessible from the scope within which the cursor is located, in the source code document. Both studies utilise a between-subject design, in which groups of participants were presented with source code fragments and asked to answer a series of code understanding questions. The results of the studies indicate that adding a composite visualisation to a source code editor can have a positive effect on code understanding, especially when the textual representation of the code no longer corresponds to the actual behaviour of the code (as is the case, for example, in languages such as JavaScript that implement variable hoisting).

The Code Mini-Map Visualisation: Encoding Conceptual Structures Within Source Code

“…Interesting questions in the context of scope issues include where (in which scope) was a specific variable defined and where in the code can a global variable be changed. Bacher et al [11] conducted an analysis of the 50 most popular stack overflow questions in the context of scope understanding issues within source code. The authors found that programmers have difficultly understanding issues regarding the declaration, accessibility, and state of an identifier (variable, function, or parameter).…”

“…As many source code maintenance and comprehension issues are due to the poor understanding of scope [11], we believe that adding a layer to the code mini-map visualisation which encodes information related to the scope chain hierarchy within a source code document can facilitate source code understanding. Hence, we will be focusing on tasks that evaluate a programmer's ability to answer questions such as in which scope is an identifier declared, and can an identifier be accessed from a specific line of code?…”

The human experience of comprehending source code in virtual reality

“…For programmers, one of the most challenging and time-consuming tasks is comprehending source code (Steinmacher et al 2016;Al-Saiyd 2017;Bacher et al 2017;Khomokhoana and Nel 2019). Current solutions to address these problems include visualizations to display code, enhanced syntax highlighting, and code comprehension through games (Merino et al 2018;Oberhauser and Lecon 2017;Wiese et al 2019).…”