24.11.2014, 13:13 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Die ganz Großen nutzen es: Facebook, Amazon, Yahoo, Wikipedia, Apple, oder eBay, wohin man auch sieht: VanillaJS ist allgegenwärtig. In diesem Artikel zeigen wir euch das unglaublich schnelle und extrem mächtige Framework.

„VanillaJS is the lowest-overhead, most comprehensive framework I’ve ever used.“Jeder

Wahrscheinlich wird kein Framework so häufig eingesetzt wie VanillaJS, und das zu Recht. Denn vanilla.js ist in der maximalen Größe nur 0.02 Kilobyte groß – gzipped.

VanillaJS: Unglaublich klein, unglaublich schnell

Und VanillaJS ist nahezu unbegrenzt erweiterbar: Ihr könnt VanillaJS mit den Plugins Backbone.js, Angular.js, Dojo, jQuery und Mootools beliebig erweitern. VanillaJS erlaubt Entwicklern sprichwörtlich unlimitierte Möglichkeiten. Möglich ist das unter anderem, da VanillaJS bereits im Browser verarbeitet werden kann, bevor überhaupt ein Request an einen Server gesendet wurde. Aber das ist nicht alles: VanillaJS ist unglaublich schnell. Die jQuery-Bibliothek ist in der Lage 350.557 IDs pro Sekunde aufzurufen – das ist verschwinden gering, zu den unglaublichen 12.137.211 IDs die VanillaJS in der selben Zeit abfragen kann.

Implementierung mit VanillaJS

Für einen direkten Vergleich haben wir euch Code-Snippets vorbereitet damit ihr sehen könnt wie VanillaJS im Vergleich zu jQuery aussieht:

jQuery	VanillaJS
$(document).ready(function() { // code… });	document.addEventListener("DOMContentLoaded", function() { // code… });
var divs = $("div");	var divs = document.querySelectorAll("div");
var newDiv = $(" ");	var newDiv = document.createElement("div");
newDiv.addClass("foo");	newDiv.classList.add("foo");
newDiv.toggleClass("foo");	newDiv.classList.toggle("foo");
$("a").click(function() { // code… })	[].forEach.call(document.querySelectorAll("a"), function(el) { el.addEventListener("click", function() { // code… }); });
$("body").append($(" "));	document.body.appendChild(document.createElement("p"));
$("img").filter(":first").attr("alt", "My image");	document.querySelector("img").setAttribute("alt", "My image");
var parent = $("#about").parent();	var parent = document.getElementById("about").parentNode;
var clonedElement = $("#about").clone();	var clonedElement = document.getElementById("about").cloneNode(true);
$("#wrap").empty();	var wrap = document.getElementById("wrap"); while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
if($("#wrap").is(":empty"))	if(!document.getElementById("wrap").hasChildNodes())
var nextElement = $("#wrap").next();	var nextElement = document.getElementById("wrap").nextSibling;

Eine umfangreiche Dokumentation zu VanillaJS findet ihr übrigens hier! Ihr könnt euch VanillaJS auf der offiziellen Website herunterladen, müsst ihr aber nicht, denn: VanillaJS wird von allen Browsern bereits unterstützt.

Fazit: Unglaubliches Framework, das völlig unterschätzt wird

Ihr merkt schon. Bei VanillaJS handelt es sich um nicht anderes als um reines JavaScript. VanillaJS ist ein Gag. Das Ziel dahinter ist es, darauf aufmerksam zu machen, ob wirklich eine 90-Kilobyte-Library verwendet werden muss um einen einfachen Fade-In-Effekt zu realisieren. Aufgrund dessen ist die vanilla.js-Datei auch leer, wenn ihr sie öffnet – egal welche Features ihr ausgewählt habt. Trotzdem sollte einem klar werden, dass JavaScript durchaus auch einige Performance-relevante Vorteile hat, die meistens ungenutzt bleiben, wenn ihr euch gegen VanillaJS – also reines JavaScript – entscheidet. Schreibt ihr mit VanillaJS?