A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Para atender novas demandas muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.
Esta serie especifica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.
Esse artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.
O JavaScript é uma linguagem de script desenhada inicialmente para tratar páginas web, mas agora é usada em quase todas as formas imaginavéis. Avanços foram feitos para permitir que o JavaScript execute no lado servidor bem como compilado em código de aplicações nativas para telefones. Hoje o desenvolvedor JavaScript faz parte de um rico ecossistema formado por centenas de IDEs, ferramentas e frameworks. Com muitas opções e recursos, alguns desenvolvedores podem encontrar dificuldade de saber como começar. Nesse artigo será discutido sobre o perfil do moderno desenvolvedor JavaScript, iniciando com uma breve história do JavaScript e apresentado os mais populares frameworks, ferramentas e IDEs.
Uma breve excursão através da história
Vamos voltar para 1995 quando o Netscape Navigator e o Internet Explorer 1.0 eram as escolhas disponíveis de navegadores. Os sites web tinham apenas textos e muitos GIFs. Um site completo de conteúdo rico demorava 2 minutos para carregar em uma conexão discada (dial-up). Ao longo do caminho, uma linguagem web nasceu permitindo que esses sites web antigos pudessem executar código no lado cliente. Esse foi o ano que nasceu o JavaScript.
Os sites web de 20 anos atrás não usavam muito JavaScript e certamente não usavam seu potencial total. Ocasionalmente havia um alerta popup para informar algo, a rolagem de um texto em uma caixa com notícias ou um cookie que armazenava seu nome e apresentava novamente quando retornasse alguns meses depois. Certamente não havia empregos nos quais o JavaScript era a linguagem primaria, salvo aqueles poucos sortudos que tinham o trabalho de criar o JavaScript. Em resumo, era um truque para os sites web enfeitarem os seus DOM.
Hoje, o JavaScript pode ser encontrado virtualmente em todos os locais. Do AJAX, ao Bootstrap, ReactJS, Angular, o ubíquo jQuery e mesmo o Node.js no lado servidor, o JavaScript se tornou uma das mais importantes e populares linguagens da web.
Frameworks
Uma das maiores formas que o JavaScript que mudou desde sua origem foi na forma de utilizar. Já se foi os dias que precisávamos chamar document.GetElementById e tratar objetos do tipo XmlHttpRequest. Ao invés disso, diversas bibliotecas úteis abstraíram muito as funcionalidades principais para tornar o JavaScript mais acessível aos desenvolvedores. Isso é um dos grandes motivos do porque encontramos o JavaScript em todos os lugares.
jQuery
O jQuery, criado em 2006 por John Resig. Fornece um rico conjunto de ferramentas para abstrair e simplificar os comandos e métodos ocúltos e rígidos do JavaScript. A forma mais fácil de demonstrar isso é através de um exemplo:
Uma requisição AJAX feita com JavaScript puro:
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// código para IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// código para IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
alert("sucesso");
}
else if(xmlhttp.status == 400) {
alert("erro 400")
}
else {
alert("algo quebrado")
}
}
}
xmlhttp.open("GET", "test.html", true);
xmlhttp.send();
}
Fonte: Stack Overflow
Uma requisição AJAX feita com jQuery:
$.ajax({
url: "test.html",
statusCode: {
200: function() {
alert("sucesso");
},
400: function() {
alert("erro 400");
}
},
error: function() {
alert("algo quebrado");
}
});
O jQuery fez com que as dificuldades das funções JavaScript se tornassem fáceis para usar e manipular trechos do DOM. Como resultado, ele é uma das bibliotecas mais amplamente usada para JavaScript, e a ideia de abstração que veio com ele, foi a base na qual outras bibliotecas e frameworks foram modelados.
AngularJS
O AngularJS, ou simplesmente angular como é chamado, surgiu em 2009. Ele foi criado pelo Google para facilitar a construção de aplicações de página única (Single Page Application - SPA). Como o jQuery, ele também abstrai o trabalho difícil em métodos reusáveis. Ele fornece uma arquitetura de model-view-controller para o JavaScript.
ReactJS
O ReactJS, ou "React" com vem sendo chamado, é o novato. Foi criado pelo Facebook e liberado pela primeira vez em 2013. O Facebook considera o React como uma nova forma de tratar problemas de SPA que o Angular ainda trabalha para resolver. É correto comparar Angular e React como frameworks concorrentes. No entanto, o que realmente separa é que o React é mais eficiente, alto desempenho e biblioteca mais veloz. O gráfico a seguir apresenta o tempo de execução do React, Angular, Knockout (uma biblioteca de terceiros não discutido nesse artigo) e JavaScript puro para renderizar uma lista com 1000 itens no DOM:
Fonte: The Dapper Developer
Se o desempenho é importante para sua aplicação, então o React é o caminho a seguir.
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.
/filters:no_upscale()/articles/modern-javascript-toolbox/pt/resources/fig4.png){kind=link}
/filters:no_upscale()/articles/modern-javascript-toolbox/pt/resources/fig5.png){kind=link}
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.
Automatizando as coisas com Grunt
Apesar do nome, Grunt está longe de ser primitivo. É uma robusta ferramenta de construção através de linhas de comandos que executa as tarefas definidas pelo usuário. Através da especificação de um arquivo de configuração simples, podemos configurar o Grunt para compilar LESS ou SASS, construir e minimizar todos os arquivos JavaScript e CSS em pastas especificas, ou mesmo executar uma ferramenta de linting ou framework de testes. Também é possível configurar o Grunt para executar como parte de um script personalizado do Git (Git hook) - minimizando e construindo seu código somente se houver algo no repositório de controle do código.
Grunt suporta targets nomeados então é possível especificar diferentes comandos para diferentes ambientes; pode definir alvos como "dev" e "prod", por exemplo. Isso é útil em diversos cenários como na construção e minimização do código em produção, mas deixando normalmente no ambiente de desenvolvimento para facilitar a depuração.
Uma funcionalidade útil do Grunt é o "grunt watch" que monitora se há mudança em um diretório ou conjunto de arquivos. Isso pode ser integrado diretamente com IDEs como WebStorm e Sublime Text. Usando o "watch" é possível acionar eventos com base na alteração dos arquivos. Uma aplicação prática dessa abordagem é a compilação LESS e SASS. Ao configurar o monitoramento dos arquivos LESS e SASS é possível compilar eles imediatamente após a mudança do arquivo, fazendo com que a saída da compilação fique imediatamente disponível no seu ambiente de desenvolvimento. Outro exemplo é durante o desenvolvimento, pois a página realiza de maneira automática o "atualizar" a cada vez que algum arquivo do projeto é alterado. Também é possível usar o essa funcionalidade para automaticamente executar uma ferramenta de linting em qualquer arquivo modificado. A execução em tempo real das tarefas via "grunt watch" é uma das formas de aumentar sua produtividade.
Automatizando as coisas com Gulp
O Grunt e o Gulp são competidores diretos que disputam para resolver os mesmos problemas de automatização da construção. A maior diferença entre eles é que o Grunt foca em configuração, enquanto o Gulp foca no código. Configuramos as tarefas em arquivos JSON no Grunt e escrevemos funções JavaScript nos arquivos Gulp para realizar as mesmas tarefas.
A seguir temos um arquivo de configuração do Grunt para compilar arquivos SASS para CSS sempre que o arquivo for alterado:
grunt.initConfig({
sass: {
dist: {
files: [{
cwd: "app/styles",
src: "**/*.scss",
dest: "../.tmp/styles",
expand: true,
ext: ".css"
}]
}
},
autoprefixer: {
options: ["last 1 version"],
dist: {
files: [{
expand: true,
cwd: ".tmp/styles",
src: "{,*/}*.css",
dest: "dist/styles"
}]
}
},
watch: {
styles: {
files: ["app/styles/{,*/}*.scss"],
tasks: ["sass:dist", "autoprefixer:dist"]
}
}
});
grunt.registerTask("default", ["styles", "watch"]);
Fonte: Grunt vs Gulp - Beyond the Numbers
Esse é o arquivo Gulp que configura a compilação de arquivos SASS para CSS sempre que o arquivo for alterado:
gulp.task("sass", function () {
gulp.src("app/styles/**/*.scss")
.pipe(sass())
.pipe(autoprefixer("last 1 version"))
.pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
gulp.run("sass");
gulp.watch("app/styles/**/*.scss", function() {
gulp.run("sass");
});
});
Fonte: Grunt vs Gulp - Beyond the Numbers
Recomendo usar de acordo com sua preferência. Ambas ferramentas são instaladas através do npm, o Gerenciador de Pacotes do Node.js.
Resumo
O JavaScript está evoluindo significativamente desde seu nascimento nos primeiros dias da Internet. E hoje é uma funcionalidade proeminente e importante para a interação das aplicações web.
O desenvolvedor também está evoluindo significantemente desde 1995. Hoje os desenvolvedores JavaScript modernos usam frameworks ricos e robustos, e IDEs para trabalhar de modo eficiente e produtivo.
Construir sua primeira aplicação JavaScript moderna é mais fácil do que se imagina! Apenas escolha uma IDE (recomendo o Atom para os iniciantes) e então instale o npm e grunt. Se houver problemas ao longo do caminho, o Stack Overflow é um recurso excelente. Com pouco tempo é possível aprender tanto o básico como a maneira de publicar sua aplicação JavaScript moderna.
Recursos
Frameworks:
IDEs:
Linting:
Ferramentas e automatização do build:
Recursos úteis:
Sobre o autor
David Haney trabalha na equipe de gerenciamento da engenharia na Stack Exchange, criador de questões e respostas nos sites StackOverflow e ServerFault. Ele passa o dia ajudando os desenvolvedores a resolverem seus problemas e melhorar os processos. Ele trabalhou anteriormente como líder de desenvolvimento da plataforma de e-commerce Fanatics que hospeda mais de 10.000 web sites incluindo o NFLShop - A loja virtual oficial da NFL e NBAStore.com - A loja oficial da NBA. David é criador da Dache, um framework de caching distribuído de código aberto. Seu tempo extra é gasto bebendo cerveja e participando de comunidades de grupos de usuários e eventos de programação - muitas vezes simultaneamente.
A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Para atender novas demandas muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.
Esta serie especifica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.
Esse artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.