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>

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>

Como será sua estrutura visualizada na IDE.

Deixo aqui meu linkedin e github .

Blog

Arquitetura Front-end com Atomic Design

Stefany Repetcki

Join Our Newsletter. No Spam, Only the good stuff.

Related