A little bit of MicroJS

First published: Read time: 6 mins

Recently there was a flurry of talk around a little something called MicroJS, mainly thanks to a website of the same name created by Thomas Fuchs, author of the script.aculo.us user interface library. I’m not sure if Thomas coined the term “MicroJS” or if it’s been in use for a while, but it describes the micro-framework methodology perfectly. So what is a micro-framework? The best way to answer that is to first ask what is a JavaScript framework?

JavaScript frameworks have been around since around 2005 (looking at the Prototype and jQuery history); their purpose is to allow developers to easily add interactivity to a page by creating a JavaScript abstraction layer to build from. The library takes care of any cross browser issues and quirks, allowing developers to focus on the “cool” stuff, building websites. As a developer I can’t thank all the library authors enough; without them my working life would be so much more stressful (and my hair would be even grayer than it is now!).

Once you know what a JavaScript framework is, it doesn’t take a genius to guess what a micro-framework is. Where as a full framework will have many tools (methods) a developer can use, a micro-framework only focuses on a very specific set of functions. I like the knife analogy: a full-framework like Dojo would be a Swiss Army knife where as a micro-framework could be considered a small pen knife. So which do you use in a project? This completely depends on the project in hand. I’ve put together a small list of pros and cons for each (let me know if you have any others):

Full Framework

  • Pros
  • Extensive set of features to cater for most eventualities.
  • Consistent API across features.
  • Large user base with lots of community support.
  • Huge number of working examples available.
  • Many developers to fix bugs and add additional functionality.

  • Single point of reference of documentation.

  • Cons
  • Large code base could be very daunting to new users.
  • Large page footprint.
  • Many features of the library may not be needed.

Micro-Framework

  • Pros
  • Small page weight, usually less than 5K.
  • Small set of features so very quick to pick up and use.
  • Main focus on a very specific set of functionality.
  • No feature creep or excess code.

  • Use the right tool for the right job.

  • Cons
  • Small number of developers, bugs and issues may take a while to be fixed.
  • Development of the framework may stop completely.
  • May be very little support from the author and the community.
  • Fellow developers in your team may not be familiar with the framework.
  • Mixing micro-frameworks could conflict if badly coded.
  • Multiple frameworks could mean multiple HTTP requests.
  • Multiple points of reference for API docs.
  • Multiple frameworks could lead to an overlap in functionality.

Many of the cons for micro-frameworks stem from using more than one at a time, but if you only plan on using one then they can be ignored.

Micro-frameworks caught my eye recently due to a couple of small projects I’d been working on. The projects all used vanilla JavaScript as there was no need for a helper library. I later realised I needed to attach a few events and manipulate the DOM but I wanted to avoid including jQuery in the project as I only needed a small fraction of its functionality. Luckily the MicroJS website came to the rescue.

The examples below are taken from Query, Bonzo, Events.js and Bean. As you can see the usage for each is pretty self-explanatory with lots more functionality is available from each library’s website. If you’re a jQuery user the syntax will look very familiar.

CSS selector and DOM utility

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
Query - Dustin Diaz
https://github.com/ded/qwery
CSS selector engine
*/
query("#myid");
query(".myclass");
query("#myid .myclass div a");
query("a, div, strong");

/*
Query Paired with Bonzo - Dustin Diaz
https://github.com/ded/bonzo
DOM utility
*/
query("#myid").show();
query(".myclass").offset(50, 100);
query("#myid .myclass div a").addClass("anchorClass");
query("a, div, strong").remove();

Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/*
Events.js - James Brumond
https://github.com/kbjr/Events.js
Event handler library
*/
Events.bind(window, 'load', function(e) {
    //Page loaded, do something
});
//Invoke the page load event
Events.invoke(window, 'load');
//Mouse click event
Events.bind(selectedElements, 'click', function(e) {
    //Mouse has been clicked
});
//Very handy keystroke event
Events.bind(document, 'keystroke.Ctrl+Shift+Alt+S', function(e) {
    saveMySlices();
});

/*
Bean - Dustin Diaz
https://github.com/fat/bean
Event handler library
*/
bean.add(selectedElements, 'click', function (e) {
    //Mouse has been clicked
});
//DOM has loaded
bean.add(document, 'DOMContentLoaded', function(e){
    //Page loaded, do something
});
//Invoke an event on an element
bean.fire(selectedElement, 'click');
//Remove the event from an element
bean.remove(selectedElement, 'click');

I’ll be trying out a few more of these micro-frameworks for my personal projects in the future as the ability to select only the functionality you need really appeals to me. Are there any other micro-frameworks you’ve used that you’d recommend? Leave me a comment and I’ll check them out.

Update: It just so happens that a handy library website has emerged inspired by the MicroJS website called EveryJS. The website lists all library’s rather than just micro versions. Not all are listed but I’m sure they will be added soon so it’s one to keep your eye on.

Webmentions