An Empirical Evaluation of Code Smell Detection in Angular Applications

1. Declaração do Problema

Embora os code smells (falhas de design que indicam problemas estruturais mais profundos) tenham sido extensivamente estudados em sistemas orientados a objetos e em frameworks front-end específicos como React, há uma lacuna significativa de conhecimento empírico sobre code smells específicos do Angular.

• A Lacuna: A arquitetura única do Angular (injeção de dependência, ligação de dados bidirecional, integração com TypeScript e sintaxe de template específica) cria desafios de design distintos que detectores de smells genéricos ou ferramentas focadas em React não conseguem abordar adequadamente.
• A Necessidade: Os desenvolvedores carecem de um catálogo sistemático de anti-padrões específicos do Angular e de ferramentas automatizadas para detectá-los, o que leva a problemas de manutenibilidade, degradação arquitetural e aumento da dívida técnica em Single-Page Applications (SPAs) de grande escala.

2. Metodologia

O estudo empregou uma Revisão de Literatura Cinza (RLC) seguida pelo desenvolvimento e avaliação empírica de uma ferramenta de análise estática.

A. Revisão de Literatura Cinza

• Estratégia de Busca: Os autores buscaram por "Angular" combinado com sinônimos para "code smell" (por exemplo, anti-padrão, má prática) no Google.
• Critérios de Seleção: As fontes foram filtradas com base em credibilidade (afiliação a organizações do Angular) e expertise do autor.
• Extração de Dados: De um conjunto inicial de 128 fontes, 58 foram selecionadas para análise. Análise temática foi utilizada para identificar padrões recorrentes.
• Validação: Uma lista candidata de smells foi refinada cruzando referências com catálogos de smells existentes para React (Ferreira & Valente) e exigindo a aparição em pelo menos duas fontes distintas.
• Resultado: Este processo resultou em 11 code smells distintos.

B. Desenvolvimento da Ferramenta

• Arquitetura: Os autores desenvolveram uma ferramenta de análise estática extensível que integra detectores existentes (ReactSniffer e SniffTSX) com novos módulos específicos do Angular.
• Fluxo de Trabalho:
  1. Leitor de Arquivos: Percorre o projeto e identifica o framework (React vs. Angular) por meio de arquivos de configuração (por exemplo, package.json).
  2. Extrator de AST: Utiliza o parser Babel para gerar Árvores de Sintaxe Abstrata (AST) para arquivos .ts e .html.
  3. Controlador: Encaminha a AST para o detector apropriado (ReactSniffer para React, SniffTSX para problemas compartilhados de TypeScript e novos módulos para Angular).
  4. Saída: Relata os smells via CLI com localizações de arquivo e números de linha.

C. Avaliação Empírica

• Conjunto de Dados: Um conjunto de dados validado manualmente foi construído a partir de 10 projetos Angular de código aberto no GitHub.
• Verdade Terrena (Ground Truth): 150 instâncias de 5 smells específicos foram identificadas manualmente e depois refatoradas para criar versões "limpas" para teste.
• Métricas: O desempenho da ferramenta foi medido usando Precisão, Revocação (Recall), F1-score e Acurácia.

3. Principais Contribuições

A. O Catálogo de Code Smells do Angular

O estudo identificou e categorizou 11 code smells, divididos em duas categorias:

1. Cross-Framework (6 smells): Questões comuns a arquiteturas baseadas em componentes (também encontradas no React).
   • Componente Grande
   • Manipulação Direta do DOM
   • Herança em vez de Composição
   • Muitas Entradas (Too Many Inputs) (análogo a "Muitas Props" no React)
   • Prop Drilling
   • Arquivo Grande
   • Componente Duplicado
2. Específicos do Angular (5 smells): Questões inerentes à sintaxe e mecanismos do Angular.
   • Vinculação Ineficiente de Métodos em Templates: Chamada de funções não puras diretamente em templates (por exemplo, {{ calculateTotal() }}), causando degradação de desempenho devido à execução repetida durante a detecção de mudanças.
   • Uso Excessivo do Tipo Any: Uso excessivo do tipo any do TypeScript, anulando a segurança de tipos.
   • Comunicação Excessiva Pai-Filho: Excesso de dependência de @ViewChild para manipular diretamente o estado do filho, criando acoplamento forte.
   • Serviços Acoplados: Serviços que lidam com lógica de negócios não relacionada (violando a Responsabilidade Única).
   • Arquivo Grande: Arquivos monolíticos contendo múltiplos componentes, serviços e lógica.

B. Ferramenta de Detecção Automatizada

Uma ferramenta unificada e extensível capaz de detectar smells nos ecossistemas React e Angular, demonstrando que a detecção cross-framework é viável por meio de análise modular de AST.

4. Resultados

Desempenho de Detecção

A ferramenta alcançou alto desempenho de detecção em todos os smells avaliados:

• Acurácia: Consistentemente acima de 0,88 para todos os smells testados.
• F1-Score: Variou de 0,89 a 1,00.
• Pontuações Perfeitas: Smells como Uso Excessivo do Tipo Any, Herança em vez de Composição e Muitas Entradas alcançaram Precisão, Revocação e F1-score perfeitos (1,00) devido a padrões sintáticos claros.
• Desafios: Componente Grande e Arquivo Grande mostraram precisão ligeiramente menor (0,81 e 0,90, respectivamente). Isso é atribuído à dependência da ferramenta de limites absolutos de contagem de linhas, que podem sinalizar componentes grandes, mas logicamente coesos, como smells (falsos positivos).

Análise Comparativa

• Sobreposição: 6 dos 11 smells identificados são compartilhados com o React, sugerindo que muitas falhas de design front-end são independentes do framework.
• Divergência: Smells específicos do React relacionados a JSX e componentes não controlados estavam ausentes no Angular, enquanto smells específicos do Angular relacionados a injeção de dependência e vinculação de template eram únicos.

5. Significado e Implicações

• Primeiro do Gênero: Este é o primeiro estudo a propor um catálogo sistemático de code smells específicos do Angular derivado de literatura cinza e validado por meio de uma ferramenta automatizada.
• Utilidade Prática: As descobertas fornecem uma base concreta para desenvolvedores refatorarem aplicações Angular, focando em questões críticas como desempenho de template (vinculação de métodos) e segurança de tipos (uso de any).
• Avanço em Ferramentas: O estudo prova que arquiteturas existentes de detecção de smells podem ser estendidas para suportar múltiplos frameworks, abrindo caminho para plugins de IDE unificados que oferecem feedback em tempo real sobre a qualidade do design.
• Valor Pedagógico: O catálogo serve como um recurso educacional, ajudando desenvolvedores a entender armadilhas arquitetônicas comuns no Angular e promovendo melhores padrões de design (por exemplo, favorecer a composição em vez da herança).
• Pesquisa Futura: Os autores sugerem que essas descobertas podem ser generalizadas para outros frameworks (Vue, Svelte) e que trabalhos futuros devem focar em refinar a lógica de detecção para reduzir falsos positivos em smells baseados em tamanho e expandir o catálogo com regras mais complexas e conscientes do contexto.

Conclusão

O artigo conecta com sucesso a lacuna entre princípios de design teóricos e implementação prática no Angular. Ao identificar 11 smells específicos e demonstrar a viabilidade de detectá-los com alta precisão, os autores fornecem uma base sólida para melhorar a manutenibilidade e a qualidade das aplicações Angular modernas.