Árvore de natal antipadrão

Antipadrões, ou simplesmente exemplos de código ineficaz, podem ser contribuidores muito insidiosos, mesmo no código-fonte de desenvolvedores experientes. Às vezes, isso é uma consequência do estabelecimento de uma tarefa ou de prazos muito apertados; às vezes, a desatenção falha.

Neste artigo, vou falar sobre o antipadrão de design de árvore de Natal. A essência desse antipadrão reside no fato de que, em alguns casos, a abordagem imperativa afeta o texto de origem de forma muito mais difícil de entender e manter. Uma complicação provoca a próxima e assim por diante, até percebermos que é mais fácil reescrever tudo do zero.

Acho esse anti-padrão interessante porque você pode obtê-lo não com uma única mudança, mas com toda uma cadeia de melhorias relacionadas ao desenvolvimento do código. E sim, você entendeu bem, nos convencemos e ao cliente que o código está cada vez melhor, mas no final ganhamos uma árvore de natal. Para entender melhor isso, considere uma cascata de tarefas, das simples às complexas, e tente rastrear o curso dos julgamentos que levam a um código ineficaz.

O nascimento de um problema

Vamos imaginar que existe um componente simples que exibe um certo número - "Contador"

const Counter = ({ value }) => {
	return <div>{ value }</div>;
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

“Contador” não deve ser interpretado literalmente. É simplesmente um modelo simplificado para contrastar a essência do problema.

Recebemos a tarefa de torná-lo mais funcional, digamos, após o número, colocar unidades de medida - digits



. O componente agora se parece com isto:

const Counter = ({ value, digits }) => {
	return <div>{ `${value} ${digits}` }</div>
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , : 10 ()



. , :

const Counter = ({ value, digits, type }) => {
	const temp = type ? `(${digits})` : digits;
	return <div>{ `${value} ${temp}` }</div>
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , «Counter» , . . , — a



, b



c



, y



- f(a, b, c)



, .

, « ». , , . , . , , a * b



. , a + b.

«Counter» , (digits



type



) , . . a * b



, . , , :

, digits



, value



, , a



, . , , . . type



.

... . , , , , .

, , digits



, , , «Counter» . , ...

?

, «Counter» . , , , . digits



type



, b' = f(b)



. :

const getCoveredDigits = (digits) => `(${digits})`;

<Counter
  value={value}
  digits={getCoveredDigits(digits)}
/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, :

, f(b)



, . , «Counter».

Claro, ao implementar "Counter", cometemos deliberadamente vários erros que muitas vezes passam despercebidos na produção real. Embora não exista um modelo de componente ideal, mas com uma decomposição mais lucrativa, é possível reduzir a quantidade de texto fonte e, como resultado, aumentar a confiabilidade e escalabilidade geral de seus aplicativos.