Arquivo da categoria: VS Code

Gulp, Grunt ou Webpack?

No meu post anterior, (Utilizando o Visual Studio Code para desenvolver com TypeScript), falei sobre como utilizar o Visual Studio Code para desenvolver sua aplicação com TypeScript. Caso não esteja familiarizado com TypeScript, veja o primeiro post da série: JavaScript e TypeScript – Breve histórico, definição e primeiros passos.

Parte do sucesso de um projeto depende de um bom setup, ou seja, de como você o configura para facilitar a sua vida durante o tempo de desenvolvimento.

No ciclo de vida de uma aplicação, é comum que novos recursos sejam adicionados a aplicação e, com isso, apareça a necessidade de instalação de uma nova versão da aplicação. Ou, durante o tempo de desenvolvimento mesmo seja necessário copiar as referências de terceiros de uma pasta para um local onde você possa rodar a aplicação e ver se suas modificações funcionaram, ou ainda, minificar e fazer o bundle dos arquivos que você utilizou para desenvolver para que sejam otimizados para o ambiente de execução.

É importante lembrar que uma aplicação web, ou melhor a parte correspondente ao client de uma aplicação web, consiste basicamente de arquivos JavaScript, HTML (estrutura da página), CSS (formatação da aparência), arquivos estáticos (imagens, fontes e outros recursos utilizados na página) e APIs para comunicação com o servidor. Dessa forma, sempre que um usuário acessar sua aplicação, o browser fará o download desses arquivos para o computador do usuário e qualquer otimização que você conseguir apresentar terá um impacto grande na experiência do usuário.

Enfim, seja qual for o motivo, uma coisa é certeza: você acabará executando tarefas repetitivas e, como programadores, nossa tarefa é automatizar esse tipo de tarefa sempre que possível.

Com esse intuito, surgiram várias ferramentas no mercado. Muito provavelmente você deve ter ouvido falar de pelo menos uma delas: Webpack, Gulp ou Grunt.

Se eu tivesse que traçar uma linha do tempo, diria dessa forma: muitos desenvolvedores começaram com o Grunt, depois mudaram para o Gulp e, atualmente, estão no Webpack. Mas no fim, é uma escolha muito pessoal. Alguns desenvolvedores combinam Gulp + Webpack para a realização de tarefas, mas essencialmente, você pode escolher qualquer um deles e ser feliz.

Por definição, tanto Gulp quanto Grunt são Task-Runners, enquanto o Webpack é um module bundler.

Para ajudar na decisão, a linha de tendência de acordo com o Google:

Particularmente, eu comecei com o Grunt e depois fui direto para o Webpack. Mas novamente, isso é uma escolha puramente pessoal e de acordo com o time que você está inserido.

O que você precisa saber:

Todos são customizáveis (alguns mais e outros menos) e possuem um ecossistema interessante de plugins para facilitar nas tarefas mais comuns e lidar com casos de exceção particulares ao seu projeto.

Grunt

As configurações são baseados em declarações, veja o exemplo abaixo.

Por isso, tende a ficar meio bagunçado conforme o arquivo cresce e novas tarefas são adicionadas. A tendência, atualmente, é não utilizá-lo mais.

Gulp

Ao contrário do Grunt, no Gulp as tarefas são funções JavaScript. Existem times que preferem configurações (naturalmente irão para o Grunt) ou times que preferem código.

Apesar de EU nunca ter utilizado o Gulp, vendo os exemplos de arquivos de configuração na internet tenho a impressão de que eles são mais simples, mais fáceis de serem mantidos e de melhor entendimento.

Outro fator interessante é que ele é mais rápido do que o Grunt, e tira vantagem do recursos de Streams disponível no Node. Notem o uso do Pipe no código.

Webpack

O webpack trabalha analisando todo o seu projeto e gera um mapa de dependências. É bem útil em projetos que utilizam vários assets que não são somente código, como fontes, imagens, css e etc.

A desvantagem do webpack é que ele pode parecer mais complexo de configurar, principalmente no início.

Após o mapa de dependência estar definido, o webpack utiliza as configurações pré-definidas para processar as dependências e gerar o resultado final.

Um conceito muito utilizado é o de Loaders, onde você define quais plugins serão executados quando o Webpack encontrar um tipo específico de arquivos.

No exemplo acima, o webpack utilizará o babel-loader para todos os arquivos do tipo .js que existirem no projeto.

 

Utilizando o Visual Studio Code para desenvolver com TypeScript

No meu post anterior (JavaScript e TypeScript – Breve histórico, definição e primeiros passos), falei sobre os primeiros passos para um desenvolvedor que está iniciando com o desenvolvimento client-side utilizando JavaScript, suas dificuldades quando o projeto começa a crescer e um pouco do TypeScript, uma linguagem que a Microsoft criou para tentar solucionar alguns problemas que desenvolvedores enfrentam em projetos que utilizam essa linguagem.

Antes de entrar nos detalhes específicos das linguagens – coisas que abordarei em posts futuros – gostaria de ressaltar o editor de códigos Visual Studio Code.

Muitos desenvolvedores Web tinham (ou ainda tem) um certo preconceito com tecnologias Microsoft. Muitos que conheço, nem sequer tentaram utilizar o Visual Studio Code para formar uma opinião sobre o produto. A semelhança do nome com a IDE completa (que ainda existe e é um produto completamente diferente) criou uma certa barreira.

Quando conseguimos passar essa barreira inicial e mostramos as vantagens de se utilizar o Visual Studio Code no dia-a-dia eles ficam encantados e imediatamente consideram a trocar as ferramentas que utilizavam antes pelo Code (apelido carinhoso :)).

Se você ainda não utilizou, recomendo que testem a ferramenta. Dentre as vantagens que a ferramenta oferece, posso citar algumas:

  • Intellisense aprimorado, inclusive para códigos C#;
  • Multiplataforma, ou seja, roda no Mac, Windows ou Linux.
  • Debugging direto da ferramenta
  • GIT integrado
  • Diversos plugins para melhorar ainda mais a experiência
  • Leve! Muito LEVE!

Voltando ao objetivo do post, mostrar as vantagens do Code para o desenvolvimento de códigos TypeScript, vou apresentar como começar a escrever suas primeiras linhas de código.

Instalando o TypeScript

Como eu disse no outro post, TypeScript utiliza-se de um Transpiler (compilador de código-fonte para código-fonte) para transformar o código que você está escrevendo em JavaScript. Você precisa instalá-lo.

A maneira mais simples de fazer isso é instalar o NPM (Node Package Manager) e utilizá-lo para instalar o TypeScript para você. Para instalar o NPM, e o Node JS, utilize esse link https://nodejs.org/en/download/.

Após instalado, abra um terminal e rode o seguinte comando:

npm install -g typescript

Após a instalação, se tudo der certo, você poderá checar a versão do TypeScript instalada, rodando o seguinte comando:

tsc –version

Esse procedimento mostra como instalar o TypeScript globalmente em sua máquina. Entretanto, em um cenário real de projeto, você pode instalar o TypeScript projeto a projeto e evitar interferências e conflitos de versões de um projeto para outro. Para fazer isso, só remover o -g do comando de instalação acima e o TypeScript será instalado na pasta do seu projeto (pasta atual).

Primeiros passos com o VS Code

Após instalar o VS Code, abra-o.

Eu gosto de criar um atalho para poder iniciar o code a partir de um terminal. O mais legal é que o Code já vem com uma opção pronta para fazer isso por você. Para ativar, digite CTRL+SHIFT+P ou CMD+SHIFT+P se estiver no Mac para abrir as ações do Code e escolha a opção Shell Command: Install ‘Code’ command in PATH.

Após isso, você poderá iniciar o code em qualquer lugar através do terminal rodando o comando “code .”, que abrirá o Code na pasta atual.

Com o Code aberto, vou criar um arquivo TypeScript para iniciarmos.

Como vocês podem ver, o visual é bem clean e na barra de ferramentas (em azul, na parte de baixo) existem algumas informações úteis sobre o arquivo.

Comece a programar!

Notem que o Intellisense, recurso que auxilia mostrando os detalhes do código é muito útil.

Notem que inclusive os tipos das propriedades são apresentadas.

E se eu tentar atribuir uma string a uma variável do tipo numérica, o VS Code alerta que isso não é possível.

 

Configurando o projeto para TypeScript

Em um projeto do tipo TypeScript, é necessário criar na raiz do projeto um arquivo chamado tsconfig.json. Esse arquivo será utilizado pelo Transpiler para gerar o código JavaScript de acordo com os parâmetros definidos nele.

Até nisso o VS Code nos auxilia bastante. Primeiro crie um arquivo e atribua o nome tsconfig.json.

Ao digitar { } e depois abrir as aspas (“) o VS Code mostra todas as opções possíveis para esse tipo de arquivo.

Para esse primeiro momento, utilizaremos da seguinte forma:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

Após isso, voltei ao meu arquivo Test.ts e adicionei uma funcionalidade apenas para demonstrar a conversão do código TypeScript para JavaScript e podermos rodar o código no browser. Ele ficou assim:

Para gerar o código JavaScript, abra o terminal e rode o seguinte comando

tsc test.ts

Se tudo deu certo, você verá que um novo arquivo foi gerado na mesma pasta, mas com a extensão .js.

Ao abrir o arquivo gerado, você verá o resultado em JavaScript:

Esse código está pronto para ser rodado no browser. Se você abrir o console do Chrome e rodar o código lá, verá que ele funcionará.