Posted on May 2, 2022

Arquitetura Front-end com Atomic Design

#frontend #arquitetura #webdev #programming

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>