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.

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:

• Você pode não precisar do jQuery
• Você deve usar ou aprender jQuery em 2020?
• Do jQuery ao JavaScript – Como fazer a mudança

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:

• github/eventlistener-polyfill
• github/buscar
• iamdustan/smoothscroll
• yola/classlist-polyfill

Suporte do navegador para querySelector:

Suporte do navegador para fetch:

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:

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:

• Controle deslizante de imagem – Construtor de controle deslizante CSS, Galeria CSS, Controle deslizante CSS puro
• Modal – Modal CSS Puro
• Validação de formulário – Validação de formulário HTML
• Indicador de rolagem – Indicador de rolagem somente CSS
• Acordeão – 4 maneiras de criar acordeões incríveis somente com CSS
• Caixa de luz – Caixa de luz CSS pura, Caixa de luz somente CSS
• Guias – Guias somente CSS, Guias somente CSS do Material Design
• Role para cima - Puro CSS Smooth-Scroll “Voltar ao topo”
• Rolagem suave para links – Demonstração de rolagem suave CSS
• Barra de navegação fixa – Cabeçalho fixo CSS puro

Caros desenvolvedores de plug-ins

https://w3b.com.br/caros-desenvolvedores-de-plug-ins/?feed_id=12622&_unique_id=6658970830efb