Vanilla Javascript

Vanilla Javascript

Web Stuff 30.09.2015 4574

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

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

Request

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

 },
 error: function() {

 }
});

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

FadeIn

$(el).fadeIn();

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

Hide

$(el).hide();

el.style.display = 'none';

AddClass

$(el).addClass(className);

if (el.classList)
 el.classList.add(className);
else
 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!

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?