Imagine a seguinte situação: você está desenvolvendo uma certa funcionalidade para o seu software e encontra um pacote npm que promete resolver todos os seus problemas. Normalmente quando isso acontece, entramos na documentação do projeto para entender direitinho como instalar e utilizar.

Agora imagine se fosse possível testar este pacote antes de colocá-lo como dependência dentro do seu projeto (ou mesmo ter que criar um segundo projeto em paralelo só para testar). Isso não seria incrível? Pois bem, já é possível fazer isso através do npm Runkit, assunto do artigo.

Conheça o RunKit

Como o próprio site oficial define, o npm RunKit é um playground para testar código. Ele executa um ambiente Node.js completo com todos os 400.000 pacotes do npm já pré-instalados, incluindo o próprio npm.

A sua utilização é simples e gratuita, seguindo somente algumas diretrizes:

• Todos os documentos do RunKit são públicos
• Para utilizar os pacotes, basta usar o require()
• É possível utilizar arrow functions, classes, template string e a maior parte das funcionalidades do ES6.

Devemos usar await em qualquer Promise, ao invés de usar callbacks (há este exemplo como referência).

Sua utilização não exige cadastro, mas com ele podemos criar trechos de códigos em Node.js que são embeddables.

Vamos dar uma olhada em seu funcionamento.

Testando tudo diretamente pelo browser

O primeiro passo é acessar o site oficial. Ao acessa-lo, você cairá nesta página:

Já podemos fazer os testes nesta própria página, mas recomendo que você se cadastre para poder aproveitar todas as funcionalidades (basta clicar no botão Sign Up for Free e utilizar a sua conta do GitHub).

Ao se cadastrar, você cairá na página chamada My First Playgroud. Lá, já vamos ter um código que nos dá uma boa ideia do que o RunKit é capaz.

O primeiro ponto bacana que devemos reparar, é que podemos pegar informações sobre o processo em que nosso código está sendo executado. Notem que o process.version é v8.10.0 (versão do Node.js). Aproveitando este exemplo, podemos verificar quais são as propriedades do objeto process. O RunKit organiza as informações de forma bastante agradável para leitura (muito semelhante ao que os browsers fazem nos respectivos consoles):

O segundo ponto interessante é o botão “+ add library…“, que fica ao lado da área de código. Ao clicá-lo, podemos fazer a busca de pacotes por nome. O bacana é que a busca é inteligente e traz resultados de acordo com o que você vai digitando. Por exemplo, vamos procurar pelo pacote async-get-json. Assim que eu digitar “async”, uma série de resultados já são retornados, sendo que cada um também já mostra seus dados da página oficial do repositório:

Bem prático, não é mesmo? E uma vez que importamos o pacote para o código, sua versão fica marcada visualmente como referência:

No exemplo, fazemos o require do pacote async-get-json para – assim como o próprio nome já revela – fazermos uma requisição GET que nos retorna um JSON. Na linha 8 notem que o await é utilizado (como orientado na diretriz).

Com a resposta desta API em mãos, conseguimos ver outro ponto interessante. A propriedade iss_position da API é uma coordenada (latitude, longitude). O RunKit possui uma inteligência que entende que isso é uma coordenada e utiliza o Leaflet para renderizar essa posição em um mapa.
Outras funcionalidades que vale a pena citar

O RunKit é bem completo e nos oferece mais algumas outras opções para brincar. Por exemplo, a maioria das APIs requerem uma chave única. Como o código é público, não faz o menor sentido expor ela. Para resolver isso, podemos cadastrar esta chave em uma variável de ambiente, na tela de Environment Settings:

Ainda falando em APIs, também podemos criar APIs dentro do RunKit. Para isso, utilizamos o objeto Endpoint. Basta implementarmos uma função que recebe uma request e uma response como argumentos*.

Feito isso, o RunKit gera uma URL que reflete em tempo real a resposta da nossa API. Vejam só:

Fora tudo isso, também podemos:

• Configurar como os pacotes aparecem no RunKit
• Criar “Custom Viewers” (como o mapa, por exemplo)
• Criar um embed do seu código
• Tudo isso e muito mais está documentado aqui.

Conclusão

Se você quer conhecer novas bibliotecas e testá-las antes de coloca-las como dependência dos seus projetos, o npm RunKit é o cara ideal. Além de ser gratuito, oferece todo o ambiente Node.js no próprio navegador, com funcionalidades como busca em tempo real, que facilitam muito a nossa vida.

Referências

• https://runkit.com/home

Se você ainda não está craque no ES6, dê uma olhada no nosso curso completo com preço promocional e mais de seis horas de conteúdo. Aproveite este gancho também, para ler o nosso artigo “O mundo além do Express.js”.