React - Clean Architecture! [Quero a sua opinião!!!]
Fala pessoal, meu nome é Pietro sou desenvolvedor frontend a aproximadamente 8 anos e já trabalhei em algumas empresas ao longo da minha carreira. Nunca tive a oportunidade de trabalhar em uma empresa referência em tecnologia (é uma meta para atingir até os 30 anos), mas por onde passei os projetos sempre eram organizados de forma bem parecida, uma pasta para páginas, outra para hooks, outra para utils, arquivos de comunicação com apis...
Recentemente peguei alguns dias para estudar Clean Architecture e pensar em como poderia aplicar isso em um projeto frontend (ReactJS ou Flutter). Fui comparando as boas práticas com tudo que já fiz, percebi algumas semelhanças e em outros pontos muitas divergências.
A minha principal referência de Clean Architecture para frontend foi um curso do Rodrigo Manguinho e vendo a forma com que o código fonte foi feito me levantou muitos questionamentos que me fizeram encher o saco de muitos amigos sobre o assunto.
Abaixo vou deixar um exemplo de um fluxo de requisição de login construida no projeto Clean React
signup-factory.tsx
export const makeSignUp: React.FC = () => {
return (
<SignUp
addAccount={makeRemoteAddAccount()}
validation={makeSignUpValidation()}
/>
)
}
signup-validation-factory.tsx
export const makeSignUpValidation = (): ValidationComposite => ValidationComposite.build([
...Builder.field('name').required().min(5).build(),
...Builder.field('email').required().email().build(),
...Builder.field('password').required().min(5).build(),
...Builder.field('passwordConfirmation').required().sameAs('password').build()
])
remote-add-account-factory.ts
export const makeRemoteAddAccount = (): AddAccount =>
new RemoteAddAccount(makeApiUrl('/signup'), makeAxiosHttpClient())
api-url-factory.ts
export const makeApiUrl = (path: string): string
=> `${process.env.API_URL}${path}`
axios-http-client-factory.ts
export const makeAxiosHttpClient = (): AxiosHttpClient
=> new AxiosHttpClient()
axios-http-client.ts
export class AxiosHttpClient implements HttpClient {
async request (data: HttpRequest): Promise<HttpResponse> {
... aqui toda a lógica da request usando axios
}
}
Eu não tenho dúvidas que esse é um código bom! Totalmente modular, testável, com muitas abstrações, totalmente reutilizável e de fácil manutenabilidade
...mas...
-
da para exigir que um time com diversos níveis de profissionais entreguem códigos assim?
-
tantos arquivos e funções não prejudicam a legibilidade?
-
esse tipo de organização é comum onde você trabalha?
Qual a sua opinião? Seria essa a bala de prata para deixar de criar códigos ruins? O Clean Architecture está obsoleto e deixa os códigos verbosos demais?