A tecnologia por trás do Design System dos produtos RD Station
Existem várias tecnologias e diversas alternativas possíveis para criar o código de um design system, da mais simples, criando apenas estilos que podem ser aplicados em elementos HTML, como o Bootstrap, até as mais robustas, como o Material UI faz utilizando o React.
As alternativas mais simples, como a do Bootstrap, reduzem a curva de desenvolvimento do design system. É necessário apenas criar os estilos e as definições de como e onde devem ser utilizados. Porém, o ponto de desvantagem desta alternativa é que é difícil gerenciar esses usos - como os estilos podem ser aplicados em qualquer elemento não há garantia que serão aplicados da forma correta.
Já as alternativas mais robustas, como a do Material UI, precisam de um esforço maior do time de desenvolvimento do design system, pois os componentes possuem seus estilos aplicados. A vantagem é que torna mais fácil garantir a consistência e a aplicação correta dos estilos.
No Tangram, design system dos produtos RD Station, um dos objetivos é manter a consistência entre os produtos, por isso decidimos seguir com a construção utilizando o React. No nosso cenário os pontos positivos dessa tecnologia prevaleceram diante dos pontos negativos.
Fato é que o React é uma linguagem muito conhecida, com uma grande comunidade ativa é utilizado para a construção de soluções bem diferentes, isso reforça o quanto a linguagem é versátil e de fácil adaptação. Outro ponto que ajudou muito na decisão foi que, no passado, já havia sido feita uma movimentação para utilizarmos o React - e chegamos a conclusão que não haviam motivos para mudar essa decisão.
Existem diversas ferramentas que nos ajudam na construção de um design system. Abaixo, vou dar alguns exemplos das que temos utilizado no Tangram para desenvolvermos o nosso produto - e que você também pode utilizar!
Styled components
Para nos ajudar no desafio de manter a consistência entre os produtos, aplicamos o conceito de css-in-js utilizando a biblioteca chamada styled-components, onde cada componente possui seu estilo de forma isolada.
Além de garantir a consistência, a utilização do styled-components tem facilitado muito quando precisamos dar manutenção no design system. Como cada componente possui o seu estilo próprio, não precisamos nos preocupar em impactar outros componentes ou os produtos que utilizam o Tangram. Isso acontece porque o styled-components gera classes únicas que evitam conflitos.
Você também pode utilizar outras bibliotecas, como Emotion, JSS e o Stitches que têm sido muito comentadas e têm um grande potencial de alavancar a construção de um design system. A escolha vai depender dos desafios do seu produto.
Lint
De uma forma bem simplista, lint é uma forma de análise de código utilizada para sinalizar erros ou códigos fora do padrão. Podemos encontrar várias ferramentas que utilizam desse conceito, uma delas é o ESLint e outra é o CommitLint, que usamos aqui no Tangram.
Essas duas ferramentas nos ajudam muito no processo de desenvolvimento, pois nelas nós definimos as regras básicas para garantir que nosso código seja construído de forma consistente e que qualquer pessoa do time consiga dar manutenção em códigos construídos por outra pessoa.
Outro ponto que ajuda muito é a utilização da convenção de commit, criada pelo AngularJS para facilitar o processo de releases do nosso time. Para garantir que os commits estejam no padrão esperado, usamos o CommitLint em um hook de pré-commit no projeto. Dessa forma, podemos usar os commits para o nosso changelog.
Jest
Existem diversas ferramentas para a criação de testes disponíveis no mercado, como por exemplo o Jest, Mocha, Karma, Jasmine, Enzyme, etc. Mas a mais popular e com uma grande comunidade é o Jest, que foi criado pelo Facebook e é utilizado por grandes empresas, como Uber e Airbnb.
Além de ter sido criado e mantido pelo Facebook, o Jest é uma ferramenta leve e simples, que ajuda muito na hora de criar os testes dos componentes de um design system.
Uma das bibliotecas que utilizamos para realizar esses testes é o react-testing-library. Ela é leve mas muito potente, e permite criar vários testes unitários, pois eles acontecem em cima do DOM real, ou seja, consegue simular o que uma pessoa estaria vendo caso aquela solução estivesse no ar. É muito útil para realizar simulações de eventos que a pessoa usuária faria, como abertura e fechamento de elementos, cliques na tela, foco, entre outros.
Controle de versão
Nosso design system está em constante evolução, criamos novos componentes, atualizamos os já existentes para atender novos casos de uso, corrigimos problemas, etc. Uma forma dessas atualizações não impactarem diretamente os produtos que utilizam o Tangram sem que eles saibam é o versionamento.
Seguimos a mesma definição do SEMVER para o versionamento do nosso design system, onde:
- O primeiro número está relacionado às mudanças mais impactantes, como a “quebra” da API do componente, a remoção de propriedades, mudança na estrutura do componente, etc.
- O segundo número está mais relacionado às mudanças que não quebram a API do componente, como a adição de novas propriedades, alteração no estilo do componente, etc.
- O terceiro número está relacionado às entregas exclusivas de correções de problemas, os famosos “bugs”.
Essas são algumas das ferramentas que nós utilizamos mas não existe linguagem nem ferramenta certa ou errada, ou uma solução perfeita que sirva para todos, o mercado está repleto de opções e suas escolhas dependem do porquê você está construindo um design system, de quais são os desafios e o nível de conhecimento das pessoas que vão desenvolvê-lo e utilizá-lo.
Quer saber mais como nós construímos o código do nosso design system? Dê uma olhadinha na nossa documentação, lá você vai encontrar muito conteúdo que pode te ajudar a construir o seu design system.
Gostou das nossas dicas? Você faz algo diferente? Compartilha com a gente aqui nos comentários ;)
