Detecting code smells in React-based Web apps

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 whe...

Celý popis

Uložené v:
Podrobná bibliografia
Vydané v:Information and software technology Ročník 155; s. 107111
Hlavní autori: Ferreira, Fabio, Valente, Marco Tulio
Médium: Journal Article
Jazyk:English
Vydavateľské údaje: Elsevier B.V 01.03.2023
Predmet:
Anti-patterns
Code smells
JavaScript
Maintainability
React
Software design
Anti-patterns
Code smells
Software design
Maintainability
React
JavaScript
ISSN:0950-5849, 1873-6025
On-line prístup:Získať plný text
Tagy: Pridať tag
Žiadne tagy, Buďte prvý, kto otaguje tento záznam!
Popis
Shrnutí: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. 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. 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. 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%). 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.
ISSN:0950-5849
1873-6025
DOI:10.1016/j.infsof.2022.107111