
The first time I used jQuery on a website was June 2007; I used it for an image carousel that faded between sponsor logos. During the rest of 2007 and 2008 I used jQuery, MooTools and Prototype.js until settling on jQuery for everything in 2009. And I’ve been using jQuery on every site since. Until now.
I just finished working on a small site that doesn’t use jQuery or any JavaScript library at all. I’ve been wanting to do this for a while, inspired by Remy Sharp’s article “I know jQuery, now what?” and through a desire to cut out those 34-80 extra kb of downloads on mobile connections.
It turned out to be quite a fun exercise.
The site was a one page parallax scrolling marketing page that isn’t heavy on JavaScript; but it was a good way to get my feet wet. I assumed I’d have to think more about the JavaScript I was writing to do the things that jQuery made so easy for me and I had a concern that I’d be put off doing something just because the convenience had gone. And in practice, this just wasn’t the case.
Initially I wrote the JS with jQuery as I would normally because it’s become natural and it’s fast. And I used a couple of plugins; my favorite jQuery plugin, jquery.ba-throttle-debounce and a plugin to type text, typed.js.
First step was to write out those plugins with native JavaScript. Any FE devs who have worked with me know that I don’t like jQuery plugins. Often they don’t quite do what you want them to do or you end up being limited by the plugin functionality. I prefer to write my own and then I know what they do and can add new features as needed. I tend to only use plugins that do one simple thing that is boring to write myself or plugins that do something thats incredibly complex or time consuming to write and test myself, for example: Matteo Spinelli’s iScroll plugin.
I was using jquery.ba-throttle-debounce to fire a custom resize event when the browser had stopped being resized. Something like:
$(window).on("resize",$.debounce(250,function(){
$.event.trigger({
type: "browser_resized"
});
}));
Which, without that plugin and without jQuery, you can rewrite as:
var resize_timer;
window.addEventListener('resize', function(event){
clearTimeout(resize_timer);
resize_timer = setTimeout(function(){
if (window.CustomEvent) {
var event = new CustomEvent("resized", {detail: {}});
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent("resized", true, true, {});
}
document.dispatchEvent(event);
},250);
});
OK so a few more lines than before, but nothing major. Essentially each resize event clears the timeout and so stops the function in the timeout from running. When the browser is no longer being resized, the function is allowed to run 250 milliseconds later. The function then sets up and event and dispatches it. All stuff I read on You Might Not Need jQuery and all done in the same time it would have taken me to look those things up on the jQuery API docs.
As for writing out typed.js; all I needed was basic typing, no backspacing, no multiple sentences and I wanted my effect to be faster than what the plugin allowed. So I wrote a quick helper:
a17.Helpers.typewrite = function(el,text) {
var text_array_length = text.split("").length,
current_char = 0;
function typechar() {
current_char++;
el.textContent = text.substring(0,current_char);
if (current_char < text_array_length) {
setTimeout(function(){
typechar();
},(randomNum(30,70)));
}
}
function randomNum(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
typechar();
};
Into it you pass a DOM node, found using querySelectorAll in my case, and a sentence to type out. Every 30-70 milliseconds it adds a new character to the element by updating the textContent. The range of 30-70 was to give a more natural feeling to when the characters appear rather than a uniform speed, as no one types at a uniform speed (an idea stolenborrowed from the source code of typed.js).
After the plugins I took to looking at the rest of my JavaScript, which was concerned with triggering functions and adding classes when the browser was at certain scroll positions. Again You Might Not Need jQuery to the rescue. Some quick updates to a bunch of $(".foo").addClass("bar");
to be el.classList.add("bar");
and write some quick helpers to replace jQuery’s offset()
function and make sure I didn’t use any each
instead of for
loops.
And the file size savings?
Uncompressed JavaScript, with jQuery and plugins: 201kb
Compressed JavaScript, with jQuery and plugins: 118kb
Compressed and gzipped JavaScript, with jQuery and plugins: 40kb
And then after re-writing to remove jQuery:
Uncompressed JavaScript: 48kb
Compressed JavaScript: 23kb
Compressed and gzipped JavaScript: 7kb
Some massive drops in filesize. Also, gzip is clearly brilliant and magical in the way it works. These reduction in sizes could very well be the difference between a mobile user on a cellular connection using the site or getting bored waiting for it to load and leaving it. It may even be small enough to include inline in the page at the bottom and not have that extra HTTP request.
One problem with the way I did this was my brain was always thinking: “how do I do this jQuery thing without jQuery”. Over the last 8 years the jQuery API has become pretty ingrained in my mind; but I’m hoping its a habit I can break and instead start to memorise proper JavaScript functions as I have jQuery ones. My next JavaScript fiddles without jQuery will be to re-write the slider JavaScript that I’ve used on countless AREA 17 projects over the years, which I originally ported from a MooTools version written for AOL’s Asylum blog in 2007.
I’m quite looking forward to it.
So, this is a nice thought, and I have also been trying to minimize the use of bulky libraries; but I feel having or not having a jquery is not a concern when area17 doesn’t seem to have a mobile website at all
@io – though its true AREA 17’s website isn’t currently responsive in any way, the majority of builds in the last 18 months and those currently in build are responsive (or adaptive). Check out http://www.facebookstories.com for a good example.
I have always been a friend of “do it yourself”.
While I am learning Javascript just by doing and failing, I do not like those libraries very much even if they can be very helpful and save time.
I always want to know whats going on behind the curtains and I rather like doing it myself, because it gives me the feeling of understanding it.
It’s like cooking, isn’t it?
There are people who want to cook by themselves, knowing whats in the meal and knowing it is good… and other people who just want to heat up a can of ravioli, knowing it will fix the problem of being hungry.
I like what you are doing here, chef. :-)
Actually I started to write this comment, because I had a question on your
resize-timer-recepy.While writing I did some research and solved the problem by myself. So what’s left is my compliment to you. ;-)