.png){kind=icon}
.png){kind=icon}
Return
Detecting code smells in React-based Web apps
.png){kind=icon}
PRE
AI
DOI：10.1016/j.infsof.2022.107111.png)
.png){kind=icon}
Original request for help.png){kind=icon}
Share.png){kind=icon}
Save
Abstract
En 中文
Context: Facebook's React is a widely popular JavaScript library to build rich and interactive user interfaces (UI). However, due to the complexity of modern Web UIs, React applications can have hundreds of components and source code files. Therefore, front-end developers are facing increasing challenges when designing and modularizing React-based applications. As a result, it is natural to expect maintainability problems in React-based UIs due to suboptimal design decisions.Objective: To help developers with these problems, we propose a catalog with twelve React-related code smells and a prototype tool to detect the proposed smells in React-based Web apps.Method: The smells were identified by conducting a grey literature review and by interviewing six professional software developers. We also use the tool in the top-10 most popular GitHub projects that use React and conducted a historical analysis to check how often developers remove the proposed smells.Results: We detect 2,565 instances of the proposed code smells. The results show that the removal rates range from 0.9% to 50.5%. The smell with the most significant removal rate is Large File (50.5%). The smells with the lowest removal rates are Inheritance Instead of Composition (IIC) (0.9%), and Direct DOM Manipulation (14.7%). Conclusion: The list of React smells proposed in this paper as well as the tool to detect them can assist developers to improve the source code quality of React applications. While the catalog describes common problems with React applications, our tool helps to detect them. Our historical analysis also shows the importance of each smell from the developers' perspective, showing how often each smell is removed.
Keywords:
JavaScript
React
Anti -patterns
Code smells
Maintainability
Software design
Journal
IF:
4.3
Papers:
3.7K
Citations:
7.7K