jQuery

Funcionalidades do jQuery com a API nativa do JavaScript

Olá, Web Developers!

Em outro post falamos sobre quando usar e quando não usar o jQuery. Agora nós vamos ver sobre as principais funcionalidades do jQuery que podemos executar apenas com JavaScript nativo. Lembre-se que a maioria dessas funcionalidades estão presentes apenas em navegadores modernos.

Busca de elementos

A principal funcionalidade do jQuery é a busca de elementos. Quando no JavaScript tínhamos funções com nomes compridos e diferentes para cada tipo de seleção (nome do elemento, ID, nome da classe, etc), o jQuery facilitava nossa vida oferecendo uma busca por seletores escritos com a sintaxe do CSS. Hoje em dia isso é possível com a função querySelectorAll().

Também podemos usar essa função para fazer uma busca dentro do elemento selecionado.

// jQuery
var el  = $('div #abc .def');  
$(el).find('button.close');

// JS
var el = document.querySelectorAll('div #abc .def');  
el.querySelectorAll('button.close');  

Requisições Ajax

Uma das funcionalidades mais usadas é a função $.ajax(). Ela é bem mais simples e direta do que trabalhar com o velho objeto XMLHttpRequest.

Hoje em dia nós possuímos a função fetch(), que é tão simples quanto a função $.ajax() e nos permite trabalhar com Promises:

// jQuery
$.ajax({
  'url': '/my/url',
  'type': 'POST',
  'data': JSON.stringify(data)
});

// JS
fetch('/my/url', {  
  'method': 'POST',
  'body': JSON.stringify(data)
})

Classes CSS

Também é comum trabalharmos com a inserção e remoção de classes dos elementos. Poucos usam as funções do JavaScript (muitos nem as conhecem) porque normalmente manipulam com jQuery ou usam algum framework que acaba manipulando os elementos automaticamente.

// jQuery
$(el).addClass('my-class');
$(el).removeClass('my-class');
$(el).toggleClass('my-class');
$(el).hasClass('my-class');

// JS
el.classList.add('my-class');  
el.classList.remove('my-class');  
el.classList.toggle('my-class');  
$(el).hasClass('my-class');

Extend

Esta função permite que os valores de um ou mais objetos sejam atribuidos em outro objeto.

// jQuery
$.extend({}, objA, objB);

// JS
Object.assign({}, objA, objB);  

Uma diferença aqui é que o jQuery permite que os campos de nível mais profundo do objeto sejam misturados, enquanto a função nativa do JavaScript só permite uma união nos níveis mais rasos do objeto.

Eventos

Esse é bem conhecido: adicionar e remover listeners em elementos.

O que não atrai muito (como a maioria das funcionalidades) é a diferença do tamanho do nome das funções.

// jQuery
$(el).on(eventName, eventHandler);
$(el).off(eventName, eventHandler);

// JS
el.addEventListener(eventName, eventHandler);  
el.removeEventListener(eventName, eventHandler);  

Finalizando

Uma lista bem completa de funcionalidades do jQuery feitas com JavaScript puro pode ser encontrada em:

http://youmightnotneedjquery.com/

Porém, como dito anteriormente, deve-se analisar bem as necessidades do projeto para poder dizer se devemos incluir ou não o jQuery.

Compartilhe as suas ideias com a gente aí nos comentários? o/

Ainda vale a pena utilizar o jQuery?

Olá, Web Developers!

Hoje trago aqui algumas reflexões sobre a biblioteca JavaScript mais famosa, o jQuery. Será que ainda vale a pena utilizá-lo?

Ainda é muito comum ver empresas, tanto no Brasil quanto no exterior, cobrando o conhecimento de jQuery. Normalmente ocorre um dos dois motivos para esse requisito: falta de conhecimento de quem escreveu o perfil da vaga ou necessidade de dar suporte a um código legado.

A API do jQuery é bem simples de se aprender, então, nesse caso, será um ponto positivo em seu currículo (mesmo que provavelmente você nem precise utilizar na nova empresa), e não te tomará tanto tempo assim.

Conhecimento nunca é demais. Não precisa estar totalmente atualizado sobre as novidades e conhecer tudo o que está na documentação. Pelo menos saber como ele funciona, sim, vale muito a pena. Há muitos cenários possíveis no mundo da programação e pode aparecer um caso em que a ferramenta se encaixe perfeitamente para a sua necessidade.

Quando devo usar jQuery?

A maior parte dos desenvolvedores dirão “nunca!” para essa pergunta logo de prima. Mas, vamos analisar alguns pontos positivos:

1) Caso precise trabalhar com o DOM, o uso do jQuery pode ajudar, já que sua API é mais elegante e simples do que o JavaScript puro.

2) Caso esteja criando um projeto pequeno, como um site simples, não fará sentido usar um framework poderoso. Se for trabalhar com muitas funções das quais o jQuery possua, ele pode ser um belo aliado para se escrever menos código.

3) Outra vantagem é sua simplicidade. Normalmente a maioria dos desenvolvedores novatos conseguem aprender a usar jQuery mais rapidamente do que outros frameworks ou a API do DOM. Assim, eles já conseguem criar efeitos, animações, requisições e lidar com eventos.

4) Há muitos plugins e ferramentas que usam jQuery. É comum encontrar boas soluções para algumas situações e, nesses casos, o jQuery acaba sendo uma dependência obrigatória. Mas, se possível, prefira procurar algo independente de jQuery para não ter que incluí-lo apenas por causa de uma funcionalidade.

5) O jQuery era muito apreciado por normalizar as diferenças de funcionalidades que existiam entre navegadores. Então, caso ainda precise dar suporte a navegadores mais antigos, o jQuery pode ser uma boa pedida.

6) Por ser simples e direto ao ponto, pode ser perfeito caso esteja apenas precisando criar um protótipo rápido. Eu adoro tentar fazer várias coisas com CSS puro e evitar o máximo de JavaScript, mas tenho que admitir que animações e efeitos com jQuery são bem mais rápidos e simples de se escrever.

Quando evitar?

1) Hoje em dia temos várias funcionalidades do jQuery no próprio JavaScript e as animações são melhores quando feitas com CSS3. Caso só precise dar suporte aos navegadores modernos, provavelmente não precisará do jQuery.

2) Não é bom ficar acessando o DOM diretamente. Caso precise atualizar muito as informações na tela, exibir muitas informações ou acessar o DOM frequentemente, prefira um framework ao invés de usar jQuery ou JavaScript puro, pois eles já são otimizados para se trabalhar com templates, acessando o DOM o mínimo possível. Há também bibliotecas leves que servem apenas para criar componentes com uma ótima performance.

3) O jQuery tem como principal objetivo facilitar o uso de funcionalidades simples do JavaScript (“write less, do more”). Porém, em muitas aplicações será muito comum a necessidade de funcionalidades mais complexas como: roteamento, componentização, formatação, modularização, validações, etc. Nesses casos, para realmente escrever menos, você provavelmente precisará de um framework, o qual terá tantas funcionalidades que dispensará o uso de jQuery.

4) Ao escrever várias funcionalidades com jQuery, é muito comum misturar HTML no meio do JavaScript, dentro de funções. O uso de frameworks modernos nos ajuda a separar e manter o código mais organizado.

5) Em aplicações grandes, você terá muito mais trabalho para gerenciar cada pedaço do que cada código faz. Com jQuery, muitas funcionalidades serão escritas por você, enquanto que com um framework, muitas coisas já estarão prontas e testadas. Tem pessoas que tem medo de frameworks com muita “mágica”, porém, se você souber como usar estas “mágicas” a seu favor, você desenvolverá muito mais rápido e sem erros. As próprias linguagens de programação são “mágicas” em certas funcionalidades. Nós simplesmente aprendemos a utilizá-las ao invés de ficar pensando em como cada bit de informação será processado.

6) O site http://youmightnotneedjquery.com/ possui uma grande lista de funcionalidades do jQuery e como fazer o mesmo com JavaScript puro. Várias funcionalidades são simples de aprender, e as mais complexas você pode encapsular em uma função, evitando ter que incluir a biblioteca inteira caso precise apenas de uma ou outra, apenas.

Então, devo ou não utilizá-lo?

Como sempre, a maioria das coisas em programação resume-se em “depende”.

A melhor maneira de saber se deve ou não usar alguma coisa é ter um bom conhecimento sobre as ferramentas disponíveis, conhecimento da equipe, quais as necessidades do projeto, tempo disponível, etc.

Não há uma resposta absoluta. O melhor mesmo é ter a cabeça aberta para se fazer uma boa análise do que será necessário fazer no projeto e escolher as melhores ferramentas. Fuja de pessoas que usam a palavra “sempre” para alguma biblioteca ou framework pois, normalmente, possuem pouco conhecimento em outras ferramentas.

Espero que os pontos levantados aqui te ajudem a se decidir em seu próximo projeto. Caso tenha outras ideias de quando usar ou evitar, compartilhe com a gente aí nos comentários. =)

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES