Skip to main content Skip to secondary navigation Accessibility Feedback

Building your own vanilla JS framework

I’ve started dropping jQuery in favor of vanilla JavaScript. It’s resulted in some pretty dramatic performance improvements.

There are two things I’ve done to make writing scripts easier:

  1. I use progressive enhancement. Modern browsers and IE 9 and up get the enhanced, interactive features. Older, less capable browsers get a simpler, content-only experience. This allows me to take advantage of modern API’s.
  2. I include my own vanilla JS micro-framework to handle some of the repetitive, boring stuff.

Today, I want to show you how to create your own micro-framework for your vanilla JavaScript projects.

Psst... I just launched a new guide to ditching jQuery for vanilla JS. Buy it today and save 25%! →

JavaScript Micro-Frameworks #

So what exactly is a micro-framework?

jQuery is a framework that makes a whole bunch of common tasks easier. Because it does a lot of things, it’s pretty big (the minified version weighs in at 93kb). And because of all the abstraction it does, it’s also a lot slower.

Micro-frameworks are like super tiny versions of jQuery. They’re lightweight, focused and fast. By writing your own, you can include only what you need and nothing that you don’t.

What goes in a micro-framework? #

What you include in your micro-framework will vary by project.

Every project I’ve done so far has include some simple class handlers – functions to add, remove and toggle classes, as well as check to see if an object has a class in the first place. For Drop, my simple dropdown menu script, I used a function to get all siblings of an object.

You can find an assortment of mini helper functions on Microjs, StackOverflow, and GitHub.

Update on August 26, 2013 – Check out Buoy, the simple micro-library I’m now using with all my projects.

A micro-framework in action #

Let’s say I wanted to check to see if an element has the .sandwich class. If it does, we’ll remove it. If it doesn’t, we’ll add.

In my JavaScript file, I’ll put my micro-framework helper functions up at the top:

// Check if an element has a class
var hasClass = function (elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
 
// Add a class to an element
var addClass = function (elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
 
// Remove a class from an element
var removeClass = function (elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
 
// Toggle a class on an element
var toggleClass = function (elem, className) {
    if ( hasClass(elem, className) ) {
        removeClass(elem, className);
    }
    else {
        addClass(elem, className);
    }
}

Then use them in my code:

var turkeySandwich = document.querySelector('#turkey');
toggleClass(turkeySandwich, 'sandwich');

Total file size? About 1kb.

Getting Started #

Ready to get started? Here’s where to find useful scripts and functions:

Slightly less useful than the others, but I’ve started adding the scripts and helper functions I use on GitHub as well.

If you liked this article, you might also like Ditching jQuery, my new beginner's guide to vanilla JavaScript. Buy it today and save 25%! →

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get the Weekly Digest