clean architecture front end
1.0.0
Olá, aqui está um repositório para enviar minha visão de arquitetura limpa (primeiro na frente e depois mais tarde) em diferentes versões.
I wrote an article to support the examples of this project: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end To understand the clean architecture, you can also read my article on dependency inversion in front-end: https://www.hexa-web.fr/blog/dependency-inversion-front-end
Para esses exemplos, optei por usar o Next.js com base no React, mas todo o objetivo dessa arquitetura é poder usá -lo independentemente das estruturas e bibliotecas utilizadas (dependências externas).
Para ter um exemplo simples, escolhi um assunto simples: uma lista de tarefas!
Para ver as tarefas que ainda precisam ser realizadas no projeto, vá para o arquivo /docs/todo.md
Se você tiver alguma dúvida, sugestão ou qualquer outra coisa, não hesite em entrar em contato comigo! E se este repositório o ajudou, considere compartilhá -lo com seus conhecidos.
Primeiro, instale as dependências:
npm install
# or
yarn install-
Em seguida, execute o servidor de desenvolvimento:
npm run dev
# or
yarn devAbra http: // localhost: 3000 com seu navegador para ver o resultado.
-
Para iniciar testes de unidade:
jest-
Para testar o aplicativo online: https://front-end-clean-architecture.netlify.app/
A arquitetura hexagonal, ou arquitetura baseada em portas e adaptadores, é um padrão arquitetônico usado no campo do design de software. Ele visa criar sistemas com base em componentes de aplicativos que são vagamente acoplados e que podem ser facilmente conectados ao seu ambiente de software por meio de portas e adaptadores. Esses componentes são modulares e intercambiáveis, o que reforça a consistência do processamento e facilita a automação de testes.
Existem três partes na arquitetura limpa: a parte do aplicativo (as portas e adaptadores primários), o domínio (os casos de uso, os modelos de domínio etc.) e a parte da infraestrutura (as portas e adaptadores secundários).
Essa arquitetura é baseada no padrão de porta / adaptador e no princípio da inversão de dependência.
Documentando você sobre a arquitetura limpa (ou arquitetura hexagonal). Você encontrará nomes diferentes para essas partes. Os nomes escolhidos aqui são pessoais, o objetivo é que sejam compreensíveis.
Os casos de usos definem as ações de seus usuários. O objetivo não é usar qualquer estrutura ou bibliotecas nesses elementos (para manter uma lógica não acoplada a essas ferramentas).
Na frente, eles podem ser representados por função, por classe escrita em JS ou TS. Com o React, é possível usar o Redux para esta parte.
Caso o Redux seja usado, as ações são as casos de uso, o estado é um dos modelos e os seletores são usados para mapear.
A porta primária é usada para estabelecer um contrato entre o adaptador primário e os casos de uso. Para isso, uma interface pode ser criada. Na prática, o caso de uso também é considerado uma porta primária.
Em seguida, a implementação dessas interfaces é usada para dialogar com o domínio: o primeiro é o que chamamos de adaptadores primários. Seu objetivo é desencadear a execução de casos de uso. Por exemplo, na frente, esses adaptadores podem ser os componentes do React que executam desencadeia uma ação (Redux ou não).
A porta secundária é usada para estabelecer um contrato entre o adaptador secundário e os casos de uso. Para isso, geralmente criamos uma interface. Essa interface é usada diretamente no caso de uso.
Dicas: Você pode usar a injeção de dependência para isso, algumas bibliotecas de gerenciamento de estados permitem que você faça isso. Por exemplo, com o Redux-Thunk e o Redux-Observável, é possível passar "argumentos extra" que estarão diretamente disponíveis nas ações Redux. Em "Vanilla", também há inversifyjs.
A segunda implementação de interfaces (portas) é chamada de adaptadores secundários. Eles são chamados pelos casos de uso. Por exemplo, na frente, esses adaptadores podem ser as solicitações HTTP, o acesso aos dados presentes no armazenamento local, etc.
Em inglês :
Em francês:
