Bom, jQuery é “Uma coisa do passado” é uma realidade para muita gente. Mas a grande graça do jQuery é que você consegue fazer as coisas de uma forma muito mais fácil e que você tem certeza de que irá funcionar do IE7 até o Firefox mais moderno, e essa segurança é muito legal para quem não quer perder tempo estudando.

Neste artigo, vou pedir para você ter um olhar mais critico sobre a pergunta “Por que que eu preciso do jQuery?” e irei avaliar o site “What color is it?”, uma página muito divertida e estupidamente simples que transforma a hora atual em um hexadecimal e coloca esse hexa como background. É uma ideia idiota? De certa forma, sim! Todo mundo gostou disso? Sim!

Quando você encontrar seu site favorito, não pense! Pressione CTRL+SHIFT+U

Com esse atalho, você descobre o mundo como ele realmente é, sem fantasias. Você vê o código-fonte de qualquer site. Se você estiver em um Mac, é COMMAND+ALT+U no Chrome e COMMAND+U para o Firefox. E se você usa outro para desenvolver, você já sabe!

Quando você vê o código-fonte, vê a verdade nua e crua, um código mal feito, um código bem feito ou um minificado o suficiente para você ter preguiça de querer entender algo.

Se você é uma pessoa inteligente e proativa (e é), você consegue aprender muito com um buscador e com o DevTools de seu browser aberto.

jQuery e jQuery UI

O site What color is it? tem apenas umas 20 e poucas linhas de JavaScript, e o autor sequer usou o jQuery de verdade. Então, eis a pergunta: por que usar jQuery? Será força do hábito?

Este é todo o código do site, vamos dar uma olhada nele e logo abaixo vamos às críticas, hehehe.

function dotime(){
 
    $("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});
 
    var d = new Date();
    var hours = d.getHours();
    var mins = d.getMinutes();
    var secs = d.getSeconds();
 
    if (hours < 10){hours = "0" + hours};
    if (mins < 10){mins = "0" + mins};
    if (secs < 10){secs = "0" + secs};
 
    hours.toString();
    mins.toString();
    secs.toString();
 
    var hex = "#" + hours + mins + secs;
 
    $("#t").html(hours +" : "+ mins +" : "+ secs);
    $("#h").html(hex);
 
    document.body.style.background = hex;
 
    setTimeout(function(){ dotime();}, 1000);
}

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 1.5;">É usado jQuery nas linhas 3, 20 e 21. Vou separar meus comentários e explicações por títulos e linkando para o número da linha do código acima. Então, abra o site What color is it? no seu browser e abra o código-fonte.</span>

A função dotime (ou quando eu posso manipular o DOM?)

Quando você coloca o JavaScript no fim da tag body antes do fechamento dela, não precisa esperar o evento onLoad, ou famoso $(document).ready do jQuery, ou o DOMContentLoaded, porque você já consegue selecionar elementos e executar funções com os elementos da página. Então, você só precisa esperar o DOM ficar pronto, quando você coloca seus scripts dentro da tag HEAD.

Para começar, vamos retirar a função dotime e, na tag body, retirar a chamada da função dotime. Você não precisa disso.

Eu costumo colocar meu código em volta de uma função, que é executada automaticamente, só para criar um escopo novo e não deixar variáveis globais.

(function () {
  var oi = 'Oie';
}());

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 1.5;">Uma forma simples de explicar isso é que a variável “oi” não será visível no console do DevTool. Isso porque ela não é uma variável global, mas sim uma variável que está disponível apenas dentro daquela função. E é uma boa praticar deixar poucas variáveis globais - quanto menos melhor. Seu código não deveria depender de variáveis globais.</span>

Você não precisa de jQuery para selecionar elementos

Veja a linha 3, 20 e 21, elas estão selecionando elementos com jQuery.

A linha 3 está adicionado um transition para a tag body, que é um transition que não precisa estar no JavaScript – poderia estar no CSS. Então, removi a linha 3 e coloquei a propriedade transition no CSS.

Para selecionar um elemento via JavaScript de uma forma que funcione até no IE8, você tem que fazer isto aqui:

document.querySelectorAll(‘seletor’); e document.querySelector(‘seletor’);

onde selector é um mesmo seletor que você é acostumado a escrever no jQuery ou no CSS. Você tem que ter em mente que essa função no IE8 é limitada aos seletores simples do CSS2, os mais complicados e cheios de mágicas do CSS3 não funcionaram no IE8, talvez nem no IE9, mas no Firefox, Safari, Chrome entre outros irá funcionar perfeitamente. Mas já é uma boa ferramenta, e você não precisará mais de jQuery para isso.

Então, as linhas 20 e 21 ficam assim:

document.querySelector('#t')
document.querySelector('#h')

No código deste exemplo, são usados IDs para delimitar os elementos, sendo assim, você também poderia usar document.getElementById, o que significa que esse código funcionaria no IE6 sem problemas.

Você não precisa de jQuery para adicionar elementos/texto via JavaScript

Eu já falei detalhadamente sobre este assunto neste outro artigo.

Então, as linhas 20 e 21 ficariam assim:

document.querySelector('#t').innerHTML = hours + " : " + mins + " : " + secs;
document.querySelector('#h').InnerHTML = hex;

Conclusão

Você não precisa de jQuery, coloquei o código no codepen.

See the Pen What Color Is It? (VanillaJS) by Felquis (@felquis) on CodePen.

 

Desculpas

Não existe problema em usar jQuery, mas você tem que aprender JavaScript, e hoje as coisas não estão tão difíceis como eram em 2006. Recomendo a leitura do site You Might Not Need jQuery e também deste outro doc, que fala de por que libs como jQuery são importantes. O jQuery foi revolucionário, e é um belo lugar para você aprender muito sobre JavaScript!

A intenção deste artigo não é dizer que quem usa jQuery não é um bom desenvolvedor, mas sim apresentar um mundo cheio de oportunidades na JavaScriptLandia, onde vive o jQuery.

Eu não quero ser chato pegando um código de um site qualquer e dizer que o cara não tem que usar jQuery para isso e que o código do cara é ruim etc. Eu gosto de pegar uma pequena parte de código e ‘filosofar’ um pouco sobre o código – por que foi feito assim? Poderia ter sido feito melhor? Já fiz isso aqui neste outro post, e vou continuar fazendo, porque acho legal.

Outras coisas que poderiam ser questionadas neste exemplo? Sim! Mas não quero deixar este artigo muito longo, eu falo demais. Que tal você pegar o codepen e comentar o que você acha que poderia ser melhoria no JavaScript? Ou no CSS? Ou no HTML? Tem melhorias que podem ser feitas em todos os lugares, clone o codepen, faça sua melhoria e, comente aqui por que o seu ajuste torna o código melhor!