Visually Analyzing the Structure and Code Quality of Component-based Web Applications

This is the artifact for our VISSOFT21 submission of the same title.

Screenshot of the react-redux-realworld-example-app application.
A screenshot of the application loading the react-redux-realworld-example-app application.
Abstract
Monitoring code quality and dependencies is an important task to keep software maintainable. While generally well researched, only little work on visually analyzing code quality of component-based web applications exists that considers the specifics of such software systems. We propose an approach to visualize dependencies and code quality metrics of component-based JavaScript React applications. Our prototype implementation uses a node-link diagram for dependency visualization, tailored to the specific component structure of React applications and enriched with various visual cues. It is linked with different panels to show code quality and exact source code locations. Recommendations are provided how the quality of the system under analysis can be improved and refactored. We evaluated our prototype in a small user study with four participants and found that it helped in program comprehension tasks and finding refactoring opportunities.
Interactive Prototype

A good sample project to test the application: react-redux-realworld-example-app
Has to be downloaded, and extracted before it can be analyzed.

Disclaimer: this tool works completely inside your browser. No files are transferred to our servers!

Publication

First page of the publication

A preprint of the publication can be downloaded from the institute's website: Visually Analyzing the Structure and Code Quality of Component-based Web Applications @vis.wiwi.uni-due.de