O documento discute a evolução do desenvolvimento web, comparando o uso de jQuery com JavaScript puro (vanilla JS) e CSS para interações e animações em sites. Apresenta a crescente discussão sobre a necessidade de jQuery, dado o avanço das capacidades dos navegadores e das técnicas de codificação com CSS3, sugerindo que muitos desenvolvedores utilizam apenas uma fração de sua funcionalidade. O autor conclui que, embora jQuery continue a ser popular e útil, especialmente para gerenciar eventos e AJAX, o aprendizado de vanilla JS pode melhorar a qualidade do código e a lógica de programação.

1. Abandonando jQuery
Usando vanilla JS e CSS
Konnng Agência Digital

2. Julio Vedovatto
31 anos
Graduado em Tecnologia em Informação pela UFPR
Pós em Design de Interação
Web Developer
Apaixonado pela web e surfar nela desde seu primeiro
computador, com acesso a Internet em 1998.
• http://linkedin.com/in/vdvtt
• http://github.com/juliovedovatto
• http://www.konnng.com

3. Introdução
jQuery é um grande amigo do desenvolvedor
ao se trabalhar com interações web.
Ele veio como uma solução cross-browser, um
framework de utilidades para acelerar
desenvolvimento de Javascript em uma página.
Muitos acabam anexando jQuery na aplicação
como requerimento de alguma outra coisa
(Bootstrap por exemplo), pelas facilidades dos
métodos ou simplesmente por costume.
Com o avanço das Engines Javascript, chegou
um momento que podemos parar e refletir de
realmente precisamos dele como “pau pra
toda obra”

4. Introdução
jQuery é uma biblioteca de
funções JavaScript que interage com o HTML,
desenvolvida para simplificar
os scripts interpretados no navegador do cliente
(client-side). Lançada em dezembro
de 2006 no BarCamp de Nova York por John
Resig.
Usada por cerca de 77% dos 10 mil sites mais
visitados do mundo, jQuery é a mais popular das
bibliotecas JavaScript
Principais funcionalidades do jQuery:
• Resolução da incompatibilidade entre os navegadores.
• Redução de código.
• Reutilização do código através de plugins.
• Utilização de uma vasta quantidade de plugins criados por outros
desenvolvedores.
• Trabalha com AJAX e DOM.
• Implementação segura de recursos do CSS1, CSS2 e CSS3.
- wikipedia

5. Introdução
Na época ele veio como uma luva, pois AJAX
estava ganhando cada vez mais espaço na
web e sua sua engine de seletores de
elementos era muito boa. Tudo isso com
encadeamento de comandos (chainable).
Seu motor de animação era perfeito, pois no
seu surgimento supriu a falta de animações
CSS (navegadores não davam suporte ainda
aos seletores especiais).
Na época superou o Prototype.JS, que era algo
complicado de usar.
AJAX + motor de seletores + animação = sucesso

6. Introdução
Framework ganhou muitos livros a respeito,
inclusive do Maujor.
O framework tinha uma boa documentação,
bom suporte pra plugins de terceiros (porém
seu repositório deixava a desejar), possuí uma
lib de UI consistente (e ainda muito usada) e
inclusive uma lib para suporte mobile.
Ao contrário das outras libs, era muito
amigável. Não precisava ser um programador
experiente para realizar feitos com a biblioteca.
Esse era o fator decisivo na sua conquista da
web.

7. Introdução
Sua primeira versão saiu em 2006, sua
popularidade ascendeu apenas em 2007, com
o lançamento da versão 1.2.
Sua versão 1.3 em 2009 consolidou e deu
entrada a sua era de Ouro. Com seu motor de
seleção Sizzle, tornou-se muito rápido e
dinâmico capturar elementos e manipulá-los a
vontade.
Desde seu lançamento, houve apenas 19
releases. Sua última versão é a 3.2.1, lançada
nesse ano, com apenas 85kb (em minify).

8. Vanilla JS

9. Abandonando o jQuery
Hoje com a evolução tanto do motor CSS como
do motor JavaScript dos browsers, o uso do
jQuery em si pode se tornar debatível no
desenvolvimento web.
É um processo natural da evolução, do life
cycle de uma aplicação.
Nos dias atuais, com poucas linhas de JS puro
(Vanilla JS), podemos resolver problemas que
o jQuery tratava.
O motor de animação pode ser totalmente
deixado de lado e usar recursos do CSS3
como transform, animation e keyframes.

10. Abandonando o jQuery
Se pararmos pra pensar, acabamos usando
apenas 1% de sua capacidade total, então se
pensarmos num ambiente “mais leve”, ele já
não se torna tão necessário.
Eu, pessoalmente, ainda uso ele mais por
causa do suporte AJAX e gerenciamento de
eventos, do que para o resto das coisas.
Muitos podem pensar que com Vanilla JS e
CSS o código pode se tornar maior do que o
esperado e ter que lidar com situações que a
biblioteca lida impecavelmente.

11. Abandonando o jQuery
Se pararmos pra ver a qualidade de código que
os plugins tem a oferecer, a vulnerabilidade
que os mesmos apresentação, isso acaba já
sendo um fator decisivo na escolha se usa ou
não ele no desenvolvimento do frontend que
você possa estar trabalhando.
Por anos, muitos acabaram adotando a
biblioteca por sua facilidade de uso, suporte da
comunidade e toneladas de plugins.
Mas nossa intenção como desenvolvedor não
é melhor sempre? Nem sempre "menos" é algo
bom. Podemos fazer maior uso do que os
Browsers tem a oferecer.

12. Vanilla JS
A tradução literal ficaria como "JavaScript
Baunillha", que significa que não teve sua
forma original modificada.
O termo veio de uma brincadeira na época de
ouro dos frameworks JS. Foi criado um site
chamado Vanilla JS, mostrando features e até
testes de benchmark comparando com outros
frameworks.
Tudo isso para mostrar como pode ter
vantagens escrever código puro.

14. Vanilla JS
A seguir será apresentado e comentado alguns
exemplos de como pode ser usado código puro
ao invés de usar funcionalidades do jQuery.

15. Capturando elemento
Capturando elemento dentro de outro
Adicionando HTML dentro de um elemento
Iteração de elementos
Limpando conteúdo de um elemento
jQuery IE8+
$(element)
document.querySelector(element) document.querySelectorAll(e
lements)
jQuery IE8+
$(element).find(seletor)
element.querySelectorAll(seletor)
jQuery IE8+
$(selector).each(function(i, el){}); Array.prototype.forEach.call(elements, function(item, i){})
jQuery IE8+
$(element).append(child) element.appendChild(child)
jQuery IE8+
$(element).empty() / $(element).html('') element.innerHTML = ''

16. Pegando valor de uma propriedade CSS
Pegando texto dentro do elemento
Verificando se o elemento contém uma classe
Adicionando uma classe a um elemento
Removendo uma classe
jQuery IE9+
$(el).css(atributo) window.getComputedStyle(element)[atributo]
jQuery IE9+
$(element).text() element.textContent
jQuery IE10+
$(selector).addClass('classe'); element.classList.add('classe')
jQuery IE10+
$(element).hasClass('classe') element.classList.contains('classe')
jQuery IE10+
$(element).removeClass(‘classe') element.classList.remove(‘classe')

17. Elemento “pai" de um elemento
Posição de um elemento
Adicionando um elemento por primeiro dentro de outro
Removendo um elemento
Recuperando/Alterando/adicionando um atributo do elemento
jQuery IE6+
$(el).parent() element.parentNode
jQuery IE7+
$(element).position() element.offsetLeft / element.offsetTop
jQuery IE7+
$(element).remove() element.parentNode.removeChild(element)
jQuery IE6+
$(parent).prepend(element) parent.insertBefore(element, parent.firstChild)
jQuery IE6+
$(element).attr(‘atributo’) $(element).attr(‘atributo’,
‘valor')
element.getAttribute(‘atributo') element.setAttribute(‘atri
buto’, ‘valor')

18. Adicionado um evento ao elemento
Removendo um evento do elemento
Adicionando evento para ser executado apenas uma vez
Evento quando página termina de carregar (Ready)
jQuery IE9+
$(element).on(‘evento’, function (e) {}) element.addEventListener(‘evento’, function (e) {})
jQuery IE9+
$(element).off(‘evento')
var event = function (e) {} // evento foi adicionado ao
elemento // [...] element.removeEventListener(‘evento’,
listener, false)
jQuery IE9+
$(element).one(‘evento’, function (e) {})
element.addEventListener(‘evento’, function (e) {
// Código vai aqui
e.target.removeEventListener(e.type, arguments.callee)
}
// Chrome 55/Firefox 52/Edge 16+
element.addEventListener(‘evento’, function (e) {}, { once:
true });
jQuery IE9+
$(document).ready(function () {})
document.addEventListener( 'DOMContentLoaded',
function () {} )

19. AJAX
Iterando por uma Array
Verificando se um elemento está na Array
Executando função dentro da Array
jQuery IE9+
$.get() / $.post() / $.ajax()
// POST var request = new
XMLHttpRequest() request.open('POST', 'url',
true) request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-
8') request.addEventListener("load", function()
{}) request.send(data) // GET var request = new
XMLHttpRequest() request.open('GET', 'url',
true) request.addEventListener("load", function()
{}) request.send(data)
jQuery IE9+
$.each(array, function (i, item) {}) array.forEach(function(i, item) {})
jQuery IE9+
$.inArray(array, ‘valor’) array.indexOf(‘valor’)
jQuery IE9+
$.map(array, function (item, i) {}) array.map(function (item, i) {})

20. Vanilla JS
A partir do IE9, trabalhar com Vanilla JS
melhora muito, sendo possível realizar coisas
que seus predecessores não eram capazes.
Google Chrome e Firefox possuem suporte a
isso desde suas versões primordiais.

21. Vanilla JS
Uma das desvantagens é que você terá que
escrever consideravelmente algumas linhas de
código a mais para conseguir com o jQuery.
O lado bom da coisa é que você irá aprender
mesmo a lidar com as “discrepâncias" entre os
navegadores, ficando íntimo do código, você
acaba melhorando sua qualidade de programação.

22. Animações utilizando CSS

23. Animações
A seguir será apresentado alguns exemplos de
animação com CSS, ao invés de usar o motor
de animação do jQuery

24. Mostrar / Esconder um elemento
$.fadeIn / $.fadeOut
jQuery IE10+
$(element).show() / $(element).hide()
// CSS .visible { display: block; } .hidden { display:
none; } //
Javascript element.classList.add(‘visible') element.classLi
st.add(‘hidden')
jQuery IE10+
$(element).fadeIn() / $(element).fadeOut()
// CSS @keyframes fadeIn { 0% { opacity: 0; } 100% {
opacity: 1 } } @keyframes fadeOut { 0% { opacity: 1; }
100% { opacity: 0 } } .fadeIn { animation-name:
fadeIn; animation-duration: 0.7s; } .fadeOut {
animation-name: fadeOut; animation-duration: 0.7s; } //
Javascript element.classList.add(‘fadeIn') element.classLis
t.add(‘fadeOut')

25. $.slideUp / $.slideDown
jQuery IE10+
$(element).slideUp() / $(element).slideDown()
// CSS @keyframes slideDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes slideUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
} .slideUp { animation-name: slideUp; animation-
duration: 0.7s; } .slideDown { animation-name:
slideDown; animation-duration: 0.7s; } //
Javascript element.classList.add(‘slideUp') element.classLi
st.add(‘slideDown’)

26. Animações
Com @keyframes e animation, podemos
facilmente realizar o mesmo que o jQuery faz.
Pode-se usar também atributo CSS transition,
pra ditar o que deve ser animado ou não

27. Animações
Por questões de cross-browser, recomenda-se
verificar o suporte do você quer realizar, um
exemplo é usar o caniuse.com pra verificar ou
usar biblioteca npm como autoprefixer

28. Animações
jQuery é conhecido por ser um pouco lento ao se trabalhar
com animações, principalmente as mais complexas.
Utilizando animações CSS, estaremos utilizando o próprio
motor CSS do navegador, que irá usar a GPU (placa
gráfica) para trabalhar com isso, ganhando desempenho
Em dispositivos mobile, irá notar mais esse impacto em
termos de desempenho, já que há limitações de hardware
(tanto CPU como gráfico). Uma das recomendações
básicas para se trabalhar com mobile é utilizar animações
CSS ao invés de JavaScript

29. Conclusão
Como puderam ver com esses poucos
exemplos, é possível realizar coisas sem a
necessidade da biblioteca jQuery em seu
código.
Claro, que em alguns casos, as linhas de
código multiplicam a fica aquele pensamento
“mas com o jQuery consigo com uma linha só,
para que vou escrever três pra conseguir a
mesma coisa”.
Como desenvolvedor é bom você aprender a
escrever as coisas da maneira mais "pura"
possível, para melhorar sua lógica e,
conseqüentemente, sua qualidade de código.

30. Conclusão
jQuery surgiu como uma ótima alternativa
numa época ainda “negra" dos navegadores
(Google Chrome foi surgir apenas 2 anos
após).
O Internet Explorer ainda tinha seu próprio
padrão, enquanto Firefox e o Opera lutavam
para mostrar uma web mais “standard”.
jQuery pode-se ser comparado a um “canivete
suíço” para sua aplicação web, isso (e sua
maneira simples de fazer código) deu sua
popularidade até os dias atuais.

31. Conclusão
No contexto atual, com a evolução rápida das
tecnologias, logo teremos compatibilidade total
com ES6 / ES7 / ES8 nos navegadores,
tornando ainda mais válido o pensamento
“devo utilizar o jQuery ainda?”
Claro que, podemos utilizar bibliotecas npm
como Babel, para termos as mesmas features
modernas suportadas no navegador
atualmente.

32. Conclusão
jQuery ainda é e ainda vai ser (por muito tempo)
requerimento para muitos pacotes bower / yarn /
webpack.
Desenvolvedores ainda irão preferir usar ele do
que escrever JS puro, para ganhar tempo de
desenvolvimento.
"Pra que re-inventar a roda se ela já está bem
otimizada"

33. Conclusão
Eu ainda gosto de usar jQuery quando vou
desenvolver, pois já estou muito acostumado com ele.
Trabalho com ele principalmente por causa do
excelente gerenciamento de eventos e AJAX. Tirando
isso, não utilizo muita coisa dele.
Existem alguns tutoriais na internet ensinando como
compilar o jQuery apenas com algumas features. No
meu caso, eu tiraria todo o motor de animação dele,
isso me incentivaria a ser criativo com o CSS :P

34. Conclusão
Tudo depende do seu "bom senso” como
desenvolvedor e até onde você quer solucionar
o que é dado a você ;)

35. FIM

36. Obrigado a todos!