REFATORAÇÃO EM ORIENTAÇÃO A OBJETOS: UMA ABORDAGEM ARQUITETURAL 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 conceito de refatoração paradigma de orientação a objetos trabalhe com alguma linguagem como Java, C++, C#, Python, Ruby ou PHP entenda a diferença entre linguagem dinamicamente tipada e estaticamente tipada Conceito de S.O.L.I.D. Para essa palestra, eu espero que você já saiba: @jessilyneh

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Usar uma linguagem de Orientação a Objetos torna o polimorfismo seguro e conveniente porque qualquer dependência de código fonte pode ser invertida 1 Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh FAN - Função de Alto Nível FNM - Função de Nivel Médio FBN - Função de Baixo Nível 1 Software sem polimorfismo O Fluxo de controle era ditado pelo comportamento do sistema e as dependências do código fonte eram ditadas pelo fluxo de controle Dependencia de codigo fonte Fluxo de controle Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh FAN - Função de Alto Nível FNM - Função de Nivel Médio FBN - Função de Baixo Nível Software com polimorfismo A dependência do código fonte entre FAN1 e a interface aponta a direção contrária com o fluxo de controle, a inversão de dependência. Dependencia de codigo fonte Fluxo de controle Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Sistemas escritos em OO tem controle total da direção das dependências do código fonte do sistema. Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh O que isso significa? 1 Dependencia de codigo fonte Fluxo de controle Reorganizar dependências de código fonte para que o banco de dados e a interface de usuário dependam das regras de negocio, e não o oposto. Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Se os módulos podem ser implantados de forma independente, também podem ser desenvolvidos de forma independente e por equipes diferentes. 1 Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Tolerar mudanças, ser fácil de entender e composto de componentes que possam ser reaproveitados S.O.L.I.D. Nos diz como organizar funções e estruturas de dados em classes e como essas classes deve ser interconectadas Em nível de módulo, o software deve: Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Cada módulo tenha apenas uma unica razão para mudar e seja responsável por apenas um ator (grupo). Separe o código que dá apoio a atores diferentes. Coesão é a força que amarra o código responsável a um unico ator. S.O.L.I.D. SRP ( Principio da Responsabilidade Única): Em nível de módulo: Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Principio do fechamento comum, no nível dos componentes. Quando é necessário fazer uma mudança em um código, o ideal é que essas mudanças ocorram em apenas um componente, não em vários. Eixo de mudança, responsável por criar limites arquiteturais Mudanças ocorrem em torno do eixo e sugerem que cada responsabilidade atua como ponto central para a existência da classe. SRP ( Principio da Responsabilidade Única): Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Código que implementa política de alto nivel não deve depender de codigo que implementa detalhes de baixo nivel. Os detalhes que devem depender das políticas. S.O.L.I.D. ISP (Principio de Inversão de Dependência) Em nível de módulo: Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Para o sistema ser fácil de mudar, ele deve ser projeto de modo que seja póssivel mudar o comportamento por adição de um novo código ao invés de mudar um código existente. S.O.L.I.D. OCP (Principio de Aberto/Fechado) Em nível de módulo: Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh OCP (Principio de Aberto/Fechado) Reduzir a quantidade de código que deve ser mudando para o mínimo possível. Separe as coisas que devem mudar por razões diferentes (Principio da responsabilidade unica) para, então, organizar as dependencias entre as coisas de forma adequada (Principio da Inversão de dependência) Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh S.O.L.I.D. ISP (Principio de Segregação de Interface) Em nível de módulo: É prejudicial depender de módulos que contenham mais elementos do que você precisa, pois pode forçar desnecessariamente a recompilação ou reimplantação. Arquitetura Limpa, Robert C. Martin

REFATORAÇÃO EM JAVASCRIPT @jessilyneh Diagrama de tensão dos Principios de coesão Arquitetura Limpa, Robert C. Martin REP: A granularidade do reuso é a granularidade da release CCP: Reuna em componentes as classes que mudam pelas mesmas razões e nos mesmos momentos CRP: Não force usuários de um componente a depender de coisas que eles não precisam

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 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

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

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 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

@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