Construindo componentes reutilizáveis com conceitos do Atomic Design
Neste post será abordado conceitos do atomic design aplicado ao desenvolvimento de design system com react. Vou mostrar um exemplo de aplicação e como podemos organizar as pastas separando cada componente.
O que seria atomic design ?
O criador desta metodologia se chama Brad Frost. Atomic design é uma metodologia para construir design system que divide os elementos de uma página em:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms
Os Átomos são pequenas parte de uma página. Essa parte é fundamental para a construção de blocos de componentes maiores. Dentro desses elementos podemos incluir uma variedade de fontes, cores, e formas que possam se adequar nas partes do layout que serão inseridos. Na imagem abaixo podemos observar, dentro da nossa aplicação, o que seria considerado como um átomo.
Podemos perceber que cada item da sidebar pode ser considerado como a menor elemento desta página. Já que podemos tanto utilizar dentro do menu da sidebar como também como uma opção que o usuário pode fazer o logout da aplicação.
Molecules
Nesta parte da metodologia é onde vamos poder combinar nossos átomos para poder formar elementos maiores do layout. Podemos observar na imagem abaixo.
Organisms
Da mesma forma que podemos formar as moléculas combinando os átomos, podemos construir nossos organismos combinando as moléculas e os átomos. Observe na imagem abaixo.
Templates
Agora que já temos todos os componentes necessário para a construção dessa aplicação de exemplo, podemos montar nossos templates. O template como principal objetivo é fornecer aqueles componentes que são comum entre todas as páginas evitando códigos duplicados e facilitando a manuntenção. Na imagem abaixo, temos que a Sidebar será um componente comum entre as páginas.
Pages
Com o nosso template base pronto, já podemos contruir cada página. Na imagem abaixo temos a página "Message" contruída com elementos do template.
Conclusão
Podemos perceber que ao separar nossos componentes em partes menores, construímos outros elementos mais complexos e evitamos a duplicação de código e replicação de lógica dos componentes. Sendo assim, ao organizar nossos componentes com base na metodologia atomic design, nos permite desenvolver layouts cada vez mais robustos.
Segue o link da aplicação no codesandbox https://codesandbox.io/s/atomic-design-y1d1s