Caros desenvolvedores de plug-ins

Quando comecei a codificar em JavaScript em 2013, pensei que jQuery era o “JavaScript” real e que jQuery deveria ser incluído em todas as páginas para executar meu código JS.

Caros desenvolvedores de plug-ins

Mas por que? Porque todo código que copiei do StackOverflow funcionou somente após importar o jQuery! 😅

O que há de errado com jQuery

jQuery tem 90 KB, mas quando reduzido tem apenas 32 KB.

Isso é tão pequeno. Um bom CDN pode entregar isso em menos de 50ms!

Mas não se trata do tamanho. jQuery tem cerca de 10 mil linhas de código. Você pode não estar usando nem 10% dele.

imagem 8

Cada linha deve ser analisada e avaliada pelo navegador, o que consome muitos recursos. Este processo afeta o tempo de renderização, especialmente em dispositivos móveis.

Para ver a diferença real, aqui está a mesma funcionalidade escrita em jQuery puro e JavaScript vanilla:

jQuery:

JavaScript baunilha:

Aqui está a diferença de desempenho:

Enquanto jQuery levou 2,4s, JavaScript puro levou apenas 0,8s. Isso mostra Vanilla JavaScript é 4x mais rápido que jQuery.

Alguns anos atrás, escrever funções padrão em JavaScript vanilla era uma dor e o jQuery tornou nossas vidas mais fáceis.

Mas os navegadores da web evoluíram muito. A maioria das funções que você escreveu em jQuery podem ser escritas em JavaScript puro.

Aqui estão alguns exemplos:

1. Solicitações Ajax

Buscando dados de um URL:

jQuery:

$.ajax({   url: '/api.json',   type: 'GET'   success: (data) => {     console.log(data)   } })

JavaScript baunilha:

fetch('/api.json')   .then(response => response.text())   .then(body => console.log(body))

2. Encontre elementos e manipule

Encontre alguns elementos do DOM (HTML) e mude de cor:

jQuery:

Olácomo vai você?

Meu? Eu sou bom.

JavaScript baunilha:

Olácomo vai você?

Meu? Eu sou bom.

3. Mostrar/ocultar elementos

Caso de uso comum de jQuery, mostrar/ocultar algo ao clicar:

jQuery:

 

JavaScript baunilha:

 

4. Animar

jQuery:

 

JavaScript baunilha:

Você pode encontrar muito mais exemplos semelhantes em:

E quanto ao suporte ao navegador?

A maioria das funções que usei acima são amplamente suportadas em todos os principais navegadores.

 

Caros desenvolvedores de plug-insCaros desenvolvedores de plug-ins

Geralmente é o Internet Explorer e o Opera Mini, que não suportam alguns deles.

Se ainda quiser oferecer suporte a esses navegadores antigos, você pode detectar o navegador e adicionar polyfills. Aqui estão alguns polyfills para essas funções comuns:

Suporte do navegador para querySelector:

imagem 1

Suporte do navegador para fetch:

imagem 2

Todo mundo está se mudando, exceto WordPress

Graças ao avanço feito nas ferramentas de desenvolvimento front-end e no suporte do navegador, agora podemos descartar o jQuery como uma dependência, mas você nunca notaria o contrário

Caros desenvolvedores de plug-ins

Bootstrap 5 – postagem no blog

GitHub.com também removeu o jQuery em 2018 – Removendo jQuery do front-end do GitHub.com.

Embora todos tenham começado a se afastar do jQuery, é bastante complicado no WordPress devido ao grande número de plug-ins e temas.

Da recente postagem no blog de Atualizando a versão do jQuery fornecida com o WordPress:

imagem

O WordPress deve descontinuar o jQuery e migrar gradualmente para o Vanilla JavaScript.

Talvez você também não precise de JavaScript

Caros desenvolvedores de plug-ins

Como eu disse antes, a web e o JavaScript estão evoluindo rapidamente. Da mesma forma CSS.

Muitas funções que eram feitas via JavaScript agora são feitas via CSS. Isso proporciona outro aumento de desempenho.

Caros desenvolvedores de plug-ins

Algumas delas que podem ser feitas em CSS puro:

Caros desenvolvedores de plug-ins