Caixa de ferramentas do JavaScript [parte 2]

Continuando nossa série sobre Ferramentas JavaScript para desenvolvimento web, iremos falar sobre os ambientes de desenvolvimentos e IDEs propícias para a linguagem. O objetivo é citar as principais opções que os desenvolvedores web do mundo inteiro tem utilizado nos últimos tempos.

f7dff-ides-linux-header


Ambiente de desenvolvimento JavaScript

Uma importante parte do desenvolvimento eficiente é o uso de uma IDE. Uma IDE, ou Ambiente de Desenvolvimento Integrado, é uma aplicação que oferece um conjunto de ferramentas para o desenvolvedor. A parte mais importante dessas ferramentas normalmente é o rico editor de texto, que oferece destaque das sintaxes, auto completar e teclas de atalho que acelera os processos manuais.

Sublime Text

O Sublime Text não é de fato uma IDE. Ele é leve, um editor de texto para programação super rápida, que oferece o destaque da sintaxe e teclas de atalhos intuitivas. Sendo multi plataforma, é excelente para os desenvolvedores que querem usar no Mac ou PC. Virtualmente tudo no Sublime Text pode ser customizado. Também oferece múltiplos plugins que permitem recursos como de uma IDE, por exemplo, a integração com Git e análise de erros no código (linting). Ela é uma ótima escolha para os entusiastas e novos desenvolvedores JavaScript. O Sublime Text pode ser baixado e avaliado gratuitamente, sua licença custa $70.

Fonte: Sublime Text

WebStorm

O WebStorm foi criado pela equipe da JetBrains como uma pequena IDE focada em HTML, CSS e JavaScript. O custo da licença é $49 e é amplamente considerado de fato como padrão para profissionais JavaScript, e por uma boa razão. O construtor de complementação de código e inspeção de ferramentas são inigualáveis. O WebStorm também oferece um depurador de JavaScript rico e integrado testes de unidade com os frameworks populares, como: execução de testes Karma e JSDriver e até o Mocha do Node.js.

Uma das melhores funcionalidades do WebStorm é a funcionalidade de Edição ao Vivo. Instalando um plugin em ambos Chrome e WebStorm, um desenvolvedor pode fazer mudanças no código que são instantaneamente refletidos no navegador. Os desenvolvedores podem também configurar a Edição em Tempo Real para destacar as mudanças que são feitas na janela do navegador, permitindo depuração e alta produtividade durante a codificação.

No geral, o WebStorm é a IDE para escolher se usar JavaScript em tempo integral.

Fonte: JetBrains

Brackets

Brackets é uma IDE gratuita e de código aberto construído com foco na ferramenta visual. O Brackets também oferece a funcionalidade de edição ao vivo similar ao WebStorm que deixa visualizar instantaneamente os resultados das mudanças nos códigos na janela do navegador. Também suporta edição lado a lado, que permite trabalhar no código e ver os resultados simultaneamente sem precisar trocar entre as aplicações e as janelas popup. Uma das funcionalidades mais interessantes do Brackets chama Extract, que analisa arquivos Photoshop (PSD) para obter as fontes, cores e informações de medições. Essa funcionalidade faz do Brackets uma excelente escolha para os desenvolvedores JavaScript que também trabalham com design.

Fonte: Brackets

Atom

Atom é uma ferramenta de código aberto de um editor de texto rico criado pelo GitHub. Muito acessível e fácil de usar, é possível instalar e executar ele sem tocar em arquivos de configuração, ele “simplesmente funciona”. A parte mais interessante do Atom é a habilidade para customizar todos aspectos dele (ele foi definido como “hackeavel” pelo GitHub). O Atom é construído em cima de um núcleo web, permite a customização da aparência escrevendo seus próprios padrões de HTML, CSS e JavaScript. Quer cores de background e fontes diferentes no Atom? Apenas altere os valores do CSS. Alternativamente, podemos baixar e aplicar um dos muitos temas criados para o Atom. Isso permite a flexibilizar o Atom da forma como quiser. O Atom é uma ferramenta excelente para os novos desenvolvedores JavaScript e também para hackers entusiastas.

Fonte: Atom

Ferramentas de construção e automatização

Os modernos projetos que utilizam JavaScript tendem a serem um pouco complexos, com muitas peças móveis. Isso não é devido a ineficiência da linguagem ou das ferramentas; isso é resultado direto das aplicações web ricas, vibrantes e complexas que são construídas nos dias atuais. Quando trabalhamos em grandes projetos, haverá muitos processos repetitivos que devemos fazer sempre que precisamos verificar um código ou liberar a versão de produção. Esses processos podem ser como: o empacotamento de vários arquivos em um único arquivo (bundling), a redução dos arquivos (minification), compilação dos arquivos CSS LESS ou SASS e até execução dos testes. Fazer todo esse trabalho manualmente é frustrante e ineficiente. É muito melhor automatizar o trabalho através de uma ferramente que suporta essas tarefas.

Bundling e Minification

Muitos dos JavaScripts e CSS que são escritos precisam ser compartilhados entre diversas páginas web. Como resultado, esse conteúdo é guardado em arquivos .js e .css, e então referenciados nas páginas web. Com isso, o navegador do visitante faz uma requisição HTTP para obter esses arquivos (ou pelo menos verificar se houve mudança) para poder renderizar completamente sua aplicação web.

Realizar diversas requisições HTTP são custosas. Estão, na topo temos os gastos com carga de dados, mas também pagamos pelo custo de latência da rede, cabeçalhos e cookies. As ferramentas de bundling e minification são projetadas para reduzir ou eliminar completamente esses custos.

Bundling

Uma das coisas mais simples que o desenvolvedor pode fazer é aprimorar o desempenho dos códigos web empacotando (bundling) eles em um único arquivo. O bundling é o processo de juntar múltiplos arquivos JavaScript e CSS em arquivos únicos de JavaScript e CSS. Isso é como juntar partes individuais de uma foto panorâmica para criar uma única e foto contínua. Juntando os arquivos JavaScript e CSS, eliminamos muitas gastos com requisições HTTP.

Minification

Outra maneira da qual o desenvolvedor JavaScript pode aprimorar o desempenho é através da minificação (minification) do código recém empacotado. A minification reduz o JavaScript e CSS a menor forma possível, mantendo ao mesmo tempo a funcionalidade idêntica. Para o JavaScript isso significa renomear as variáveis para tokens de caracteres únicos e sem sentido, remover todos os espaços em branco e formatações. Para o CSS, que se baseia nos nomes das variáveis, isso tipicamente significa somente remover a formatação e espaços em branco. A minification fornece uma drástica melhoria de desempenho da rede porque reduz o número de bytes enviados na resposta HTTP.

Nosso não minificado seguimento de código JavaScript AJAX mostrado anteriormente:

$.ajax({
    url: "test.html",
    statusCode: {
    	200: function() {
    		alert("sucesso");
    	},
    	400: function() {
    		alert("erro 400");
    	}
    },
    error: function() {
    	alert("algo quebrado");
    }
});

O mesmo código minificado:

$.ajax({url:"test.html",statusCode:{200:function() {alert("sucesso");},
400:function(){alert("erro 400");}},error:function(){alert("algo quebrado!");}});

Note que o arquivo minificado de saída foi quebrado em duas linhas para apresentar nesse artigo. A saída atual da minificação é normalmente uma única linha.

Quando empacotar e minimizar

Geralmente, os passos de empacotar e minimizar são feitos apenas em produção. Dessa forma podemos depurar o código localmente ou em ambiente de desenvolvimento, com o código completamente formatado e com número nas linhas. A depuração do código minimizado acima seria difícil; todo o código estaria na linha 1. A minificação deixa o código completamente ilegível, que o torna ainda mais inútil e frustrante para tentar depurar.

Mapeamento de arquivos fonte

Algumas vezes um bug ocorre no seu código que somente pode ser reproduzido em produção. Isso coloca um problema quando precisamos depurar algum item, mas todo o código está minificado. Felizmente, no JavaScript é possível realizar o mapeamento de arquivos de código fonte que “mapeia” entre o código minificado e o código original. O arquivo de mapeamento do código é gerado durante a minificação através da ferramente de empacotamento. Seus depuradores favoritos de JavaScript usam o arquivo de mapeamento para fornecer um código legível para depuração. Podemos publicar o código de produção com os arquivos de mapeamento sempre que possível, então podemos depurar o código se algo der errado.

Linting

Uma ferramenta de linting analisa o código procurando erros comuns e equívocos nas regras de formatação. Os tipos de erros reportados são coisas como o uso de tabs ao invés de espaços, falta de ponto e vírgula no final das linhas ou usar chaves fora da declaração de if, for ou while. As IDEs mais comuns vem com ferramentas de linting; outras oferecem a habilidade para instalar um plugin de linting.

Os linters mais populares de JavaScript são JSHint e JSLint. O JSHint é desenvolvido pela comunidade e é um fork do JSLint, o framework original de linting escrito por Douglas Crockford. Variam um pouco nos padrões de formatação de código que eles impõem. Aconselho a usar ambos e escolher qual o melhor para o estilo de codificação do projeto que estiver trabalhando.


… Continua no próximo post.

Anúncios

Autor: Daniel Brandão

Desenvolvedor Web e Professor. Gosto de debater, escrever e comentar a respeito da vida, tecnologia, o pensar, a sociedade, a vida cotidiana e da vida vindoura.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.