Uma boa técnica para melhorar a sua estrutura de código e entrega de um projeto frontend é aplicar a metodologia de Atomic Design. Neste texto, vamos explorar um pouco mais esse conceito.

O que é

Atomic design é uma metodologia de desenvolvimento focada no desenvolvimento de componentes para construção de uma página. Esse conceito se amplia a um ponto em que o foco não é mais desenvolver páginas, e sim criar um “design system”.

A base dessa metodologia é uma hierarquia de componentes, onde eles são completamente abstraídos de uma página e crescem em relação a seu tamanho e responsabilidade em novos componentes, que podem ser reutilizados em diversas pontas da aplicação.

O desenvolvimento com Atomic Design começa sempre por baixo, do menor nível de componentes, como, por exemplo, um botão. Esse botão, pode se juntar com outros componentes de um nível menor, como um Input, e se tornar um formulário. Um formulário, pode ganhar um pouco mais de responsabilidade para ser um formulário de cadastro de usuário. O formulário de cadastro pode ser utilizado em conjunto com outros elementos e por fim, se tornar uma página.

Atomos, Moleculas, Organismos, Templates e Páginas

A hierarquia do Atomic Design faz um ótimo paralelo com uma estrutura química, e é daí que vem o nome dessa metodologia. Os componentes costumam ser interpretados como átomos, moléculas, organismos, templates e páginas.

O exemplo que dei se encaixa muito bem nessa hierarquia:

• O botão e os inputs são um átomo
• O formulário é uma molécula
• O formulário de cadastro é um organismo
• A combinação do formulário de cadastros com outros elementos é um template
• A utilização desse template dentro de um contexto de uma aplicação é a página

Melhorando o desenvolvimento de código

Em estrutura como essa é importante mudar o seu pensamento de desenvolvimento: ao desenvolver um atómo, como um botão, não importa o que esse botão faça. Ele é apenas um botão. Ao evoluir para uma molécula, como um formulário, este é um formulário qualquer, sem qualquer função atribuída. E então, quanto mais o componente é evoluído, como em um organismo, podemos atribuir uma função para esse formulário, sendo ele um formulário de cadastro. O mesmo processo se repete na construção de um template: organismos são combinados, mas o próposito ainda não é completamente claro, isso só acontece quando é desenvolvida a página.

Um botão, por exemplo, deve ser um botão qualquer, mas preparado com opções para todos os casos de usabilidade: um botão com texto, um botão com texto e ícone, um botão com loading, um botão desabilitado, etc.

Mudança no formato de entrega

O atomic design muda bastante a entrega da aplicação. Aqui o foco não é mais a construção das páginas, e sim dos componentes. Na prática, todos os átomos são desenvolvidos, depois as moléculas, os organismos, os templates e por fim as páginas.

Pode parecer um pouco contraintuitivo, e em alguns momentos aparenta não ter evolução nenhuma na aplicação. Mas a partir do momento em que você precisa apenas juntar componentes e atribuir responsabilidades a eles, a entrega flui, e no fim, a aplicação é desenvolvida com muito mais agilidade.

Porque usar Atomic Design?

A grande diferença do Atomic Design é desenvolver um “design system”. Dessa forma, o grande foco em reutilização de código vai trazer diversos benefícios para a sua aplicação.

Ainda no exemplo, se tem um formulário sem qualquer função, mas pronto para evoluir para um organismo, ele pode muito bem ser utilizado em diferentes cenários: um formulário de cadastro, um formulário de login ou até um formulário de envio de e-mails. Perceba que nesse formato, quanto maior o nível do componente, mais fácil vai ser desenvolvê-lo, não?

Se o seu código é reutilizado em várias pontas, isso facilita bastante a manuntenção. Vamos imaginar que em algum momento, o estilo do botão mude: você não precisa alterar todos os botões, em todas as páginas, basta alterar o componente átomo do botão e todo o projeto irá ter a mesma alteração.

Reparando bem, essa metodologia segue bem os conceitos de código limpo e boas práticas de programação, com componentes (funções) pequenas que fazem somente o necessário. O Atomic Design naturalmente irá deixar o seu código mais legível.

Atomic Design é uma metodologia criada pelo Brad Frost, e você pode ler seu livro completo neste link.

Nos projetos da devGo, tentaremos levar esse conceito a prática em todo o desenvolvimento do frontend. Acompanhe nosso canal no Discord, inscreva-se em nossa newsletter e acompanhe os nossos conteúdos de perto.