Detecção de code smells em aplicações React.js com TypeScript

Abstract

Code smells are parts of the code with the potential to lead to problems. They arise from problematic procedures adopted during software design or poor practices on programming. Although code smells have been explored in various studies, they are more frequently focused on the traditional anti-patterns of the Java language, with a lack of studies dedicated to the JavaScript ecosystem and web applications. In recent years, React has become a popular library in web interface development, and more recently, developers have started using TypeScript, a superset that adds static typing to JavaScript, in conjunction with React. This research aims to identify the most common smells in the development of interfaces using the React library and TypeScript language, and to analyze how developers assess these smells in terms of frequency and negative impact on the code. Additionally, we aim to provide a way to identify these issues through the ReactSniffer tool. Initially, we conducted a grey literature review to identify these smells. Subsequently, we interviewed developers and conducted a survey within the React communities. Then, we extended ReactSniffer to detect the cataloged smells and evaluated it using the Technology Acceptance Model (TAM). As a result, we identified 6 code smells in the grey literature review. In interviews and surveys, we found that the Any Type, Multiple Booleans for State, and Non-Null Assertions smells are the most detrimental and frequent. All the smells were added to ReactSniffer, and we validated the tool with students from UFC Campus Quixadá, where we observed that the tool is useful and easy to use.