Desenvolvimento em React: a influência de Clean Code e Design Patterns na visão dos desenvolvedores

Abstract

CONTEXT: The development of modern web applications is experiencing a period of plurality due to the large number of platforms, frameworks, and web development tools that have emerged in recent years. With the popularization of libraries such as React, which provide great flexibility in building dynamic user interfaces, challenges related to code clarity, maintenance, and scalability also arise. In this context, the principles of clean code and design patterns play crucial roles, promoting readability, the standardization of solutions for recurring problems, and the sustainability of web software projects. MOTIVATION: Although the use of React is widespread, there are few studies in the literature that specifically explore how front-end developers apply design patterns and clean code in React applications. This gap is particularly significant given the growing demand for high-quality interfaces that are maintainable and scalable. OBJECTIVE: This study aims to investigate the use of design patterns and clean code by front-end developers using React, analyzing how these practices impact maintenance, scalability, and collaboration in React projects. It also seeks to measure developers’ level of knowledge about design patterns in React applications, identify the main challenges faced in applying these patterns, and highlight the most effective practices to mitigate issues related to code quality. METHODOLOGY: To achieve the proposed objective, the research utilized a survey directed at developers contributing to React projects. Simultaneously, data mining was conducted on code repositories on GitHub, focusing on pull requests and issues related to design patterns and clean code in projects using React from large organizations. The combination of these data allowed the identification of common patterns and practices, as well as areas for improvement. RESULTS: The results of this study are valuable for both novice developers and experienced professionals, allowing students to benefit from recommended practices and professionals to enhance the quality and maintainability of their React projects. This work relied on the combined outcomes from data mined from 63,209 threads in software repositories and from the survey that included the participation of 23 developers (of which 4 are international). Moreover, this study highlighted the importance of avoiding issues such as long method and duplicate code, further recommending the use of TypeScript to positively impact code readability and maintainability, as well as the adoption of practices such as DRY and design patterns (for example, the singleton) in React development. Finally, the survey indicated that 26% of respondents reported not using or being unaware of design patterns for the front-end (equivalent to 10% of the participants in a specific question).