O nascimento do Dhalsim

Quando devemos publicar o projeto no npm

Pela primeira vez escrevo algo no medium do GetNinjas e vou falar do que aconteceu na última semana de trabalho.

Estamos criando uma nova stack de front-end, que está ficando bem linda e dá orgulho de desenvolver. Com o desenvolvimento dessa stack aproveitamos algumas coisas do projeto antigo, pois precisamos ter as mesmas funcionalidades.

Vamos ao que interessa não é mesmo?

Na semana passada, ao migrar alguns arquivos de JavaScript me deparei com um módulo da antiga stack o qual já tive que usar em algumas telas. Foi ai que surgiu um problema: esquecer de importar um arquivo! Isso já me incomodou e pensei:

Porque esse script não carrega tudo o que ele necessita e todas as suas dependências? É muito chato ter que importar em N lugares tudo que é necessário. Para esquecer de importar algo é muito fácil.

Nesse momento já foi criada uma necessidade e, vendo a migração desse script, pensamos em criar uma lib e deixá-la open source.

Daí surgiu o Dhalsim-js.

Por que o nome Dhalsim-js?

O Dhalsim é uma Lib JavaScript para media query. Isso possibilita executarmos algumas mudanças na view, ativar um teste A/B executar ou não um overlay etc, dependendo do device do nosso cliente.

No GetNinjas procuramos sempre nomear nossos projetos de acordo com nome de Ninja e do Mortal Kombat, porém quando fomos escolher o nome não achamos nada que combinasse com o que a Lib se propõe a fazer. Aí durante uma conversa falei, qual o nome do personagem que se estica todo no Street Fighter? Ai veio a resposta e adoramos a ideia rsrs.

Eu não sei dizer se ele é um ninja ou não, mas faz bastante sentido esse nome!

Como funciona o Dhalsim?

A lib é responsável por adicionar um CSS com breakpoints pré definidos para:

• mobile;
• tablet;
• desktop;
• wide.

Esses breakpoints são baseados no nosso projeto, também open source, o Gaiden. O nosso style guide é baseado em mobile first, por isso nossos breakpoint são a partir da resolução de tablet. O valores padrões são:

• tablet: ‘768px’;
• desktop: ‘960px’;
• wide: ‘1200px’.

Mas também é possível você passar os valores da sua aplicação no momento de instanciar o Dhalsim-js:

const dhalsim = new Dhalsim({
 tablet: ‘868px’,
 desktop: ‘1060px’,
 wide: ‘2200px’,
});

Ao instanciar o Dhalsim-js é necessário fazer o init()dele. Nesse momento ele adiciona os breakpoints no bodyda sua aplicação, dando assim acesso a ele saber qual é o tamanho do device.

E para saber qual a tela da navegação temos alguns métodos que dizem se ela é ou não do tamanho esperado:

dhalsim.isMobile();
dhalsim.isTablet();
dhalsim.isDesktop();
dhalsim.isWide();
dhalsim.beyondTablet();
dhalsim.beyondMobile();

Esses métodos verificam qual é o content do body que foi adicionado pelo CSS. Um exemplo do body com o content ficaria:

body:before {
  content: 'smartphone';
  display: none;
}

Usando na prática vou colocar um trecho de código que é responsável por iniciar um overlay quando o dispositivo for mobile:

if (this.dhalsim.isMobile()) {
 this.overlay.toggle();
}

É muito útil para quando precisamos rodar um teste A/B para diferentes tamanhos de tela.

O que aprendi com ele

Com a criação do Dhalsim-js pude ver quando é necessário abstrair algo para o open source. Parece besta saber quando deve-se ou não abrir uma lib, mas no dia-a-dia acabamos esquecendo que podemos ajudar com algo. E vendo que sempre usamos ele nos nossos projetos ele também pode ser útil tanto para quem está de fora e precisa dessa feature quanto para uma possível manutenção.

Além disso aprendi a tomar coragem para publicar um artigo mais técnico e mostrar um pouco mais do que eu sei e isso é bastante importante para meu desenvolvimento.

Espero que tenham curtido e convido vocês a melhorar o que criamos. Qualquer coisa é só abrir uma issue no Dhalsim-js. Será bem bacana receber contribuições.