Vanilla js

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

Jackson VeronezeSoftware Developer

[email protected]://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze

Autores

Mario MendonçaSoftware Developer

[email protected]://br.linkedin.com/in/mario-mendonca

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.

VantagensO 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.

DesvantagensA 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.

Como escolherJQuery é 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

Events// jQuery$(document).ready(function() { // code})

// jQuery$('a').click(function() { // code…})

// Vanilladocument.addEventListener('DOMContentLoaded', function() { // code})

// Vanilla[].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… })})

Attributes// jQuery$('img').filter(':first').attr('alt', 'My image')

// Vanilladocument.querySelector('img').setAttribute('alt', 'My image')

Classes// jQuerynewDiv.addClass('foo')

// jQuerynewDiv.toggleClass('foo')

// VanillanewDiv.classList.add('foo')

// VanillanewDiv.classList.toggle('foo')

Selectors// jQueryvar divs = $('div')

// jQueryvar newDiv = $('<div/>')

// Vanillavar divs = document.querySelectorAll('div')

// Vanillavar newDiv = document.createElement('div')

Ajax// jQuery$.get('//example.com', function (data) { // code})

// Vanillavar httpRequest = new XMLHttpRequest()httpRequest.onreadystatechange = function (data) { // code}httpRequest.open('GET', url)httpRequest.send()

Comparação de Velocidade

Comparação de Velocidade

Referênciashttp://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/