A REFATORAÇÃO EM JAVASCRIPT JÉSSICA FÉLIX (JESSILYNEH)

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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/

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

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

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

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

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

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

@jessilyneh Code smell nivel médio Refatoração em Javascript ?

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?

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Caixa de ferramentas para refatorações Substituir algoritmo

@jessilyneh Code smell: Laços desnecessários nivel médio Refatoração em Javascript Substituir Algoritmo

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*

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

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

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

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

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