O que é Atomic Design, e como aplicá-lo em suas aplicações Front-End?
No universo do desenvolvimento de aplicações front-end, muito se discute sobre às melhores práticas de design para criar sistemas escaláveis e reutilizáveis.
Atualmente, muito se fala sobre Pattern Composition, Material Design, Responsive Web Design, User-Centered Design e entre outros.
Mas cada vez mais um vem se destacando entre eles, o ATOMIC DESIGN, que será o foco principal do nosso artigo hoje 🤩
O que é Atomic Design?
Criado em 2013 pelo design Brad Frost, o Atomic Design nada mais é do que uma forma com que temos de organizar a interface do usuário como um sistema composto por componentes modulares e independentes.
Lá na época da escola, mais especificamente nas aulas de química, nós aprendemos que toda a materia é composta por átomos. Tanto é que se você pegar um microscópio e for aproximando... aproximando... aproximando chegaremos então no mundo atômico.
Cada uma dessas unidades de átomos, quando agrupados, formam-se moléculas, que quando combinadas formam organismos mais complexos. E é assim com toda a materia presente no universo - bem, pelo menos até aonde a gente sabe 😬 -.
Foi pensando nisso que o autor Brad Frost, pegou esse conceito, e disse assim: "E se isso também fosse aplicado no mundo do design system?".
Eis que então, surge o conceito do Atomic Design, em que consiste em pegar uma interface já exististente, e ir quebrando ela em componentes cada vez menores - ou já começar construíndo a interface dessa maneira, tanto faz -.
Para que você possa entender, dê uma olhada na ilustração abaixo:
Vamos começar de trás pra frente (da direita para a esquerda):
Pages: representam às páginas da nossa aplicação. Antes do advento do Atomic Design, a maioria das interfaces eram criadas dentro de um único arquivo.
No máximo separavam um Cabeçalho, Menu, Rodapé em algum outro arquivo diferente, no más, os desenvolvedores preferiam criar tudo dentro de um único arquivo, o que dificultava um pouco a sua manutenção.
Templates: representam o esqueleto (estruturas) que fornecem o contexto necessário para colocar os organismos em uma página ou tela, definindo a disposição geral.
Diferente das páginas (pages), os templates costumam agrupar todos os elementos com dados mockados, ou seja, dados fictícios que deverão ser preenchidos e modificados pela lógica da sua página.
Organisms: aqui nós temos um agrupamento de átomos e moléculas que se formam seções ou partes reconhecíveis de uma interface, como é um exemplo da parte superior de um template, parte inferior, parte central, bloco de gráficos, um modal e entre outros.
Molecules: São conjuntos de átomos que trabalham juntos para formar um componente simples e funcional, como um formulário de login composto por um campo de entrada e um botão, um rodapé, um cabeçalho, elemento de navegação, uma imagem e entre outros.
Atoms: por fim, temos os átomos, que nada mais são que blocos de construção básicos e indivisíveis da interface, como botões, campos de entrada, elementos que carregam imagens ou vídeos, ou ícones.
Benefícios do Atomic Design
O uso do Atomic Design em seu projeto adiciona uma série de benefícios a sua aplicação, tais como:
- Organização e Manutenção,
- Reutilização de Componentes,
- Facilidade na modificação de novos layouts,
- Renderização Eficiente (caso estiver usando o Virtual DOM ou Data Binding).
Como é feita a separação dos elementos HTML usando Atomic Design?
Para responder a essa pergunta, observe a lista abaixo:
Átomos:
- Input:
<input type="text">,<input type="checkbox">,<input type="radio">, etc. - Botão:
<button>,<a>(como botão), etc. - Ícones:
<i>,<svg>, etc. - Texto:
<p>,<span>,<strong>,<em>, etc. - Imagem:
<img>, etc. - Imagem:
<img>, etc. - Listas:
<ul>,<ol>,<li>, etc.
Moléculas:
- Formulário de Login: Um conjunto de
<input>(usuário e senha) com um<button>de submit. - Barra de Navegação:
<nav>com links<a>. - Menu Suspenso: Um botão ou link que, ao ser clicado, revela uma lista de opções (geralmente
<ul>com<li>). - Cartão de Produto: Uma estrutura que inclui imagem, título, preço e botão de compra.
- Modal: Um componente que exibe conteúdo sobreposto na página principal. Pode incluir elementos como título (
<h2>), conteúdo (<div>com texto, imagens, formulários), e botões de ação (<button>). - Alertas: Componentes que exibem mensagens de feedback ao usuário, como alertas de sucesso, erro, aviso, etc. Podem incluir um ícone descritivo (
<i>ou<svg>), texto explicativo (<p>), e um botão de fechar (<button>).
Organismos:
- Cabeçalho:
<header>que pode conter um logo (<img>), menu de navegação (<nav>), etc. - Rodapé:
<footer>com informações de contato, links úteis, etc. - Barra Lateral:
<aside>com links ou widgets. - Card de Artigo: Um componente que inclui título (
<h2>), imagem (<img>), resumo (<p>), etc.
Templates:
- Layout Padrão: Um template que define a estrutura básica de todas as páginas, com
<header>,<footer>,<nav>, e uma área principal para o conteúdo variável. - Dashboard: Um template específico para uma área administrativa, com widgets, gráficos e links para diversas funcionalidades.
Páginas:
- Página Inicial: A página principal do site ou aplicação, que pode incluir vários organismos e utilizar um template específico.
- Página de Produto: Mostra detalhes de um produto específico, com imagem, descrição, preço, etc.
- Perfil do Usuário: Exibe informações personalizadas do usuário, como nome, avatar, preferências, etc.
Um modal é uma molécula ou um organismo?
Muito se discute pela internet se o modal - aquela caixinha de mensagem que geralmente vem atrelada a um botão -, é uma molécula ou um organismo.
E a resposta certa é: DEPENDE.
Apesar da resposta mais obvia, é de que ele seja um organismo. Há quem defenda que um modal é uma molécula.
Eu particulamente acredito que um modal é um ORGANISMO, e ponto final 😂
Como aplicar o Atomic Design em minhas aplicações Front-End?
Antes de tudo, certifique-se de como é feita a estrutura dos layouts na linguagem que você deseja aplicar o Atomic Design.
No caso de aplicações para web que utilizam a estrutura MVC: Suas páginas costumam existir dentro da pasta views, certo? Se este é o seu caso, você deveria criar uma estrutura similar a esta:
- app/
- controllers/
- ...
- models/
- ...
- views/
- atoms/
- button.php
- input.php
- ...
- molecules/
- login-form.php
- navigation-bar.php
- ...
- organisms/
- header.php
- footer.php
- ...
- templates/
- default.php
- dashboard.php
- ...
- pages/
- home.php
- profile.php
- ...No caso de aplicações para web que utilizam a estrutura MVVM: Suas páginas também costumam existir dentro da pasta views, estou certo? Se este é o seu caso, a estrutura ficaria mais ou menos assim:
- app/
- models/
- UserModel.php
- ...
- viewmodels/
- HomeViewModel.php
- UserViewModel.php
- ...
- views/
- atoms/
- button.php
- input.php
- ...
- molecules/
- login-form.php
- navigation-bar.php
- ...
- organisms/
- header.php
- footer.php
- ...
- templates/
- default.php
- dashboard.php
- ...
- pages/
- home.php
- profile.php
- ...No caso de aplicações para web que não utilizam estrutura nenhuma... Se seu projeto não faz o uso de nenhum tipo de estrutura... bem, é melhor fazer 😅
Mas se mesmo assim você quiser fazer o uso do atomic design, lembre-se de que você precisa separar cada elemento em suas respectivas pastas, como por exemplo:
- atoms/
- ...
- molecules/
- ...
- organisms/
- ...
- templates/
- ...
- pages/
- ...
É importante ressaltar que seus controllers (se estiver usando MVC) ou viewModels (caso estiver usando MVVM) eles devem abrir e renderizar somente os arquivos existentes dentro da pasta pages.
Que automaticamente - isto é, se você fez tudo certo -, o próprio arquivo fará a importação (import, require...) dos elementos que estão dispostos nas outras pastas, como é o caso dos templates que vaão puxar os conteúdos de organisms, que puxam os conteúdos de molecules, e que por fim puxam os conteúdos de atoms.
Sim, usar Atomic Design é um import dentro de um import...
Atomic Design e a performance da sua aplicação
Mas será que isso não atrapalha mais do que ajuda, no quesito de performance das nossas aplicações?
Quando aplicada de maneira correta e bem planejada, não necessariamente impacta negativamente a performance das aplicações web.
Com relação aos impactos na performance das nossas aplicações, uma das principais vantagens é que ele pode reduzir a necessidade de carregar múltiplas versões de estilos e scripts para diferentes partes da aplicação.
Isso pode resultar em uma redução no tamanho total dos arquivos carregados pelo navegador, o que é positivo para a performance.
Principalmente quando estamos usando bibliotecas modernas de front-end, como Virtual DOM (em frameworks como ReactJS) ou Data Binding (como em Vue.js ou Angular).
Atomic Design pode ser aplicado em projetos feitos com ReactJS?
Não só pode como deve. Recentemente eu publiquei uma lição que fala sobre o Pattern Composition aplicado ao ReactJS.
O Atomic Design representa uma evolução a mais desse pattern, onde podemos separar nossos componentes em sub-componentes cada vez menores.
Sendo assim, se você entendeu o conteúdo daquela lição, não encontrará grandes dificuldades em usar o modelo de Atomic Design 😅
Atomic Design pode ser aplicado em projetos feitos com PHP, C#, Python, Java e entre outros?
Sim, desde que você saiba fazer a separação em cada uma dessas linguagens.
Mas atente-se pelo fato de (talvez) essas linguagens não possuirem recursos modernos como Virtual Dom ou Data Binding, pois isso (talvez) possa impactar negativamente na performance da sua aplicação, devido ao grande número de imports.
Cuidado ao aplicar Atomic Design em seu projeto
Abaixo eu listei alguns cuidados que você deve ter antes de aplicar o Atomic Design em seu projeto.
Cuidado com o Excesso de Componentes: É importante não fragmentar excessivamente os componentes, o que poderia levar a um número muito grande de pequenos arquivos e impactar negativamente o desempenho devido ao número de requisições HTTP.
Otimização de Imagens e Recursos: Certifique-se de otimizar imagens e outros recursos estáticos utilizados nos componentes para reduzir o tempo de carregamento da página.
Técnicas de Carregamento Assíncrono: Utilize técnicas como carregamento assíncrono de recursos ou lazy loading de componentes para melhorar a experiência do usuário e a performance geral da aplicação.
Atomic Design e a sua relação com a Apple
Uma das empresas mais invadores do século XXI, a Apple, também faz o uso do Atomic Design, não acredita? Então dê uma olhada no exemplo do UI Kit do iOS:
Note que eles separaram até a paleta de cores em componentes menores, incrível, não acha?
Mais sobre Atomic Design
Para saber mais sobre esse design system incrível, não deixe de seguir o artigo do próprio autor, por meio deste link.
Até o próximo artigo 😉