JavaScript frameworks – concept vs. code libraries

Personally, I’ve never been a fan of huge JavaScript libraries, an opinion that was probably clear from what I wrote in my EJ – The only JavaScript library you’ll ever need post. Even if they’re written by very competent web developers, they almost always consist of more functions and methods that are necessary.

However, I’d like to take this opportunity to explain the important difference between the two major types of JavaScript libraries: concept and code libraries.

The distinction between those two is something I learned from an interview with Dean Edwards (Dean is the Yoda of JavaScript while I’m still at the Young Grasshopper stage… :-)), and from that point it was crystal clear. Let me give you my take of what they mean:

Code library

A code library consists of lots of different methods for making JavaScript programming easier. There might be functions to cover up for various web browser flaws, offer shorthand functions for more advanced actions and so on. Important to know is that most of these functions are exclusive, meaning that they don’t depend on each other. In my experience, these libraries grow very fast and suddenly they include a multitude of functions that, on their own, might be very useful, but together they form a library which is packed with functions where very few web developers actually have any use for all them.

And in this time of trying to decrease bandwidth usage and making web developing and the code as tight as possible, I seldom think a good starting point is with a huge library. Instead, start building, and then only add the vital functions you need.

Concept library

A concept library, as opposed to code libraries, consist of functions that are all dependent on each other. Most of the time, they also have a certain goal for their usage: for instance, a slideshow library, a way to offer nice tooltips etc. What I prefer about concept libraries is that everything they contain is necessary for them to work well, and every function is optimized for its specific usage.

Concept libraries by me

I have developed some concept libraries that might be very useful, if you have a need for that certain effect or interaction. In some cases, they might save you a lot of work, and in others you shouldn’t use them unless you have a strong need for their specific features. Personally, I use them a lot in situations where I find them applicable, and to me, at least, they have been of very great usage.

AJAX-S: AJAX-Slides
A library to create slideshow presentations in HTML. The difference from presentations like S5 is that it offers yet one more level of separation: the content is stored in XML files and parsed through XSLT.
ASK: AJAX Source Kit
Used to implement AJAX functionality in a completely unobtrusive and accessible manner. It also offers support for important usability issues, like the behavior of the back and the forward button in the web browser, history handling, and being able to bookmark a certain state of a web page after dynamic content updates has been performed through AJAX calls.
ELO: Encapsulated Load Object
Targeting the main issue with the window.onload event, not being able to apply JavaScript events until every image and other included dependency has loaded; instead, ELO gives you a way to immediately run scripts as soon as the DOM itself (i.e., the HTML code) has finished loading.
FaT: Focus at This
The idea of FaT was to easily add those extra fancy effects to a web page that everyone likes: fading elements in and out, lightbox effects where only one part of the page light up while the rest is dimmed out, etc.
GLT: Good-Looking Tooltips
Something that can give a nice feeling when using a web site, is showing good looking tooltips that you can control yourself how long they should be shown and if they should fade in and/or out. Uses the existing title attributes on HTML elements, so no extra coding in the HTML code is needed.
JaS: JavaScript Slides
Basically, JaS is a way to create a nice image slideshow feature in a web page, with automatic thumbnail creation and presentation, keyboard navigation support and, of course, fading of images.

5 Comments

  • Stijn says:

    You know what we actually need? A javascript library generator 😀 You could tick the boxes with the functionality you need, and a library with all relevant functions is generated. No more 80<abbr title="KiloBytes">KB</abbr> libraries for just <code>$()</code>!

    *dreams on*

  • Matt Round says:

    I think part of the problem with discussions about JavaScript libraries is that people are using them for a wide variety of things.

    For example, if I was building a highly-interactive JavaScript-based web application, perhaps working with other developers, I'd probably happily opt for YUI and benefit from tried and tested building blocks, documentation, etc.

    On the other hand, when I'm creating a web site with just a few interactive touches, it makes far more sense to keep things simple and lightweight, picking and choosing a few code snippets to use. If sites are built as if they're applications they become unpleasantly bloated.

  • @Stijn: I've actually been thinking about this for a while. To save and document every reusable piece of code I've written and create a nice interface that lets you add and delete building blocks. You could even save relations between functions to alert developers that the function they picked depends on some other piece of code.

    It would make a nice wiki-style project I guess.

  • Robert Nyman says:

    Stijn, Harmen,

    Interesting idea! Maybe, one day… 🙂

    Matt,

    Oh, absolutely. In my experience, though, even if it is a web site with lots of JavaScripts, or even something application-like, as long as you have an experienced JavaScript web developer onboard, it’s better to write the code yourself.

    The up-side of having someone in the team who actually wrote the code, not to mention owning all the code if that’s an issue, is almost always priceless.

    Steve,

    In my opinion, Prototype is definitely a code library. moofx is more like a hybrid; as far as I know, not all functions are dependant on each other, but some do. But not to mention, the whole thing still depends on a code library, so I’d say that in my book, it rules it out as a concept library.

    And if you’re a javascript grasshopper, I must be a wriggling pupae! 🙂

    Aw, thanks! 🙂
    However, I’m sure you know a thing or two as well!

  • Interesting, I've not heard the term code and concept libraries before.

    So would prototype be a code library and moofx a concept library built upon it? Still not sure I understand.

    And if you're a javascript grasshopper, I must be a wriggling pupae! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *