Tornando nosso trabalho open source

Nossa experiência no processo de desenvolvimento do nosso primeiro projeto open source

Algo que admiro na área da tecnologia é que a comunidade de desenvolvedores não mede esforços para criar e compartilhar soluções que ajudem outros desenvolvedores. Mas por que desenvolvedores gastam seu tempo desenvolvendo, documentando e preparando soluções para disponibilizar à comunidade sem ganhar alguma coisa por isso?

Esse processo de deixar um projeto pronto para a comunidade traz um aprendizado incrível, você melhora como desenvolvedor, além de ser uma excelente vitrine das suas skills e para empresa que apoia essas práticas.

Neste post vou falar um pouco do processo de criação do nosso primeiro projeto open source.

O problema

Com a passagem de vários devs no projeto, algumas coisas como padrão de código acabam se perdendo pelo caminho deixando o código mais complexo e bagunçado.

Nossos CSSs chegaram ao ponto de que se alterado alguma classe para um determinado elemento, poderia ‘quebrar’ outro elemento em outro módulo do sistema. Como era ‘perigoso’ alterar uma classe no css, tínhamos que criar novas classes para serem aplicadas em lugares específicos e isso foi aumentando a bagunça no código além de aumentar o tamanho final do nosso bundle.

A solução

Pensando nisso, criamos uma biblioteca utilitária em CSS para aplicar no HTML a fim de modificar uma determinada estrutura, como classes com propriedades de margens, espaçamentos, texto e qualquer propriedade que possa ser utilizada em qualquer parte do projeto sem interferir nas propriedades de outros elementos.

Devido a dimensão do Astrea (um de nossos produtos), precisamos ter muita atenção e cautela para que outras partes do projeto não sejam afetadas. Essa abordagem facilitou e acelerou nosso processo de desenvolvimento já que ficou simples para os devs criarem ou alterarem nosso layout sem necessitar escrever uma linha de CSS.

Como essa estruturação de layout não está acoplada a nossas regras de negócio, era hora de contribuir com a comunidade, então decidimos tornar nossa biblioteca open source.

Nix

Nasce então o Nix, nossa biblioteca CSS de classes úteis e com suporte responsivo que pode ajudar qualquer desenvolvedor alterar a estrutura de uma página de seu projeto. Como essa seria uma biblioteca de código aberto, pensamos em como torná-la o mais simples possível para utilizá-la e levamos em consideração alguns pontos importantes:

• O nome das classes não poderiam conflitar com os nomes atuais do projeto, colocamos então o prefixo nix- no início do nome de cada classe.
• Os nomes das classes deveriam ser mais simples e fáceis de lembrar, então decidimos não abreviar os nomes, e para tentar simplificar ainda mais, o nome das classes devem ser o mesmo nome das propriedades do CSS com o valor da propriedade separado por um _ (underline). Desta forma podemos escrever as classes como se estivéssemos escrevendo as próprias propriedades e valores no CSS, tornando a biblioteca mais intuitiva e fácil de utilizar.
• O suporte ao responsivo deveria ser aplicado em todas as classes, então aplicamos um sufixo ao final de cada nome, como por exemplo --xs onde faria efeito apenas em telas abaixo de 768px de largura.

No final do desenvolvimento publicamos o projeto no NPM, importamos em nosso projeto e começamos a usar como uma biblioteca externa qualquer.

https://nix.aurum.com.br

Uma introdução ao funcionamento no Nix:

Para adicionar uma margem de 20 pixels em um elemento, basta usar a classe nix-margin_20:

<div class=“nix-margin_20”>…</div>

poderia também remover esse elemento quando acessado de um dispositivo móvel aplicando a classe nix-display_none--xs:

<div class=“nix-margin_20 nix-display_none--xs”>…</div>

O suporte ao responsivo pode ser aplicado em todas as classes utilizando o sufixo --xs para telas abaixo de 768px por exemplo.

Além da biblioteca, desenvolvemos também a documentação para o seu uso, que é outra parte que dá muito trabalho e é tão importante quanto a própria lib. Decidimos colocar a documentação em um domínio próprio, que nos deu um pouco mais de liberdade de ‘brincar’ um pouco no visual do site.

Nix é o nosso primeiro (de muitos) projeto open source disponível para toda a comunidade, vale a pena conferir e ver como ele pode acelerar o seu projeto. E como ele é open source toda contribuição será bem vinda!

Conclusão

Utilizamos soluções open source em nosso dia-a-dia que facilitam nossa vida e tornam a web cada vez mais moderna e rica. Agora está na hora de você compartilhar suas ideias e soluções, ganhando em troca mais experiência e oportunidades de carreira.

Contribua com a comunidade, uma simples solução que serviu para você pode servir para outras pessoas também.