Arquitetura Front-end com Atomic Design
Tags: frontend, arquitetura, webdev, programming
Published: 2022-05-02 17:53:37

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.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r53fserzq8b0zktmg1nu.png)

**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>
```


AtomImage.vue

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

<script>
export default {
  name: "AtomImage",
  props: ["img", "alt"]
};
</script>
```

AtomText.vue

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

<script>
export default {
  name: "AtomText",
  props: ["text"]
};
</script>
```

AtomTitle.vue
```
<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  name: "AtomTitle",
  props: ["title"]
};
</script>
```

**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>
```

**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>
```

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>
```

**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>
```


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fvxk5zzcrwm0w04axpl.png)

Como será sua estrutura visualizada na IDE.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d63ngjug0zy1rkc8wmpr.png)

Deixo aqui meu [linkedin ](https://www.linkedin.com/in/stefany-repetcki/)e [github ](https://github.com/StefanyRepetcki).