Como criar, organizar e manter um sistema web?
Tags: javascript, webdev
Published: 2022-10-13 15:38:45

> Para ver o projeto com os exemplos desse post só ir em https://github.com/manoel-freitas/architetura-angular


No início de um projeto ou até mesmo no decorrer de um, é muito comum nos fazermos a pergunta de como podemos separar nossos componentes e como podemos cria-los sem termos dores de cabeça para a sua manutenção, afinal é muito comum encontramos, principalmente em projetos em que sua arquitetura não foi muito bem pensada desde do início, componentes gigantescos e "paginas" com diversas responsabilidades.



Neste artigo explicarei conceitos muito importantes sobre o desenvolvimento web utilizando angular. Vale lembrar que os conceitos aqui descritos são conceitos de arquitetura e podem ser utilizados com qualquer framework, seja ele Angular React Vue ou até mesmo vanillajs.



## O que é um componente?



Segundo dicionário de línguas Oxford, um componente é:

>  Que ou o que compõe ou ajuda na composição de algo; que ou o que é parte constituinte de um sistema.
>  "As (partes) c. de um sistema de software"
>   Dicionário de línguas Oxford

Então podemos entender que um componente é parte única e/ou exclusiva de um sistema. Um componente deve ser único e pode ser composto por outros componentes.

Então, entendendo o que de fato é um componente, como podemos construir, organizar e manter diversos componentes para que um sistema seja construído de forma a ser de:

- Fácil manutenção;

- Escalável;

- Fácil de ser testado;

- Que não nos der tanta dor de cabeça?

## Tudo é um componente

![Imagem de uma tabela periódica de elementos HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nda6j52iao4rd3e5end.png)

Para responder essa pergunta é necessário que primeiro entendamos que tudo em uma pagina(inclusive a pagina) é um componente. Existem diversas metodologias que ajudam a criar e a separar componentes, a que mais gosto é chamada de **Atomic Desing**. Que basicamente consiste em separar componentes entre 5 categorias principais, fazendo uma analogia com a tabela periódica e a química para a separação das 3 primeiras:

![Imagem ilustrativa de um átomo em atomic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3lar67fpm6jsnwjjerr.png)

- **Átomos**: são os blocos mais básicos de um sistema. São labels, cores, inputs, botão, etc.

![Exemplo de um atomo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnyn1un40v5ovsfmsgyw.png)

-------------------------------------------------------------------

![Imagem ilustrativa de uma molécula em atomic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tjdy8x8282wc1tmh9j5.png)

- **Moléculas**: são componentes que são compostos por dois ou mais átomos para criar componentes que são mais funcionais. Um simples input ou label, ou até mesmo um botão na tela, separados não tem nenhuma função de fato. Porém, ao juntarmos os três podemos criar um novo componente mais complexo que pode funcionar como um campo de pesquisa, por exemplo.

![Exemplo de uma molécula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxw3czz4j1ia8rap9g9x.png)

-------------------------------------------------------------------

![Imagem ilustrativa de um organismo em atomic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u7sghtlate10go0c8uj.png)


- **Organismos**: são componentes que utilizam moléculas e átomos para construir componentes mais complexos, como uma navbar, um header, ou um carrossel de imagens, por exemplo.

![Exemplo de um organismo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmgrewrt016wd4oxfetg.png)

------------------------------------------------------------------


![Imagem ilustrativa de um template em atomic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/062hzxa80bru9ahxybb5.png)

- **Templates**: aqui é onde nos separamos dos conceitos químicos e de biologia para nos adentrar na criação de páginas. Aqui um template é a junção de partes de componentes para a criação de um layout sem informações, onde podemos observar cada componente da página como placeholders, para podermos começar a visualizar como nossa pagina estará sendo montada.

![Exemplo de um template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh6qdrozdkxgwpvrphx9.png)

-------------------------------------------------------------------

![Imagem ilustrativa de uma pagina em atomic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsyj2fakcyu0wbpi7276.png)

- **Pagina**: paginas são instancias dos templates com todas as suas informações, ações e apresentação. Paginas são de fato amontados de componentes que juntos compõem um único componente que faz sentido.

![Exemplo de uma página](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn4hio9pgg9chnyss3pr.png)

Ao entendermos cada elemento da página inclusive a própria pagina como um componente. Fica mais fácil de construirmos os componentes que precisamos para a montagem da página. E assim desenvolver um sistema, um site, um, app, que seja muito mais simples e que conseguíamos responder à pergunta anterior.

## Estabelecemos o que é um componente. Weehaaa!! Como que criamos eles agora?

É importante pensarmos em dois conceitos muito importantes em toda arquitetura que são, coesão e acoplamento. Esses dois conceitos vão evitar que façamos componentes deuses, ou seja, componentes que fazem tudo de todas as paginas e evitarmos componentes que não façam o menor sentido.

![Exemplo de coesão e acoplamento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw0d9o2ymysjkkogwesj.png)

Basicamente quando falamos em coesão, falamos sobre como os componentes se comunicam com outros, hoje em dia é muito comum que componentes tenham que trocar diversos dados. No submit de um formulário deve aparecer um loading na tela e uma mensagem informando que o submit foi enviado com sucesso. Ou um campo de formulário que foi preenchido de forma errada precisa trocar a sua cor e mostrar uma mensagem de erro informando que foi preenchido errado. Esses são somente dois exemplos de como componentes podem se comunicar.

E quando falamos de acoplamento, estamos falando de como componentes dependem de informações que estão em outros componentes ou ate mesmo em outras classes de serviço. Para carregar uma lista de objetos paginados na tela um componente tem que fazer uma requisição e enviar os dados recebidos para um outro componente que de fato vai fazer a listagem e outro componente que de fato vai fazer a paginação. 

Coesão e acoplamento, são conceitos que se bem pensados e utilizados qualquer projeto pode ser beneficiado. È sempre bom ressaltar que sem queremos algo como, **alta coesão e baixo acoplamento**. Queremos componentes que façam sentido e queremos componentes independentes que podem se comunicar com qualquer outro componente.

## Componentes inteligentes e componentes burros.

Uma das principais metodologias de criar componentes é chamada de *smart and dumb components*, ou componentes inteligentes e burros. Ela diz que você deve compor seus componentes de forma a comunicação entre eles flua entre componentes que são apenas visuais, ou seja, não tem nenhuma logica de fato (a esses damos o nome de componentes burros) e componentes que são agregadores e que possuem logica, enviando, manipulando e lidando com os eventos de cada componente (a esses damos o nome de componentes inteligentes). 

Dessa forma sabemos exatamente de que ponto começa e em que ponto termina o fluxo de informação passada. Uma pagina pode servir de componente inteligente fazendo requisições e lidando com os dados, enquanto agrega outros componentes que recebem a informação e mostra os dados na tela.

Utilizando o mesmo exemplo acima do formulário. O formulário em si, tem a responsabilidade de validar suas informações e enviar as informações para algum lugar. Neste exemplo o formulário pode enviar as informações para outro componente que pode ser de fato a pagina e ela tem a responsabilidade de enviar os dados através de uma requisição, antes de disso acionar um componente de loading, e ao terminar a requisição destruir o componente de loading e enviar o usuário para uma próxima pagina seja de erro ou de sucesso.

Veja que no exemplo acima, caso mude a lógica e o usuário precisar ficar na mesma pagina, por exemplo é possível modificar apenas o método do componente inteligente, facilitando assim a manutenção e testabilidade de nossos componentes.

## Ao Infinito e Além

Falar sobre vários conceitos importantes dentro de um único artigo é bem difícil e entediante, neste artigo vimos uma metodologia importante de separação de componentes e vimos o que são componentes burros e inteligentes