Migrating jQuery to Pure JS

And Reducing the Size of Convert Case by 75%

This is something a bit different to my usual travel posts and finally satisfies the code part of the Travel & Code name, so if you’re just here for travel, I won’t be offended if you stop reading now!

Today I launched a new version of my popular case converter tool called Convert Case. If you visit the site, it’ll look exactly the same as it did yesterday and you’ll notice no differences which is exactly what I intended. What I have done is reduced the already tiny size of the site by 75%, ensuring lightning fast loading even on the patchiest of connections. Here’s the story of how I did it.

For those of you not in the know of web development, back in the early 2000’s and before there was a problem caused by different browsers offering slightly different ways of doing the same things with JavaScript, the language which allows you to add interactivity to a site. You had to write different code for different browsers and it was a big headache with lots of incompatibilities and undocumented bugs . In 2006, jQuery came along and provided a library which standardised the differences and allowed you to write browser-agnostic code using CSS selectors which quickened up development time and it is now the most widely used JavaScript framework on the web.

12 years later, browsers have improved massively and you can usually write code and it’ll “just work” in any modern browser. No more hacks for IE6 or having to deal with the peculiarities of different layout engines. Of course we have more to think about with responsive web design, but this is nothing compared to the hell of Internet Explorer which thankfully is dying a slow terrible death.

In terms of Convert Case, I could well have left it running with jQuery as it was all working fine, but I decided to test my knowledge and by removing it I reduced the size of the site from approximately 42kb to 12kb (gzipped and without ads/analytics). In general most sites are usually multiple megabytes in size, so with this reduction it must make Convert Case one of the smallest and fastest sites on the web.

The process of removing jQuery was fairly straightforward and here are a few of the common things I had to change to make it all work:

$(document).ready

This is the event that gets fired when the DOM is fully loaded and ready for manipulation. Usually most code is found within this function to ensure it works correctly after everything is loaded. It’s quite a simple change:

$(document).ready(function() {
	// do something
});

to:

document.addEventListener("DOMContentLoaded", function() {
	// do something
});

ID Selectors

The basis of jQuery is selecting elements in order to manipulate them in some way. This fairly simple piece of code takes an element with an ID and makes it visible:

$('#idselector').show();

With pure JS, use the document.getElementById selector:

document.getElementById('idselector').style.display = 'block';

jQuery like CSS selectors

One of the main advantages of jQuery is you can use CSS selectors which greatly simplifies selecting elements hidden deep in the DOM tree:

$('section.main p').hide();

Most modern browsers now allow you to use document.querySelector instead:

document.querySelector('section.main p').style.display = 'none';

This will however only select the first matching element, but if you want to loop over multiple element with the same selector, use:

var elements = document.querySelectorAll('section.main p');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.display = 'none';
}

Event Listeners

These are a core part of any site to allow it to react to user actions such as clicks, key presses, scrolling, etc. This is an example of a simple click event:

$('.share a').click(function(e) {
	e.preventDefault();
	// do something
	return false;
});

Again, you can use document.querySelector if you only have one matching element and if you need to add an event to multiple elements, use:

var elements = document.querySelectorAll('.share a');
for (var i = 0; i < elements.length; i++) {
	elements[i].addEventListener('click', function(e) {
		e.preventDefault();
		// do something
		return false;
	});
}

Using a combination of all these, I was quickly and easily able to remove the jQuery dependency from the Convert Case site. I’m always looking to improve the site, so every little helps and it should even help save some bandwidth as I approach 1 million view per month!

Published on June 29, 2018 in Code, Tips by Jason and tagged with , , , , , , .

1 Comment

What do you think?