A arte da Refatoração em Javascript

Palestra apresentada na Unicorn Tech em Agosto de 2023

1. A REFATORAÇÃO EM JAVASCRIPT JÉSSICA FÉLIX (JESSILYNEH)
2. Eu sou a Jess Sou desenvolvedora de Software há 8 anos. Trabalho na área faz 6 anos. Estou focada em JavaScript e Front-end. Estou I .T. Architect II na F1rst (Grupo Santander) Estou Tech Lead na ONG Lacrei Saúde Estou Instrutora de Javascript na Linux Tips REFATORAÇÃO EM JAVASCRIPT @jessilyneh
3. REFATORAÇÃO EM JAVASCRIPT O que é refatoração Técnica disciplinada para reestruturar um trecho de código ou programa existente, alterando sua estrutura interna sem alterar seu comportamento externo.* *https://refactoring.com/ @jessilyneh
4. REFATORAÇÃO EM JAVASCRIPT Débito Débito técnico técnico @jessilyneh Pressão de entrega Subestimar impacto Documentação fraca Falta testes Incompetência Versionamento ruim
5. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Um code review bem feito e um código coberto com testes que realmente testam podem prevenir bugs e necessidade de refatorações maiores e problemáticas 1
6. REFATORAÇÃO EM JAVASCRIPT @jessilyneh A metáfora dos dois chapéus* Quando acrescento uma funcionalidade, não devo alterar um código existente Quando refatoro, minha meta é não acrescentar funcionalidades * Kent Back
7. Exemplo 1 : O projeto ja realiza calculo de área e perímetro. Como nova funcionalidade, também deve calcular a área de um retangulo. REFATORAÇÃO EM JAVASCRIPT @jessilyneh
8. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Você realmente precisa de uma nova funcionalidade ou já existe uma função que, estivesse estruturada melhor, resolveria o problema? 1
9. Exemplo 1 : O projeto ja realiza calculo de área de área e perímetro. Como nova funcionalidade, também deve calcular a área de um retangulo. REFATORAÇÃO EM JAVASCRIPT @jessilyneh
10. Se um código não está estruturado de forma conveniente para receber uma nova funcionalidade, refatore primeiro *Refactoring - 2' edition, M. Fowler REFATORAÇÃO EM JAVASCRIPT @jessilyneh
11. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Nomes confusos Código duplicado Funções longas Quando refatorar? Sinta o "cheiro" do código Listas longas de parâmentros Variáveis globais (Var) Dados mutáveis consumidos por varias partes Modulos frequentemente alterados por motivos diferentes Uma alteração que custa várias alterações Função separada dos dados que precisa *Refactoring - 2' edition, M. Fowler
12. REFATORAÇÃO EM JAVASCRIPT @jessilyneh A mesma "Panelinha" de dados em varios lugares Quando refatorar? Sinta o "cheiro" do código Excesso de tipos primitivos, falta de tipos significativos Switches repetidos Laços desnecessários Generalidade especulativa (funções usadas só pelos casos de testes) Estruturas denecessárias Campos definidos apenas em algumas situações *Refactoring - 2' edition, M. Fowler
13. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Cadeias de mensagens (objeto para objeto e objeto) Quando refatorar? Sinta o "cheiro" do código Encapsulamento com excesso de delegação Necessidade de acoplamento Classes fazendo coisa demais Heranças que são passadas sem serem usadas Classes de dados Classes alternativas com interfaces diferentes Usar comentários para não refatorar *Refactoring - 2' edition, M. Fowler
14. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Refatore para facilitar acréscimo de novas funcionalidades Refatore para deixar o código mais fácil de entender Refatore se algo está sendo feito de forma ruim 1 2 3 4 Refatore gradualmente as grandes mudanças 5 Refatore durante um code review https://refactoring.guru/refactoring/when
15. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Mais importante do que o ato da refatoração em si é entender o que precisa ser feito, porque precisa ser feito, as alternativas disponíveis e se vai ter algum impacto real ANTES de começar a mexer no código.
16. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Caixa de ferramentas para refatorações Alterar Declaração de Função • Adicionar Parâmetro • Alterar Assinatura • Remover Parâmetro • Renomear Função • Renomear Método • Alterar Referência para Valor • Alterar Valor para Referência • Recolher Hierarquia • Combinar Funções em Classe • Combinar Funções em Transformar • Consolidar Expressão Condicional • Decompor Condicional • Encapsular Coleção • Encapsular registro • Substituir registro por classe de dados • Encapsular variável • Encapsular campo • Campo auto- encapsulado • Extrair classe • Extrair função • Extrair método • Extrair superclasse • Extrair variável • Introduzir variável explicativa • Ocultar delegado • Classe embutida • Função embutida • Método embutido .... https://refactoring.com/catalog/
17. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Não é preciso inventar a roda. Se soubermos de que forma preferimos adotar o trajeto, podemos escolher quais ferramentas são mais adequadas e ter resultado mais ágil e previsível. 1
18. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Leia o código e identifique os pontos que separam diferentes partes do comportamento geral Elabore suas conclusões sobre o funcionamento do código e comece a decompor as partes Escreva testes que realmente testam 1 2 3 *Refactoring - 2' edition, M. Fowler 4 Faça o suficiente para que os testes passem e para deixar o código melhor do que quando você o encontrou
19. REFATORAÇÃO EM JAVASCRIPT YAGNI - You Ain't Gonna Need It. Sempre implemente as coisas quando você realmente precisa delas, nunca quando você apenas prevê que precisa delas. @jessilyneh
20. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Os Code Smells mais comuns em Javascript Código Complexo: Código excessivamente complexo e difícil de entender, como por exemplo a complexidade ciclomática, que são os níveis de ramificações que o código pode entrar (if, loops) e que pode ser extremamente difícil de prever apenas lendo o código. Número Mágico: Uso de números codificados diretamente no código em vez de usar constantes ou variáveis nomeadas, tornando o código menos legível e manutenível Método Longo: Funções ou métodos excessivamente longos que realizam muitas tarefas, tornando-os mais difíceis de entender e testar
21. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Os Code Smells mais comuns em Javascript Callback Aninhado: Aninhamento excessivo de funções de retorno de chamada, levando a um código difícil de ler e manter Cirurgia com Espingarda: Fazer alterações em várias partes do código para uma única mudança de funcionalidade, indicando uma organização de código ruim Código Morto: Código que não é mais usado ou executado, poluindo o código e potencialmente causando confusão Duplicação de Código: Blocos de código repetidos que poderiam ser refatorados em funções ou módulos reutilizáveis
22. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Os Code Smells mais comuns em Javascript An Empirical Study of Code Smells in JavaScript Projects - https://swat.polymtl.ca/~foutsekh/docs/Saboury-SANER.pdf Javascript Code Smells: 7 to Watch out For: https://www.testim.io/blog/javascript-code- smells/ 4 Code Smells That Are Probably Already in Your Code: https://www.paulsblog.dev/4-code- smells-that-are-probably-already-in-your-code/ Look for Code Smells in JavaScript: https://betterprogramming.pub/looking-for-code-smells-in- javascript-677f1a312f29
23. @jessilyneh Code smell nivel médio Refatoração em Javascript ?
24. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Precisa extrair algum trecho de código para uma função, variável ou renomear algum componente/variavel? Algo precisa ser encapsulado? É necessário mover algum recurso? 1 2 3 4 Os dados estão bem organizados? 5 Precisa simplificar alguma lógica? 6 A herança (OO) está sendo usada adequadamente?
25. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Caixa de ferramentas para refatorações Substituir algoritmo
26. @jessilyneh Code smell: Laços desnecessários nivel médio Refatoração em Javascript Substituir Algoritmo
27. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Quando você estiver fazendo algo pela primeira vez, apenas faça. Na segunda vez que fizer algo repetido, torça o nariz diante da duplicação, mas faça. Quando estiver fazendo algo pela terceira vez, comece a refatorar. 1 2 3 * Don Roberts A regra de três da refatoração*
28. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Altere passo a passo, um commit por alteração 1 2 3 refactor: extrai função de soma refactor: remove variável temporaria refactor: internaliza variável refactor: muda declaração de função refactor: divide o loop refactor: desloca instruções refactor: separa os calculos do componente de cobrança git rebase -i
29. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Demora - para não criar nada Quem é a equipe dona do código? Refatorações que impactam partes externas a aplicação Projetos legados grandes, sem testes, podem ficar piores se refatorados 1 2 3 O ruim e o feio da refatoração
30. Quanto maior o arquivo ou funcionalidade, maiores as chances de algo parar de funcionar após uma refatoração. Por isso, testes não são opcionais. REFATORAÇÃO EM JAVASCRIPT @jessilyneh
31. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Pessoas artesãs de código não são apenas as que constroem códigos consistentes de primeira mas também aquelas que pegam um código bruto e transformam numa obra de arte de legibilidade e performance
32. REFATORAÇÃO EM JAVASCRIPT @jessilyneh Pessoas artesãs de código não são apenas as que constroem códigos consistentes de primeira mas também aquelas que pegam um código bruto e transformam numa obra de arte de legibilidade e performance