Criando um design consistente através de código
ou: a perspectiva de um designer sobre o ReactJs
Nas ultimas semanas o tópico mais falado entre amigos da área de tecnologia era o famoso ReactJs, algumas pessoas dizendo o quão bom ele é e outros dizendo que Angular é melhor, mesmo que cada um tenha uma função diferente. Depois de algumas discussões com o amigo e colega de trabalho Weslley Araujo eu decidi me aventurar com ReactJs.
Este é o momento que eu paro e penso:
Eu sou designer, por que eu deveria gastar meu tempo aprendendo isso?
React, como vários outros frameworks/bibliotecas se baseia bastante na componentização e pra mim este foi a característica que me ganhou.
ReactJs é uma biblioteca Javascript criada pelo Facebook e pelo Instagram para construir interfaces através de componentes. Um outro ponto importante é abordagem "Aprenda uma vez, escreva em qualquer lugar" então com o React Native você consegue escrever aplicações móveis do mesmo jeito que você escreve aplicações para a web com ReactJs.
Mas e agora?
Eu fiquei bem curioso e tive ir conferir e o site diz claramente 'Uma biblioteca Javascript para construir interfaces" e como Designer que sou isto com certeza chamou minha atenção.
Ao chegar no site e ler a documentação tudo parece meio difícil, não é tão simples como apertar um botão e começar a desenvolver o que pra mim não faz muito sentido se você está tentando atingir uma audiência maior que inclui designers. Porém recentemente foi lancado o Create React App, no qual você só precisa instalar o pacote pelo npm:
$ npm install -g create-react-appExecutar:
create-react-app hello-worldE pronto!
Este processo remove a barreira de iniciação para Designers e outros desenvolvedores que não são proficientes com Javascript ou de como configurar ambientes de desenvolvimento mais complexos.
Mas por incrível que pareça este artigo não é sobre ReactJs, é sobre consistência em design e neste momento o ReactJs é a ferramenta que escolhi.
Não se repita
o DRY (Don't repeat yourself) é um conceito de desenvolvimento de software que foi formulado por Andy Hunt e Dave Thomas e aparece no livro "O Programador Pragmático" (que eu só descobri ao escrever este artigo mas juro que vou ler assim que possível), e o livro tem esta passagem:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system
Mesmo que esta citação seja de um livro sobre desenvolvimento de software ela poderia estar facilmente em qualquer livro de design.
Qualquer ferramenta moderna de design tem alguma funcionalidade relacionada a componentes, como os Símbolos do Sketch, que lhe permite criar um componente de interface que pode ser reutilizado em todo a sua composição e se você o alterar sua alteração irá se propagar por todos os lugares no qual você usa aquele Símbolo.
E isto, mesmo que sem querer, faz que no fim tenhamos um kit de interfaces como este:
É aí que começamos a falar sobre consistência e começamos a criar um sistema de design, uma linguagem.
Nós não estamos desenhando paginas, estamos desenhando um sistema de componentes — Stephen Hay
Mas é tudo legal e divertido até que tenhamos que implementar isto. Muitas vezes nós acabamos copiando e colando pedaços de código por toda nossa aplicação.
E aí que o ReactJs pode te ajudar, pois você pode facilmente criar componentes que aceitam diversos parâmetros e assim os tornando maleáveis mas ainda sim consistentes.
Vamos criar um componente de botão!
Para que este exemplo seja melhor exemplificado eu adicionei este gist com vários comentários explicando cada decisão e cada elemento do componente (Em inglês)
Como você pode ver, no começo estou importando as classes de css de um arquivo diferente, e as classes criadas neste arquivo vão definir os estados do meu botão.
Agora que eu tenho uma base para o botão e todos os estados (backgrounds) eu posso simplesmente utilizar o meu componente em qualquer lugar da aplicação adicionando apenas isto:
<button state="warning">Delete</button>Isto vai renderizar o botão com o background definido na classe .warning.
Separation of concerts
A separação de conceitos ou separação de preocupações (do inglês separation of concerns, SoC) é um principio utilizado na computação que visa a preocupação com cada aspecto, modularizadamente.
Recentemente Mattias Petter Johansson do incrível canal FunFunFunction falou sobre isto:
Ele basicamente fala sobre termos o HTML, Javascript e o CSS separados dentro de uma aplicação, quando ainda sim eles fazem parte da mesma preocupação, ou do mesmo problema.
E aí voltamos lá atrás quando eu disse que separei o arquivo que constrói o botão da folha de estilos.
Quando o React deu as caras alguns atrás muitas pessoas acharam um absurdo o fato de o Javascript, HTML e o CSS viveram no mesmo arquivo, mas se você parar para pensar um pouco você vê que realmente faz sentido. Mas então porque eu escolhi separar o arquivo?
Por que o create-react-app cria a estrutura de arquivos desta maneira e achei plausível prosseguir com esta arquitetura. Mas você pode o fazer de várias maneiras diferentes.
Este foi apenas um pequeno exemplo de como você pode usar o ReactJs para melhorar a consistência de design em sua aplicação por meio de componentes parametrizados.
Não se assuste, apenas vá e tente criar seu primeiro app, é muito mais simples do que você imagina.
E eu gostaria de agradecer ao Weslley Araujo por me ajudar com este artigo e por ter me ensinado quase tudo que sei sobre o assunto até o momento, vlw ❤️
Leitura complementar
