O elo perdido do Design Atômico
O sistema de design criado por Brad Frost e Dave Olsen — Design Atômico — inspirado pelas aulas de biologia no colegial, possui alguns problemas de conceito em sua metáfora, que também traz um débito arquitetural ao Pattern Lab.
Problema 1
Primeiramente, parte dos problemas na metáfora já foram bem resolvidos. Entenda neste artigo:
No conceito atual do Design Atômico, temos dois níveis que não fazem nenhuma relação com a metáfora: Templates e Páginas.
No artigo acima, essas nomenclaturas foram ajustadas para ter uma relação mais próxima da metáfora, então temos: Ecossistema e Ambiente.
Problema 2
O Pattern Lab trata todos os estilos globais (paleta de cores, famílias de fonte e animações) no mesmo nível dos átomos. Porém, esses elementos visuais, tecnicamente, não são componentes, mas sim estilos. Como eles mesmos afirmam:
“The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.”
Os estilos globais não deveriam ser tratados como componentes. Logo, também não podem ser tratados como átomos. Faz sentido?
Resolvendo o problema
Seguindo a metáfora biológica por trás da metodologia, o que mais se assemelha com estilos visuais são nossas características genéticas hereditárias. Nosso genoma. Ou seja, é o responsável por dizer qual a cor dos nossos olhos, cabelo, tom de pele e dita até o nosso comportamento. Biologicamente, os genes ficam na cadeia de DNA (e RNA).
O DNA é uma molécula, portanto, para encaixar isso ao fluxo do Design Atômico, teremos algo assim:
Podemos assimilar que os genes, tecnicamente, seriam temas. Assim, todo o estilo visual personalizado seria inserido desta maneira. E não seria mais necessário declarar a categoria global, como está escrito no Pattern Lab. Inicialmente, todos os átomos nasceriam com estilo visual padrão dos browsers (nativo), mas por fim receberiam o estilo personalizado definido por um tema.
Ajustando a arquitetura do Pattern Lab
Um exemplo usando Mustache (para entender, assista o vídeo da apresentação do Brad Frost), teríamos algo assim:
{{> dna-gene-global}}Output:
<link rel="stylesheet" src="/dna/genes/global.css" />
