SOLID é um acrônimo mnemônico criado por Michael Feathers e popularizados pelo Uncle Bob, Robert C. Martin, que relaciona a cada letra um tópico de boas práticas de programação. A prática destes princípios SOLID visa ativar o projeto mais reaproveitável e tornar sua manutenção mais fácil.
Mas como aplicar SOLID em um framework que atualmente não usa POO ?
Single Responsibility
Uma classe (neste caso componente) deve ter um, e apenas um, motivo para ser modificado.
Complexidade e tamanho estão sempre relacionados à baixa coesão, mas é difícil decidir quantas responsabilidades um componente deve ter. Uma grande regra é cada componente deve resolver um problema específico.
Olhem isso que assustador😱:
Isso com certeza não está da melhor forma, um componente com muitos states além de ser confuso é difícil de manter, de testar e pode ser menos performático.
Imagine o seguinte exemplo:
Neste caso podemos citar ao menos três responsabilidades, fazer a requisição para api,renderizar a lista etratar os states de error e loading.
Isso dificulta na hora de programar seus testes unitários já que o componente está totalmente acoplada ao axios e a sua api.
Vamos ver como fica aplicado o Single Responsibility:
Usamos o que o React tem de melhor componentização deixando o código mais limpo, simples e fácil de ser testado. Assim dividimos as responsabilidades entre os componentes.
Open Closed
Este princípio afirma que entidades de software (classes, módulos, funções, etc.) devem ser abertas para extensão, mas fechadas para modificação.
Veja o seguinte exemplo:
Parece bem simples certo? Mas esse componente pode tornar-se algo irreconhecível.
😨
A melhor maneira de construir um componente que pode ter alterações desde o início é usar a composição, assim temos um código mais limpo.
😁
Substituição de Liskov
Os objetos em um programa devem ser substituídos por instâncias de seus subtipos sem alterar a exatidão desse programa.
Traduzindo React podemos ter uma interface Pokemon assim se tivermos vários tipos, modelos, estilos e etc de pokemons podemos apenas usar a interface como base que a aplicação continuara funcionado normalmente.
No exemplo a seguir, os componentes esperam a mesma interface:
Interface Segregation
Muitas interfaces específicas para o cliente são melhores que uma interface de uso geral.
Mantenha suas interfaces pequenas e coesas. Não vale a pena reutilizar uma interface só porque é mais fácil. Uma interface de um componente só deve ter propriedades relevantes para ela.
Não faça isso pense nos devs que viram depois de você😰:
Agora sim 😍:
Nesse momento você deve esta se perguntando mas ele usou as mesmas imagens. Sim usei como você já deve ter percebido os princípios se comunicam entre sim então quando você aplica um pode estar aplicando outro e no React é muito simples não tem segredo é só usar o que o React tem de melhor componentização.
Dependency Inversion
Programe voltado para interface, não para a implementação
No exemplo abaixo, nos referimos diretamente aos axios em um componente:
Podemos resolver isso usando componentização, mas dessa vez usando hooks para que nosso componente não dependa diretamente do axios assim se quisermos um diatroca a lib podemos alterar em um único arquivo, desde que mantenha o retorno, nossos componente continuara funcionando:
Conclusão
Utilizar os princípios do SOLID é uma boa saída quando pensamos em qualidade de código, mas claro que em alguns cenários não precisamos seguir à risca os princípios.
Como diria o Robert C. Martin, “A dogmatic or religious application of the SOLID principles is neither realistic nor beneficial (Uma aplicação dogmática ou religiosa dos princípios SOLID não é realista nem benéfica )”.
Ou seja como tudo no mundo de desenvolvimento de software nem tudo pode ser aplicado como se diz nos livros. Como você viu tudo se trata de adaptação já que o React não e um framework POO e não tem um sistema de tipagem ou de injeção de dependência robusto como se tem no Flutter por exemplo, para resolver a maioria dos princípios é usado componentização um caminho que o próprio React te leva a seguir.
Autor: Edson Mateus
Sobre: Estudante de ciências da computação apaixonado por tecnologia, atuando a 3 anos no mercado como desenvolver front end.
