VanillaJS: So nutzen Apple, Facebook und Amazon das schnellste JavaScript-Framework
VanillaJS eigentlich „nur“ JavaScript. (Foto: © Lisovskaya - iStock.com)
„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 eigentlich „nur“ JavaScript. (Foto: © Lisovskaya – iStock.com)
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; |
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?