Execução em tempo de desenvolvimento dos projetos em Node.js

Node.js 19 de Jun de 2020

Apresentaremos as principais ferramentas que utilizamos para compilação e build em tempo de desenvolvimento no backend Node.js, a evolução das ferramentas por demanda na aplicação, por exemplo: no começo utilizamos o nodemon, depois sucrase com nodemon e agora ts-node-dev, por quê cada uma foi utilizada, qual o propósito delas? 🚀

Tudo começa com o Node.js

O Node.js consegue executar arquivo Javascript de forma nativa:

Basta executar o comando no terminal:

node index.js

O resultado vai aparecer no terminal, porém toda vez que o arquivo alterar temos que executar o comando node index.js de novo e manualmente.

Conforme o projeto vai aumentando e a quantidade de arquivos crescendo, precisamos automatizar esse processo.

Primeira coisa que podemos fazer é colocar um script no package.json e utilizar o npm ou yarn para executar o projeto.

Exemplo de um script no package.json:

"scripts": { 
  "dev": "node index.js" 
 }

Poderia executar esse script com o comando npm run dev ou yarn dev. O script com a propriedade "dev" será executado com os parâmetros informados.

Mas ainda a cada alteração no código, preciso executar o yarn dev ou npm run dev.

Precisamos evoluir automatizando a cada alteração do código fazer um auto reload do projeto.

Entra em ação o Nodemon

Nodemon é uma ferramenta que ajuda no processo de desenvolvimento de aplicações em Node.js, onde automaticamente detecta os arquivos alterados e reinicia a aplicação. O nodemon não requer nenhuma mudança ou configuração adicional no projeto, com ele você só altera a ferramenta de execução, node por nodemon, simples assim.

Para instalar basta executar o comando no terminal na raiz do projeto:

npm install nodemon -D

Colocar no script do package.json

"dev" : "nodemon index.js"

E executar o comando npm run dev. Tudo já vai estar funcionando perfeitamente.

Nodemon é altamente utilizado nos projetos com Node. Ele automatiza o projeto super bem em uma aplicação backend com Node.js, usando apenas com Javascript em ambiente de desenvolvimento.

Mas conforme o projeto cresce, precisamos continuar evoluindo. Como estamos trabalhando com backend, frontend e mobile utilizando Javascript, queremos melhorar a nossa experiência de desenvolvimento em todas as frentes e manter um padrão de escrita no código. A linguagem JS é repleta de novidades com novas sintaxes, como import/export e async/await, entre outras — utilizadas na web com React, ou mobile com React Native — por isso nós queremos trazer isso tudo para o backend utilizando Node.js.

Sucrase entra em ação

A proposta do Sucrase é ser uma alternativa ao Babel que permite termos builds super rápidos.

Com sucrase no projeto podemos utilizar Javascript Moderno. No site dele tem um playground bem legal onde você pode colocar um código Typescript e ele irá transformar o código e comparar com o Babel em termos de velocidade. Experimente fazer com esse código aqui.

Marca [x] jsx e [x] typescript e veja o resultado: com sucrase leva 16.3ms e com Babel 69.74ms para compilar o código. Confira na imagem:

Para instalar o sucrase:

yarn add sucrase

Para executar o sucrase podemos rodar o comando:

yarn sucrase-node index.js

Mas voltamos para o primeiro problema. Temos um código mais novo rodando, porém precisamos executar novamente o comando a cada alteração, porque ele apenas faz a compilação, então é necessário integrar o nodemon com sucrase na aplicação.

Então usamos em conjunto o Nodemon + Sucrase

Usamos o sucrase com nodemon para aproveitar o melhor dos dois mundos. O sucrase para converter nosso código typescript em javascript; e o nodemon para fazer o auto reload da aplicação em tempo de desenvolvimento. Ganhamos velocidade e, com isso, produtividade.

Adicionamos as duas bibliotecas no projeto:

npm install sucrase nodemon

Para executar o sucrase podemos rodar o comando:

yarn sucrase-node src/server.js

No package.json colocamos a propriedade "dev:server" : "nodemon src/index.js", por exemplo.

E para integrar o sucrase ao nodemon criamos um arquivo nodemon.json na raiz do projeto:

{
  "execMap: { 
     "js": "node -r sucrase/register",
  }
}

Essa configuração fala para executar um execMap para todo arquivo com extensão .js, quero que rode o node mas registrando o sucrase/register.

A flag -r indica que é para executar um arquivo antes da aplicação.

Então antes de executar a aplicação, esse arquivo é executado e vai lá na node_modules do projeto, dentro de sucrase, e executa o register antes de inicializar a aplicação.

E ai sim, agora o nodemon está integrado ao sucrase e temos uma sintaxe mais moderna no projeto em tempo de desenvolvimento. Podendo inclusive usar o Typescript com Node.js.

O Sucrase é uma ferramenta excelente e atende super bem algumas aplicações Node.js com Typescript.

Porém o Sucrase manda a real e no Readme ele já deixa claro algumas limitações, como por exemplo não dar suporte aos Decorators que iremos falar mais adiante.

TSC (TypeScript Compiler), uma outra opção para a compilação

Quando instalamos o Typescript no projeto ele já vem com seu próprio compilador na pasta node_modules/.bin/tsc.

Para usar o tsc basta executar:

yarn tsc index.ts

Ele vai fazer a compilação dos arquivos Typescript do projeto em arquivos Javascript na versão que o Node.js consegue interpretar, até mesmo nas versões mais antigas.

E para rodar o projeto podemos executar node index.js ou nodemon index.js no arquivo compilado pelo tsc.

Voltamos ao mesmo problema de ter que automatizar a compilação e o auto reload da aplicação em tempo de desenvolvimento.

Melhoria contínua

Voltando ao Sucrase, ele tem uma limitação porque não consegue lidar com Decorators quando usamos ORM com Typescript — como TypeORM para criar as entidades. Temos adotado ele na arquitetura de alguns projetos, por exemplo na versão do Gobarber da GoStack11, onde foi feita uma mudança estrutural bem grande.

Exemplo de Decorators:

import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";

@Entity()
export class User {

  @PrimaryGeneratedColumn() 
  id: number;

  @Column()
  firstName: string;
  
  @Column()
  lastName: string;
  
  @Column() 
  age: number;

}

Decorators entrega mais funcionalidades na função, ou na classe, e até mesmo na variável.

Mas se você não usa o Decorators, pode continuar com o Sucrase :)

Entra em cena o TS-NODE-DEV

Para resolver o problema da limitação do Sucrase entra em cena o ts-node-dev.

É uma ferramenta que compila seus projetos com Typescript e reinicia o projeto quando o arquivo é modificado.

Compiles your TS app and restarts when files are modified.

Ele não é mais rápido que o Sucrase, porém ele implementa a funcionalidade de Decorators que precisamos utilizar com TypeORM.

Instalação:

yarn add ts-node-dev -D

Package.json:

"script": {
   "dev:server": "ts-node-dev --respawn -- --transpileOnly server.ts"
 }

A flag --transpileOnly indica que só transpila o código e não verifica se ele está certo ou errado. Nós não precisamos dessa verificação em tempo de desenvolvimento porque o VsCode, mesmo sem Eslint configurado, já faz isso para a gente.

A flag --respawn serve para que o ts-node-dev fique observando alterações do código, para transpilar e fazer auto reload da aplicação.

Agora não precisamos mais do nodemon, só com ts-dev-node já resolvemos nosso problema.

Ele é bem rápido e dá para configurar para não executar a compilação dos arquivos da node_modules do nosso projeto. Isso é um ganho de tempo porque os arquivos da node_modules já foram compilados e otimizados para estarem inclusos. O ts-node-dev já tem o auto reload.

Conclusão

Nodemon + Sucrase é um excelente combo para maioria das aplicações Node.js com Javascript Moderno e até mesmo com Typescript. Mas se você precisar usar os Decorators do Typescript em algumas bibliotecas, como TypeORM que citamos, o ts-node-dev é uma excelente opção no momento.

Para usar uma ferramenta temos que levar em consideração qual se adequa melhor ao nosso projeto e qual é o seu propósito. É isso que temos que ter em mente: implantar conforme as necessidades e demandas de nossa aplicação.

E aí, curtiu o post? Você já utiliza essa ferramentas? O que você acha delas? 🚀

Quer ver como criar uma aplicação com Node + Typescript com Ts-Node-Dev na prática, veja essa Masterclass incrível em nosso canal do Youtube. ♥️