Vanilla Javascript

Web Stuff
30.09.2015
779

vanilla-js jquery javascript

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. ;)

AJAX Post

$.ajax({
type: 'POST',
url: '/my/url',
data: data
});

jQuery

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

IE8+

Request

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

},
error: function() {

}
});

jQuery

var request = new XMLHttpRequest();
request.open('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
};
request.send();

IE9+

FadeIn

$(el).fadeIn();

jQuery

function fadeIn(el) {
el.style.opacity = 0;

var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();

if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};

tick();
}

fadeIn(el);

IE9+

Hide

$(el).hide();

jQuery

el.style.display = 'none';

IE8+

AddClass

$(el).addClass(className);

jQuery

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

IE8+

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.

What framework is your favourite?


Comment(s) (1)

  • 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

Hey, leave a comment...