Evaluating a Visual Approach for Understanding JavaScript Source Code

Dias, Martín; Orellana, Diego; Vidal, Santiago; Merino, Leonel; Bergel, Alexandre

doi:10.1145/3387904.3389275

Cited by 11 publications

(6 citation statements)

References 31 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…To facilitate this process, software visualization tools were suggested. Hunter is a visualization tool for JavaScript applications [21]. It 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 tree map that helps programmers to orientate when navigating its structure.…”

Section: Program Understanding Toolsmentioning

confidence: 99%

Multi-Language Program Understanding Tool

Ravari,

Latih,

Mohd Zin

2023

Int. J. Adv. Sci. Eng. Inf. Technol.

View full text Add to dashboard Cite

Open-source programs have gained popularity due to their decentralized, quick development cycles and accessibility to everyone. Program understanding is vital for open-source software developers to modify or improve the code. However, one problem open-source developers face is the difficulty in understanding the programs as the program grows large and becomes complex. The current program understanding tool is inefficient because it only supports one programming language, while open-source programs are written in various languages. This paper discusses a new program understanding technique that facilitates multi-language program understanding. The proposed technique helps developers to understand open-source programs by supporting two unique features: multimedia and additional comments. We carried out this study in four stages. First, we examined available tools and techniques in software understanding to identify their strengths and weaknesses. Second, we proposed a new technique. Third, we designed a new tool to implement the new technique. Lastly, we evaluated the tool using a survey. We invited twenty users, including students and programmers, to use the system and ask for their feedback. The evaluation of the proposed techniques shows that the respondents have a positive perception as they agree that the technique helped them better understand the program. The multimedia support and an additional comment provided by the tool significantly improve user understanding of the program. For future work, we would like to explore the possibility of utilizing some machine-learning techniques to enhance the process of program understanding.

show abstract

Section: Program Understanding Toolsmentioning

confidence: 99%

Multi-Language Program Understanding Tool

Ravari,

Latih,

Mohd Zin

2023

Int. J. Adv. Sci. Eng. Inf. Technol.

View full text Add to dashboard Cite

show abstract

“…Visualizations facilitate program comprehension because they provide a graphical view of the software rather than an alphabetical sequence of source code text. To this end, researchers propose several visualizations, such as Hunter [29] which focuses on understanding the dependencies between software artefacts. In their article, Dias et al, use colors to distinguish between file branches as well as the size of the node which corresponds to the number of lines of source code in each file.…”

Section: Related Workmentioning

confidence: 99%

A New Generation of CLASS BLUEPRINT

Agouf

Ducasse

Etien

et al. 2022

2022 Working Conference on Software Visualization (VISSOFT)

View full text Add to dashboard Cite

In object-oriented programming, classes are the primary abstraction mechanism used by and exposed to developers. Understanding classes is key for the development and evolution of object-oriented applications. The fundamental problem faced by developers is that while classes are intrinsically structured entities, in IDEs they are represented as a blob of text. The idea behind the original CLASS BLUEPRINT visualization was to represent the internal structure of classes in terms of fields, their accesses, and the method call flow. Additional information was depicted using colors. The thus created visualization proved to be an effective means to support program comprehension. However, a number of omissions rendered it only partially useful.We propose CLASS BLUEPRINT V2 (in short BLUEPRINTV2), which in addition to the information depicted by CLASS BLUEPRINT also supports dead code identification, methods under tests, and calling relationships between class and instance level methods. In addition, BLUEPRINTV2 enhances the understanding of fields by showing how fields of super/subclasses are accessed. We present the enhanced visualization and report on a first validation with 26 developers and 18 projects.

show abstract

“…Many researchers have investigated the modeling and visualization of dependency graphs [21,17,18,22,30,31,15,23,14,20]. For example, Falke et al suggested a hierarchical graph layout for visualizing the functional dependency graph of software applications; by using a hierarchical layout, users can view the top-level nodes as a first overview and step-wise unfold the nodes on demand to look into details [15].…”

Section: Related Workmentioning

confidence: 99%

“…For example, Falke et al suggested a hierarchical graph layout for visualizing the functional dependency graph of software applications; by using a hierarchical layout, users can view the top-level nodes as a first overview and step-wise unfold the nodes on demand to look into details [15]. Dias et al implemented Hunter, a visual tool that includes node-link diagrams as dependency graphs for understanding JavaScript source code [14]. German used package management files to visualize the dependency graph in the hierarchical layout of three popular applications in Fink, one of the software distribution for macOS, and attempted to identify the use of applications in terms of different types of success [18].…”

Section: Related Workmentioning

confidence: 99%

REM: Visualizing the Ripple Effect on Dependencies Using Metrics of Health

Chen

Germán

2020

2020 Working Conference on Software Visualization (VISSOFT)

View full text Add to dashboard Cite

In recent years, free and open-source software (FOSS) components have become common dependencies in the development of software, both open source and proprietary. As the complexity of software increases, so does the number of software components they depend upon; in addition, software components are also depending on other components. Thus, their dependency graphs are growing in size and complexity. One of the current challenges in software development is that it is not trivial to know the full dependency graph of a software application and the vulnerabilities in it. Developers are usually aware of the direct dependencies their application requires, but might not be fully aware of the dependencies that those dependencies require (the transitive dependencies). Open-source software components, each as individual project, have health, a condition that is measured by the quality in different aspects of the development. Unfortunately, unhealthy software components as transitive dependencies can break any software application; therefore, software application developers need tools, methods and visualizations to inspect the health of these transitive dependencies and their potential impacts on the dependency graph of their software application. In this thesis, I first proposed and presented the Ripple Effect of Metrics (REM), a visualization of dependency graphs that leverages metrics of the health of dependencies. The two main features of the REM are: first, to display, and potentially summarize, the full dependency graph of an software application based on the health of each of its dependencies; and second, to display the ripple effect of vulnerable dependencies on the rest of the dependency graph. I then enhanced the features of an existing automated dependency tool in GitHub, open-source Dependabot, with the iv REMs to become the REM-Dependabot. The REM-Dependabot helps maintainers of software applications to inspect the health of all of its dependencies, especially the vulnerable dependencies with CVE security advisories, and also explore the impact that some of these dependencies might have. I designed a case study on one of the most popular NPM JavaScript applications with three use cases each with a goal that the maintainers of that application need to achieve. The case study demonstrates and argues that the REM can be beneficial to developers as an aid to a more effective dependency management with its visualization of the ripple effect on the dependency graph using health metrics activity. A major portion of this thesis has been published at 2020 Working Conference on Software Visualization (VISSOFT) [10]. v Contents Supervisory Committee

show abstract

Evaluating a Visual Approach for Understanding JavaScript Source Code

Cited by 11 publications

References 31 publications

Multi-Language Program Understanding Tool

Multi-Language Program Understanding Tool

A New Generation of CLASS BLUEPRINT

REM: Visualizing the Ripple Effect on Dependencies Using Metrics of Health

Contact Info

Product

Resources

About