DEV Community

Dev Doido
Dev Doido

Posted on • Edited on

2

Porque você deve adotar Atomic Design nos seus projetos?

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.

🧠 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 dezembro

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 e saiba mais desse curso que já encantou o dev em busca de algo mais. O momento ideal pra agir e mudar de vida é AGORA!

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay