Porque você deve adotar Atomic Design nos seus projetos?
Tags: braziliandevs, node, react, javascript
Published: 2024-03-03 12:54:46

Antes de falar de Atomic Design eu preciso te perguntar: Você é bom com Javascript? Antes de seguir modinha de aprender frameworks e bibliotecas que surgiram ontem, bora dominar o BÁSICO!

Eu tô falando de HTML, CSS e JavaScript, o trio fundamental do front-end. Se você não DOMINA esse trio pode parar de ler esse texto.

## Por que isso é importante

Dominar os fundamentos te dá as ferramentas essenciais para qualquer framework ou biblioteca. A pessoa que consegue resolver problemas usando JavaScript puro será capaz de fazer o mesmo em React, Vue, Angular e qualquer outro. Dominando conceitos como Flexbox ou Grid no CSS, você aprende bibliotecas como Tailwind ou Chakra UI num estalar de dedos. E porque não subir um degrau na escada pra aprender Atomic Design?

## Atomic Design: A Metodologia

Mas que porra é essa de Atomic Design? Desenvolvido por Brad Frost, o Atomic Design é um método de divisão de componentes modulares e reutilizáveis.

### Qual é a estrutura?
Baseada na química ela consiste nas seguintes camadas:
1. **Átomos:** É a unidade indivisível do componente, como botões, inputs e ícones.
2. **Moléculas:** Combinações de átomos que formam componentes simples e independentes, como um campo de busca.
3. **Organismos:** Grupos de moléculas que formam seções ou componentes mais complexos, como um cabeçalho ou um menu de navegação.
4. **Templates:** Estruturas que definem o layout geral da página, organizando os organismos e moléculas.
5. **Páginas:** Instâncias específicas dos templates, onde o conteúdo é preenchido para criar páginas web completas.

### Benefícios do Atomic Design

- **Reutilização:** Componentes modulares podem ser facilmente reaproveitados em diferentes partes do projeto.
- **Consistência:** Ao seguir uma abordagem sistemática na construção de interfaces, é mais fácil manter uma aparência consistente em todo o site ou aplicativo. Nenhum dev vai ser louco de ficar inventando moda em fazer cada tela com espaçamento diferente por exemplo.
- **Escalabilidade:** À medida que o projeto cresce, o Atomic Design facilita a manutenção do código, garantindo código novo se encaixando de boa na estrutura existente.

## O Próximo Passo: CrazyStack

Agora que você dominou os fundamentos e entende a importância de abordagens como o Atomic Design, é hora de dar o próximo passo na caminhada. Apresento-lhe o CrazyStack, um curso que vai além do básico.

🎉🚀 Com o cupom 80MALUCO!, você recebe um desconto de 80% (90 reais)! Esta é a oportunidade de ouro que eu tô te dando.

🧠 Neste curso, você aprende a desenvolver uma API REST com Node.js, TDD, banco de dados MongoDB, Fastify, Redis, Kafka e muito mais! É a chance de fortalecer sua base enquanto adquire conhecimentos avançados.

🔍 E tem mais! Você também criará uma aplicação Next.js usando ATOMIC DESIGN do início ao FIM!

Se você já domina os fundamentos e está em busca de algo mais desafiador, este curso é para você! Não perca tempo, pois esta oferta é válida apenas até o dia 5 de março.

Garanta agora mesmo a sua vaga neste incrível curso de JavaScript! Com Node.js e React, você irá além do básico com um desconto imperdível por tempo LIMITADO.

Acesse [crazystack.com.br](crazystack.com.br) e utilize o código 80MALUCO para garantir o seu acesso a este mundo de possibilidades. Lembre-se, equilibrar os fundamentos com as novidades é a chave para o sucesso como desenvolvedor. Então, vamos embarcar juntos nesta jornada emocionante!