DEV Community

Dev Doido
Dev Doido

Posted on

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.

🎉🚀 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 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!

Top comments (0)