Apresentação cujo objetivo é demostrar que não precisamos usar jQuery para todos os apps que desenvolvemos. As vezes queremos fazer algo pequeno e simples e não vale a pena carregar uma biblioteca inteira. Vanilla js é uma denominação ao uso do javascript puro.

1. Vanilla JS
“Pode ser que você não precise de jQuery”

2. Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Autores
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca

3. O que é Vanilla JS
É JavaScript puro.
A forma apresentada, para parecer como um framework, talvez seja proposital
como forma de piada já que há uma crítica sobre a proliferação de frameworks que
em geral pouco agrega de fato.

4. Vantagens
O benefício mais objetivo de usar JavaScript puro ou Vanilla JS é o melhor
desempenho. Outro benefício é uma melhor compreensão da linguagem que você
ganha ao escrever códigos em Vanilla JS.

5. Desvantagens
A desvantagem de usar Vanilla JS é que é mais fácil cometer erros ou perder
alguma coisa, é menos amigável (que jQuery), e pode exigir desenvolver mais
código para atingir objetivos que levaria menos tempo com jQuery.

6. Como escolher
JQuery é uma boa escolha nas seguintes situações:
Para pequenos projetos, onde a performance não é um problema
Projetos simples, com prazo apertado
Grandes projetos que usam uma biblioteca ou estrutura que tem jQuery como dependência
Onde não usar jQuery incluem:
Adquirir conhecimento intermediário e avançado em JavaScript
Aplicações Web complexas
Desenvolver sua própria biblioteca
Aplicações do lado do servidor com Node.js

7. Events
// jQuery
$(document).ready(function() {
// code
})
// jQuery
$('a').click(function() {
// code…
})
// Vanilla
document.addEventListener('DOMContentLoaded',
function() {
// code
})
// Vanilla
[].forEach.call(document.querySelectorAll('a'),
function(el) {
el.addEventListener('click', function() {
// code…
})
})

8. Attributes
// jQuery
$('img').filter(':first').attr('alt', 'My image')
// Vanilla
document.querySelector('img').setAttribute('alt', 'My
image')

9. Classes
// jQuery
newDiv.addClass('foo')
// jQuery
newDiv.toggleClass('foo')
// Vanilla
newDiv.classList.add('foo')
// Vanilla
newDiv.classList.toggle('foo')

10. Selectors
// jQuery
var divs = $('div')
// jQuery
var newDiv = $('<div/>')
// Vanilla
var divs = document.querySelectorAll('div')
// Vanilla
var newDiv = document.createElement('div')

11. Ajax
// jQuery
$.get('//example.com', function (data) {
// code
})
// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.open('GET', url)
httpRequest.send()

12. Comparação de Velocidade

13. Comparação de Velocidade

14. Referências
http://pt.stackoverflow.com/questions/46983/o-que-%C3%A9-o-vanilla-js
https://gist.github.com/liamcurry/2597326
http://vanilla-js.com/
http://youmightnotneedjquery.com/