This is an old version of this page. You can view the most recent version or browse the history.

arquitetura

Página Inicial

BackEnd

Página da Arquitetura do Sistema

Definição de "Done"

Para que uma task possa ser declarada como finalizada é preciso que:

Código está funcionando local e em homologação
Código está testado e com todos os testes passando
Sem conflitos com a target branch
Não quebra nenhuma funcionalidade anteriormente desenvolvida
Código foi revisado e aprovado por um AGES III ou AGES IV

Diagrama de Deployment

Frontend

Módulos do sistema

actions
- description
assets
- Pasta com as imagens que são utilizadas na aplicação, geralmente SVGs.
components
- Onde ficam os componentes da aplicação. Geralmente os componentes são criados da maneira mais genérica possível, para ser reutilizado diversas vezes.
pages
- Onde ficam as páginas da aplicação. Elas são compostas pelos componentes e quando finalizadas significam alguma funcionalidade do app.
providers
- description
reducers
- description
routes
- Camada de rotas da aplicação. Definição de todas as rotas utilizando uma propriedade path que permite definir a rota.
services
- Onde ficam os serviços da aplicação como as definições para realizar chamadas ao backend.
styles
- Pasta com o estilo da aplicação, majoritariamente possuindo a paleta de cores.
utils
- Pasta com funções uteis para o sistema, geralmente é algo que é usado mais de uma vez e não é um componente.

Diagrama do Sistema

Forma que alguns módulos comunicam entre si. Componentes são implementados de forma genérica, que juntos fromam uma tela, que pode ser chamada pelas rotas da aplicação para criar o fluxo das telas.

**Entendendo o react pattern utilizado no front**

Esta explicação foi baseado neste excelente artigo, sugiro ler caso queira aprofundar-se mais no assunto. Entretanto, algumas alterações foram feitas para adequar-se mais ao nosso projeto.

Presentational and Container Components

O React fornece muitas vantagens para a reutilização de código. É possível perceber que tudo fica mais simples se você conseguir dividir os seus componentes em duas categorias: Container e Presentational components. Talvez você não conheça por esses nomes, por isso eles também podem ser chamados de Fat & Skinny, Smart & Dumb, Stateful & Pure, Screens & Components, etc. Eles não são exatamente iguais, mas a ideia principal é similar.

Presentation Components	Container Components
`Preocupam-se com a aparência das coisas`	`Preocupam-se em como as coisas funcionam.`
`Podem conter presentational and container components dentro deles, e geralmente possuem styles próprios`	`Podem conter presentational and container components dentro deles, mas dificilmente possuem styles próprios`
`Often allow containment via this.props.children`	`Fornecem os dados e o “comportamento” para os presentational ou outros container components`
`Não dependem do resto do aplicativo`	`Fornecem callbacks para os presentational components`
`Não especificam como os dados são carregados ou modificados`
`Raramente possuem seu próprio state (quando possuem, é o UI state)`	`Geralmente possuem state, pois tendem a servir como fontes de dados`
`São escritos na forma de um functional [component](https://www.robinwieruch.de/react-function-component), a menos que necessite possuir algum state`	`São geralmente gerados utilizando higher order components, como o connect() do React Redux`
Exemplos: Button, Sidebar, Story, UserInfo, List. //inserir exemplos do nosso projeto	Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList. inserir exemplos do nosso projeto

Stateful & Stateless.

Alguns components usam o método setState() e alguns não. Enquanto container components tendem a ser stateful e presentational components tendem a ser stateless, isso NÃO é uma regra que deve ser sempre seguida. Presentational components podem ser stateful, e containers podem ser stateless.

Benefícios em utilizar este padrão

Melhor separação de “interesses”. Você consegue entender sua aplicação e sua UI de uma maneira melhor estruturando components dessa maneira.
Melhor reutilização. Você pode usar o mesmo presentational component para diferentes ocasiões e transformá-los em container components separados que posteriormente possam ser utilizados.
Presentational components são essencialmente sua “palette”. Você pode colocá-lo em uma página e mexer em todas as variações de design, sem tocar na sua lógica. Você também pode executar screenshot regression tests nesta página ((to-do) estruturação dos testes)