Skip to main content 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.

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.