Caixa de ferramentas do JavaScript [parte 1]

Programar em JavaScript tornou-se algo fundamental na web 3.0. Se você quiser criar um site ou um sistema web com funções aprimoradas de forma prática, é essencial buscar ferramentas JS e incluir em seu projeto. Irei postar aqui uma série de 3 posts relativos a essa linguagem e citando as principais opções que desenvolvedores web do mundo inteiro devem ter em sua caixinha de ferramentas.

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.

Essa serie de artigos é original do site InfoQ, chamado de “Próxima geração do HTML5 e JavaScript“. Se quiser. 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.


… Continua no próximo post.

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.