DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

11 3

Arquitetura Front-end com Atomic Design

Este artigo visa a aplicação prática da metodologia Atomic Design, apenas para fins de consulta. Caso você desconheça o método, recomendo uma leitura prévia sobre o tema antes de continuar.

EXEMPLOS PRÁTICOS

Átomos: é a menor unidade que compõe nosso aplicativo.

AtomButton.vue

<template>
  <a
    :href="link.url"    
  >{{ link.name }}</a>
</template>

<script>
export default {
  name: "AtomButton",
  props: ["link"]
};
</script>
Enter fullscreen mode Exit fullscreen mode

AtomImage.vue

<template>
  <img :src="img" :alt="alt" />
</template>

<script>
export default {
  name: "AtomImage",
  props: ["img", "alt"]
};
</script>
Enter fullscreen mode Exit fullscreen mode

AtomText.vue

<template>
  <p>{{ text }}</p>
</template>

<script>
export default {
  name: "AtomText",
  props: ["text"]
};
</script>
Enter fullscreen mode Exit fullscreen mode

AtomTitle.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  name: "AtomTitle",
  props: ["title"]
};
</script>
Enter fullscreen mode Exit fullscreen mode

Moléculas: são grupos de átomos ligados entre si.

MoleculeBanner.vue

<template>
   <div>
     <header>
       <AtomTitle :title="Atomic Design com Vue.js" />
       <AtomText text="Um exemplo de molecula" />
       <AtomButton :link="{ name: 'Button', url: '#' }"/>
     </header>
   </div>
</template>

<script>
import AtomTitle from "@/components/atoms/AtomTitle";
import AtomText from "@/components/atoms/AtomText";
import AtomButton from "@/components/atoms/AtomButton";

export default {
   name: "MoleculeBanner",
   components: {
     AtomTitle,
     AtomText,
     AtomButton
   }
};
</script>
Enter fullscreen mode Exit fullscreen mode

Organismos: são grupos de moléculas unidas para formar uma seção relativamente complexa e distinta de uma interface, como o cabeçalho e o rodapé.

OrganismHeader.vue

 <template>
     <header>
       <div>
         <AtomLogo/>
         <MoleculeLinks :links="links"/>
       </div>
       <div>
         <AtomButton :link="{ name: 'Button', url: '#' }"/>
       </div>
     </header>
 </template>

 <script>
 import AtomLogo from "@/components/atoms/AtomLogo";
 import AtomButton from "@/components/atoms/AtomButton";
 import MoleculeLinks from "@/components/molecules/MoleculeLinks";

 export default {
     name: “OrganismHeader",
     props: ["links"],
     components: {
       AtomLogo,
       AtomButton,
       MoleculeLinks
     }
 };
 </script>
Enter fullscreen mode Exit fullscreen mode

OrganismFooter.vue

<template>
   <footer>
     <div>
       <MoleculeLinks :links="columnOneLinks"/>
     </div>
     <div>
       <MoleculeLinks :links="columnTwoLinks"/>
     </div>
   </footer>
</template>

<script>
import MoleculeLinks from "@/components/molecules/MoleculeLinks";

export default {
   name: “OrganismFooter",
   props: ["columnOneLinks", "columnTwoLinks"],
   components: {
     MoleculeLinks
   }
};
</script>
Enter fullscreen mode Exit fullscreen mode

Templates: consistem principalmente em grupos de organismos e/ou moléculas para formar a estrutura comum de uma página, o que costumávamos chamar de layout.

LandingPage.vue

<template>
   <section>
     <OrganismHeader :links="links"/>
     <div>
       <MoleculeBanner/>
       <div class="container">
         <OrganismGrid :cards="cards"/>
       </div>
     </div>
     <OrganismFooter 
          :columnOneLinks="columnOneLinks" 
          :columnTwoLin ks="columnTwoLinks" />
   </section>
</template>

<script>
import OrganismHeader from "@/components/organisms/OrganismHeader";
import OrganismFooter from "@/components/organisms/OrganismFooter";
import MoleculeBanner from "@/components/molecules/MoleculeBanner";
import OrganismGrid from "@/components/organisms/OrganismGrid";

export default {
   name: "TemplateLanding",
   components: {
     MoleculeBanner,
     OrganismHeader,
     OrganismFooter,
     OrganismGrid
   },
   data: () => {
     return {
       links: […],
       cards: […],
       columnOneLinks: […],
       columnTwoLinks: […]
     };
   }
};
</script>
Enter fullscreen mode Exit fullscreen mode

Como será sua estrutura visualizada na IDE.

Deixo aqui meu linkedin e github .

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (3)

Collapse
 
cecon profile image
Gabriel Cecon Carlsen

Ótimo conteúdo, parabéns. Teria algumas referências sobre o assunto?

Collapse
 
stefanyrepetcki profile image
Stefany Repetcki

Recomendo o vídeo: O que é Atomic Design? de Chief of Design https://www.youtube.com/watch?v=e8ySLRGdCAQ&t=309s
e o Artigo que explica o que é a teoria do Atomic Design vidadeproduto.com.br/atomic-design/

Collapse
 
cecon profile image
Gabriel Cecon Carlsen

Obrigadoo!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up