A closer look at Vanilla JS

In a previous article I wrote about some of the advantages of using the native javascript language, often referred to as Vanilla JS.
Vanilla is a term used in many computing-related topics when a software is used in its original or basic form, without any customization or framework applied on top of it.

Most of the operations of the LiveBox Web Portal are performed by jQuery, since it has a great potential for accomplishing complex work in a handful of methods and comparatively few lines of code.
Nevertheless, heavier operations are performed considerably better with Vanilla JS. Long iterations, strings concatenations, whenever you need an optimization, a little Vanilla code can make the difference and prevent your browser tabs from crashing.
Being JavaScript based, jQuery quietly accepts hybrid code, so we can easily see Vanilla methods dealing with jQuery objects.
Yet you may need some jQuery-equivalent methods to handle the objects involved with Vanilla code.
At this point we have to take a look at the Web APIs of the Element interface, thanks to the Mozilla Developer Network (MDN), a precious resource to find what you’re looking for when dealing with Web languages.
Here is a short list of some simple jQuery-equivalent methods, where the dollar sign identifies a jQuery object, while the following line is the Vanilla equivalent form:

// Get an attribute
$(elem).attr('id')
elem.id

// Get the HTML content
$(elem).html()
elem.innerHTML

// Get the text contained
$(elem).text()
elem.textContent

// Go to the next sibling
$(elem).next()
elem.nextElementSibling

// Go to the previous sibling
$(elem).prev()
elem.previousElementSibling

// Get the children elements
$(elem).children()
elem.children

// Get the parent element
$(elem).parent()
elem.parentNode

// Check if the element has a specific class
$(elem).hasClass(className)
elem.classList.contains(className)

// Compare two elements
$(elem).is($(elem2))
elem === elem2

// Insert an element as first child of another (parent)
$(parent).prepend(elem)
parent.insertBefore(elem, parent.firstChild)

// Remove and element
$(elem).remove()
elem.parentNode.removeChild(elem)

// Set a CSS property
$(elem).css('padding-top', '20px')
elem.style.paddingTop = '20px'

Even without considering the complexity of the algorithm involved, handling Vanilla objects is a straightforward improvement: low effort (still the same amount of lines of code) yet a faster execution in all operations.
Moreover, if you only need to develop a small web application, including the entire jQuery library is probably overkill.

Further Improvements

Despite these early results, we can still achieve further improvements in terms of performance, but at the cost of writing more code and functions, therefore losing sight of all the ease of use of jQuery.
For example, this jsPerf test case has been created to show the difference between two ways of emptying an element.
The first one is the most obvious, it simply empties the innerHTML of the element:

element.innerHTML = '';

The second one is tricky, as it cycles and deletes each child of the element:

while(element.firstChild) {
	element.removeChild(element.firstChild);
}

I’d prefer to use only one statement instead of a while loop, but on the other hand the difference in performance you can observe is a sweet temptation: almost 200 times faster!
To keep the code readable and yielding to the temptation as well, we can wrap it with a function:

function empty(x){
	while(x.firstChild) {
		x.removeChild(x.firstChild);
	}
}

empty(element);

This may seem a return to the use of a framework: in fact we’re writing functions to manipulate DOM elements at a higher abstraction level. Yet, keeping functions so simple, the impact on performance is still unchanged.

Further Readings

If you’re interested in jQuery-equivalent Vanilla methods, take a look at these blog entries by Todd Motto, software engineer at Google.

Furthermore, Craig Buckler, Director of OptimalWorks Ltd, wrote a short series called Native JavaScript Equivalents of jQuery Methods.
In the first part he introduces a brief overview of the native JavaScript equivalent jQuery methods, discussing both DOM Selectors and Manipulators.
He is also clever in pointing out that HTML5 has many validation form functionalities, managing new input types (url, mail, date, number, patterns) that make most of the commonly used JS form validation checks unnecessary.

In the second part Craig gives various hints on Ajax requests and Events handling, also keeping in mind some differences between W3C standards and the IE6/7/8 events model.

If you want to use Vanilla to manipulate tables, then take a look at Thinking Inside The Box With Vanilla JavaScript.
The author, Louis Lazaris, is a freelance front-end developer and author on many web-dev blogs.

Lastly, youmightnotneedjquery.com is a useful resource of utility code (also hosted on a GitHub repository) bringing many examples of how we can avoid using jQuery while maintaining full compatibility with old browsers as IE8/9/10.

A closer look at Vanilla JS

Leave a Reply