Vanilla Javascript

Vanilla Javascript

Web Stuff 30.09.2015 2229

There was a time in web development that when a website was powered with any Javascript it was bad, some people even blocked Javascript on the browser so it won't be executed. Today that would be almost impossible, if a website is not dynamic it does not have a chance in the world wide web. Flash should be banned so the only way to make a website dynamically is Javascript. Like us many of you will use jQuery (or a similar framework) to develop your web or even mobile applications, the question is do we really need to use a 100kb framework to power our work?

We would say, NO! But...

When using a framework like jQuery developing nice features is so easy mainly because we just used to it plus there are so many plugins and snippets available makes it a breeze to add some gimmicks. But we don't have too, pure javascript is actually not that hard and much much faster! Good help can be found on the Mozilla website. Here are a few example how to use pure Javascript or also known as Vanilla JS. ;)


type: 'POST',
url: '/my/url',
data: data


var request = new XMLHttpRequest();'POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');



type: 'GET',
url: '/my/url',
success: function(resp) {

error: function() {



var request = new XMLHttpRequest();'GET', '/my/url', true);

request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error

request.onerror = function() {
// There was a connection error of some sort





function fadeIn(el) { = 0;

var last = +new Date();
var tick = function() { = + (new Date() - last) / 400;
last = +new Date();

if ( < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)






jQuery = 'none';





if (el.classList)
el.className += ' ' + className;


Much more examples of how to use pure Javascript can be found on the website "you might not need jQuery".

It seems that you need much more code for achive the same with jQuery but actually it is less a lot less, because you don't need to include the jQuery library. The biggest advantage however is speed a lot of it!

javascript speed test

We already have started to use plain Javascript in our software however we still use a lot of jQuery. Our goal is to use pure Javascript whenever we can and in future releases remove jQuery completely when possible.

Which framework is your favourite?

Comment(s) (2)

  • Totally agree, have been worried about the bloat of established frameworks for a longtime and took the plunge a short while ago to develop without Jquery, Modernizer, Normalize et al... has been tougher as have had to re-invent some of my fav go to elements in pure JS but my sites are so much better for it.

    13.10.2015 0 Reply
  • avatar Steve
    Gene–≥ally I do not read post on blogs, but I wish to say that this write-up very compelled me to check out and do so! Your writing style has been amazed me.Thank you, very great article.
    24.01.2017 0 Reply

Hey, leave a comment...