A little bit of MicroJS

Matt — Sun, 29 May 2011 18:12:10 +0000

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.

Looking for a new CMS for small websites

Matt — Thu, 15 Jul 2010 09:16:16 +0000

Recently I’ve been looking at other small CMS solutions for future projects. For a while now I’ve been using Frog CMS; unfortunately development seems to have stopped which is a shame. At the weekend I stumbled across quite a major security concern with Frog involving a Cross-site request forgery (CSRF). Using Google it is even possible to find ready to be used scripts (which I won’t link to here). Being hacked using CSRF is unlikely to happen as it requires a user who regularly uses the site to click on a rogue link, but even so it’s quite concerning.

Now I could keep using Wolf CMS (which is a variation on Frog) but my thoughts are why keep all your eggs in one basket. If Frog is vulnerable then its likely that Wolf will be too. So time to look about for a new small CMS.

The CMS will be used for very small websites (5 – 20 pages) where MODx, Drupal and WordPress are just overkill; It gets updated regularly and is based on PHP / MySQL. I’ve been having a search and have found a few that look really promising:

Textpattern

Very clean looking CMS (love the typography on its homepage… not that it matters) and having tried the demo I can see the admin interface is simple to use and all the features are easy to find. I think the admin area needs a little work in terms of design, but the comments on Opensourcecms all seem to be very positive so I’ll definatly be installing it locally and having a closer look.

A flexible, elegant and easy-to-use CMS. We shall see!

Concrete5

Another interesting CMS, the video on the homepage makes it look like some sort of action movie, maybe a little over the top but whatever. I was unable to find a live demo of the CMS unfortunately, but the screencasts from the video looked very promising. There’s also an option of Concrete5 hosting the CMS, which removes the (sometimes) tricky setup process; great for non-technical people.

Dramatic homepage video, but how well does it work? Live demo please!

CMS Made Simple

Of the new CMS’ I’ve looked at CMS Made Simple is my favorite. The live demo looked good with a very intuitive administrator area. Some of the comments on Opensourcecms were quite negative; so I’ll have to do some testing of the installation and template system before I commit to building a live site with it.

Some negative comments but it looks very promising.

For my next small project I’ll be using one of these small CMS’, but which one will it be? When i decide I’ll be sure to update you. Got any other suggestions? Why not leave a comment.