Como o time de Front End trouxe à vida o Design System da Youse para a Web
Quando falamos de web, é natural que venha à mente milhares de tecnologias, frameworks e ferramentas que nos possibilitam trabalhar um site hoje em dia. É constante a busca pela ferramenta ideal, aquela que irá nos proporcionar a melhor performance e alta escalabilidade. Ao meu ver, não existe ferramenta melhor ou pior, mas sim aquela que vai suprir as necessidades do seu negócio, independentemente da hype que determinada linguagem/framework estiver.
Acredito que nosso dever como desenvolvedores é ter um poder analítico, com um perfil questionador, antes de sair aplicando tecnologias sem nenhum estudo — e isso é muito comum quando se está começando a programar. Dentro da Youse, fazemos isso de uma forma interessante e que tem sido bastante assertiva. Uma dessas formas é através de provas de conceito (a famosa PoC). Com isso, conseguimos testar, validar e se fizer sentido, implementar, economizando tempo e dinheiro. 🤑
Cargo Components
Tempos atrás, recebemos uma missão dentro do Chapter que era criar do zero um Design System para nossos sistemas na web. Foi um desafio e tanto, pois até então tudo era criado dentro do nosso monolito e poucas coisas eram possíveis de se reutilizar entre projetos.
Em 2019, iniciamos o desenvolvimento do Cargo Design System, carinhosamente chamado aqui no chapter de cargo-components. Ele nasceu junto à refatoração do nosso site principal, dando uma nova cara para a Youse.
Desde o início, já tivemos uma leve ideia de como ele seria. Dentro do projeto que foi criado em Gatsby, o cargo-components foi nascendo de uma forma bem natural e já sendo preparado de uma forma desacoplada, na ideia de:
- Realizar uma PoC com nosso site institucional;
- Saber abstrair componentes para se reutilizar em outros contextos.
Até aí beleza, conseguimos validar nossa PoC e vamos botar a mão na massa para criar nossa biblioteca de componentes.
TSDX
O TDSX é uma ótima ferramenta que utilizamos quando pensamos em criar um package NPM com TypeScript.
Ele nos fornece de maneira rápida e customizável, um projeto pronto para migrar os componentes já criados, além de já vir com uma opção de adicionar o storybook.
npx tsdx create cargo-components react-with-storybookCom este comando, criamos o step inicial para o cargo-components, pré-configurado com diversas tecnologias que já utilizamos aqui dentro da Youse:
- TypeScript;
- Rollup;
- Jest/React Testing Library;
- Prettier;
- ESLint;
- etc.
Os componentes precisavam de algum lugar para serem publicados de forma com que todos os projetos conseguissem consumir a nossa biblioteca de componentes. Inicialmente, fizemos alguns testes com o Verdaccio e com o Github Packages para criar nosso package e distribuir entre nossas aplicações.
Porém, acabamos decidindo utilizar o Github Packages por questões de facilidade de integração com nossas pipelines de desenvolvimento sem muito esforço.
Em nossa biblioteca de componentes, utilizamos o padrão SEMVER, para versionar nosso projeto (se você não conhece sobre, clique aqui para saber mais e comece já a utilizar em seu dia a dia, vai ajudar muito).
Com isso, geramos nossa biblioteca, que está disponível para todos os projetos.
Storybook
O Storybook é uma excelente ferramenta para documentar nossos componentes. Nele, temos a possibilidade de tanto devs quanto designers conseguirem acessar para consultar, testar e validar novos componentes.
Incluímos diversas features que ajudam nossos componentes, como por exemplo a parte de acessibilidade. É lá que conseguimos validar cenários para pessoas com algum tipo de limitação visual.
Ou até mesmo para validar um texto em algum componente novo.
Ecossistema Youse Web
O cargo-components foi pensado para suprir nossas necessidades de uma forma que fosse fácil de se escalar e manter. Com isso, sempre criamos nossas soluções com possibilidade de evolução dos nossos produtos e também das nossas tecnologias.
Dessa forma, se for necessário alguma migração para determinada tecnologia, grande parte já está preparada para receber essas mudanças com um esforço muito menor do nosso time.
A manutenção dos nossos componentes se torna uma tarefa simples e centralizada. O cargo-components, por si só, já vai garantir os componentes testados e validados pelos times de QA e Design através do nosso Storybook e nossa pipeline de testes. Quando tudo está validado, geramos uma versão e publicamos nosso package como se fosse um package NPM, porém privado.
Além disso, mantemos as versões anteriores e atualizamos nossos projetos de acordo com a necessidade com essa nova versão.
Vem trabalhar com a gente!
Gostou e deseja saber um pouco mais? Estamos com diversas vagas abertas, clique aqui e bora bater um papo com a gente!
