Depuis peu, j'utilise Vanilla JS.
Mais qu'est ce que c'est? Encore un framework à la mode ?
Pas exactement.

Du Javascript pur

Déjà.

On a oublié ce qu'était le Javascript pur, lorsque Jquery est arrivé.

$('#toto')

et plus facile à apprendre, plus rapide à écrire.

et la performance dans tout ça ?

Au final, on a relégué cette partie au second plan.
Pourquoi ? Parce que nos PC, sur lesquels les développeurs développent (ah bon?)et testent leur code, sont assez puissants. Et ne pensent pas que les utilisateurs n'ont pas forcément une machine dernier cri, ou son sur smartphone.
Hé puis, il y a beaucoup de plugins à JQuery!

Il faut penser 'utilisateur', et placer le visiteur au cœur de notre développement.

Ainsi, pourquoi inclure JQuery lorsqu'il n'y a besoin que de très peu de Javascript ? On n'en utilise qu'une infime partie ...
Sur smartphone, JQuery est-il si puissant que cela ?
En fait, selon le site officiel de VanillaJS, les différents framework (oui, cela ne s'accorde pas, c'est un mot anglais !) , ceux-ci se comportant en fait qu'en une sorte de proxy, ils sont beaucoup moins performants que le Javascript natif.

Pourquoi Vanilla alors ?

En fait, Vanilla n'est pas un framework. C'est juste une "méthode", un genre de troll pour attirer les amoureux des derniers framework, pour tout simplement leur dire "hé les gars, regardez la puissance de Vanilla".
Et (re)montrer qu'il y a toujours un équivalent à Jquery. Un équivalent simple, ou presque.

// jQuery
$(document).ready(function() {
  // mon code
})
// Vanilla
document.addEventListener('DOMContentLoaded', function() {  
  // mon code
})

Voici quelques exemples

Voici donc quelques équivalents de fonctions jQuery bien utiles en VanillaJS :

Sélecteurs :

// jQuery
$(‘#id’);
$(‘.class’);
$(‘p’);
$(‘#id .class’);
// VanillaJS
document.getElementById(‘id’);  
document.getElementsByClassName (‘.class’);  
document.getElementsByTagName(‘p’);  
document.querySelectorAll(‘#id .class’); // document.querySelector(‘#id .class’) // récupère uniquement le premier élement  

Événements :

// jQuery
$(document).ready(fn);
$(element).on(eventName, eventHandler);
// VanillaJS
document.addEventListener('DOMContentLoaded', fn);  
element.addEventListener(eventName, eventHandler);  

Classes et attributs :

// jQuery
$(el).addClass(className);
$(el).removeClass(className);
$(el).hasClass(className);
$(el).toggleClass(className);
$(el).attr(attributeName);
$(el).attr(attributeName, attributeValue);
// VanillaJS
el.classList.add(className);  
el.classList.remove(className);  
el.classList.contains(className);  
el.classList.toggle(className);  
el.getAttribute(attributeName);  
el.setAttribute(attributeName, attributeValue);  

Contenu :

// jQuery
$(element).html();
$(element).html(string);
// VanillaJS
element.innerHTML;  
element.innerHTML = string;  

Manipulation du DOM :

// jQuery
$(parent).append(el);
$(parent).prepend(el);
$(element).after(htmlString);
$(element).before(htmlString);
$(element).remove();
$(element).find(selector);
$(element).next();
$(element).prev();
$(element).parent();
// VanillaJS
parent.appendChild(el);  
parent.insertBefore(el, parent.firstChild);  
element.parentNode.removeChild(el);  
element.insertAdjacentHTML('afterend', htmlString);  
element.insertAdjacentHTML('beforebegin', htmlString);  
element.querySelectorAll(selector);  
element.nextElementSibling;  
element.previousElementSibling;  
element.parentNode;  

Fonctions pour les tableaux :

// jQuery
$.each(array, function(i, item){
});
$.inArray(item, array);
$.isArray(arr);
// VanillaJS
array.forEach(function(item, i){  
});
array.indexOf(item);  
Array.isArray(arr);  

Ajax et JSon

// jQuery
$.getJSON('/mon/url', function(data){
});
$.ajax({
  type: 'POST',
  url: '/mon/url',
  data: data
});
$.ajax({
  type: 'GET',
  url: '/mon/url',
  success: function(resp){
  },
  error: function(){
  }
});
// Vanilla JS
var request = new XMLHttpRequest();  
request.open('GET', '/mon/url', true);  
request.onload = function(){  
  if(this.status >= 200 && this.status < 400){
    // Success!
    var data = JSON.parse(this.response);
  }else{
    // We reached our target server, but it returned an error
  }
};
request.onerror = function(){  
  // There was a connection error of some sort
};
request.send();  
var request = new XMLHttpRequest();  
request.open('POST', '/mon/url', true);  
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');  
request.send(data);

var request = new XMLHttpRequest();  
request.open('GET', '/mon/url', true);  
request.onload = function(){  
  if(this.status >= 200 && this.status < 400){
    // Success
    var resp = this.response;
  }else{
    // Erreur que le serveur renvoie
  }
};
request.onerror = function(){  
  // erreur serveur
};
request.send();  

Attention, certaines fonctions ne sont pas compatibles avec des anciens navigateurs, comme Cependant, il y a toujours les polyfills, comme classList.js qui implémente « element.classList ».
classList.js.

Et pourquoi devrais-je l'utiliser ?

Tu cherches de la performance? Tu cherches la rapidité? Tu cherches la légèreté ? Alors utilise Vanilla. Et redore le blason du Javascript et sa puissance.

Sources: Putain de code
Site officiel VanillaJS