Assisting JavaScript Front-End Developers in Maintaining and Evolving React-Based Applications: Code Smells and Refactoring Operations

Abstract

Frameworks front-end baseados em JavaScript, como React e Vue, são ferramentas chave para implementar aplicações Web modernas. No entanto, devido à complexidade das interfaces Web, essas aplicações podem atingir centenas de componentes e arquivos de cédigo fonte. Consequentemente, os desenvolvedores front-end estão enfrentando desafios crescentes ao projetar e modularizar essas aplicações. No entanto, pouca pesquisa tem se aprofundado nos desafios de manutenção associados à adoção de tais frameworks. Especificamente, (1) falta-nos uma compreensão dos fatores que motivam a adoção desses frameworks, (2) falta-nos um catálogo de “code smells” comuns que podem surgir nos clientes desses frameworks, e, por fim, (3) faltam-nos informações sobre as operações de refatoração que os desenvolvedores realizam ao implementar sistemas Web usando esses frameworks. Nesse contexto, o principal objetivo desta tese de doutorado é auxiliar os desenvolvedores front-end na manutenção e evolução de seus sistemas. Para alcançar esse objetivo, apresentamos um catálogo de “code smells” comuns a esses sistemas, bem como um catálogo de refatorações que podem ser aplicadas para eliminar esses “smells” e, consequentemente, melhorar a qualidade do código front-end. Organizamos esta pesquisa em três unidades de trabalho principais. Começamos investigando os fatores que motivam a adoção de frameworks front-end em JavaScript. Particularmente, realizamos uma pesquisa com desenvolvedores de projetos JavaScript sobre sua motivação para adotar tais frameworks. No segundo estudo, propomos um catálogo de 12 “code smells” associados a problemas de design enfrentados pelos desenvolvedores ao implementar aplicações React. Além disso, para verificar se os “smells” identificados são prevalentes em projetos de software reais, também implementamos uma ferramenta chamada ReactSniffer para detectar os “smells” propostos. Como resultado, detectamos 2.565 ocorrências dos ”code smells” propostos nos 10 projetos mais populares do GitHub que utilizam React. Finalmente, em nosso último e terceiro estudo, investigamos as operações de refatoração realizadas com frequência por desenvolvedores ao manter e evoluir aplicações React. Após inspecionar manualmente 320 commits de refatoração realizados em projetos de código aberto, catalogamos 69 operações de refatoração distintas, das quais 25 são específicas para código React, 17 são adaptações de refatorações tradicionais para o contexto de React, 22 são refatorações tradicionais e seis são específicas para código JavaScript e CSS.