Evaluating a Visual Approach for Understanding JavaScript Source Code
Evaluating a Visual Approach for Understanding JavaScript Source Code
复制标题
评估理解 JavaScript 源代码的可视化方法
DOI：
--
复制
发表时间：
2020
期刊：
影响因子：
--
通讯作者：
Alexandre Bergel
中科院分区：
文献类型：
--
作者：
Martin Dias;D. Orellana;S. Vidal;Leonel Merino;Alexandre Bergel
为了表征遗留软件系统的构建块（例如，结构，依赖关系），程序员通常会花很长时间浏览其源代码。然而，现代集成开发环境（IDE）并没有提供适当的方法来有效地实现复杂的软件理解任务。为了解决这一未满足的需求，我们提出了Hunter，一个用于可视化JavaScript应用程序的工具。Hunter通过一组协调的视图来可视化源代码，这些视图包括描述系统组件之间依赖关系的节点链接图，以及帮助程序员在导航其结构时定位的树形图。在本文中，我们报告了一个对照实验，评估亨特。我们要求16名参与者解决一组软件理解任务，并根据（i）用户表现（即，完成时间、准确性和注意力），以及（ii）用户体验（即，情感、可用性）。我们发现，当使用Hunter时，程序员需要更少的时间来完成各种软件理解任务，并实现了更高的准确性。我们还发现Hunter的节点链接图面板得到了程序员的大部分注意力，而Visual Studio Code中的源代码面板则是如此。此外，程序员认为Hunter具有良好的用户体验。
To characterize the building blocks of a legacy software system (e.g., structure, dependencies), programmers usually spend a long time navigating its source code. Yet, modern integrated development environments (IDEs) do not provide appropriate means to efficiently achieve complex software comprehension tasks. To deal with this unfulfilled need, we present Hunter, a tool for the visualization of JavaScript applications. Hunter visualizes source code through a set of coordinated views that include a node-link diagram that depicts the dependencies among the components of a system, and a treemap that helps programmers to orientate when navigating its structure. In this paper, we report on a controlled experiment that evaluates Hunter. We asked 16 participants to solve a set of software comprehension tasks, and assessed their effectiveness in terms of (i) user performance (i.e., completion time, accuracy, and attention), and (ii) user experience (i.e., emotions, usability). We found that when using Hunter programmers required significantly less time to complete various software comprehension tasks and achieved a significantly higher accuracy. We also found that the node-link diagram panel of Hunter gets most of the attention of programmers, whereas the source code panel does so in Visual Studio Code. Moreover, programmers considered that Hunter exhibits a good user experience.