2014-09-02

The death of YUI and what I feel it reveals about the future of JavaScript libraries

Yahoo announced last Friday that they are stopping all new development on YUI, what does this say about JavaScript libraries and their future?

Last Friday Yahoo announced that they were sunsetting YUI, the JavaScript/CSS library that they use to develop the majority of their properties (Flickr, the Yahoo homepage, Mail, Finance etc.).

Is this surprising? A little, the last release of YUI was early June, although their blog has been quiet from June 16th it's not entirely unusual for the YUI blog to go quiet for short periods of time. Yahoos employees must also have invested countless hours developing and gaining expertise in YUI, quite a commitment considering that jQuery eclipsed others a long time ago as the goto JavaScript library.

The appeal of YUI for a company like Yahoo is quite obvious, it allowed them to standardise build procedures and code amongst their properties whilst also attracting good JavaScript developers and making a good name for themselves amongst the web development community. There are doubtless other benefits too.

Obviously development has ended as these benefits are now outweighted with negatives, YUI tried to be an all ecompassing library (somewhat like jQuery and jQuery UI rolled into one), which has some benefits, but also means you've got a much larger and more integrated codebase to maintain. YUI utilised quite a nice modular system, so this may not be as much of a problem as I'm making it out to be (I honestly don't have enough experience or knowledge with YUI to come to that conclusion) but I get the impression the size of the codebase played a role in this decision.

JavaScript libraries today are expected to be fast, modular, and actively developed. The popularity of mobile devices (which process JavaScript more slowly owing to their mostly different CPU architecture) and the recent trend of utilising front end JavaScript over backend code has only exacebated these three requirements; JavaScript performance has become an important part of development. YUI wasn't really any of these things, it tried to do too much (therefore lacking true modularity) performed more poorly than jQuery, in my opinion Yahoo also seem to have underinvested in the library (a lot of components are still marked as in beta status) which is unfortunate but has been a running theme throughout the companies existance.

The question is, have all encompassing libraries like YUI and jQuery now outlived their usefullness? They were initally created to make it easier to develop JavaScript with a common syntax accross browsers with varying levels of support for common JavaScript functions (anyone remember IE6? I know I try to forget about it too ...)

Those days are now almost over, as Yahoo themselves pointed out in their post:

browser vendors are now committed to making continuous improvements to their web browsers while aligning more closely with standards

Ask yourself this, is it really more difficult to write:

var highlightParas = document.querySelectorAll(".test");
for(var i = 0; i < highlightParas.length; i++) {
    highlightParas[i].classList.add("highlight");
}
As opposed to: var highlightParas = $(".test");
highlightParas.addClass("highlight");
Or even (breaking out some YUI code here): YUI().use('node', function (Y) {
    var highlightParas = Y.all(".test");
    highlightParas.addClass("highlight");
});

Granted, needing to parse through the result of document.querySelectorAll(".test") isn't that nice, but it would be possible to get around this by creating a foreach function or some such like.

(for anybody wanting to see the above in action, I've created a fiddle of the pure JavaScript code)

The point I'm trying to make though, is that a lot of the things jQuery was intended for (e.g. simple DOM manipulation, and animation) are now possible with the likes of new JavaScript features and HTML5/CSS3, for example, adding/removing class names from an element used to be a real pain in JavaScript, now you can do utilising classList like so:

var element = document.getElementById("foo");
element.classList.add("test");
element.classList.remove("bad-class");
element.classList.toggle("state-class");

Not only is this faster than jQuery/YUI, I'd also argue it's nicer as code, say for example you're coding in an IDE and you want to manipulate the class of an element but you don't know what function to use, just type myElement.classList. and you're IDE should come up with the available functions for you, it also seems a nicer seperation than having every function mapped to $ or Y.

I doubt jQuery will go away anytime soon, it's incredibly widely used, and undeniably still makes our lives a bit easier (even if that amount is getting ever smaller with time IMO). I just hope we can get to a point with JavaScript such that libraries like jQuery are largely unecessary, not only would this benefit end users, but I think it would also make our lives easier long term too!

Linkedin Stackoverflow GitHub

About Me

I'm a web developer (mostly Front end) currently working at Studio 24 (I previously worked for an Essex based company called Intelligent Penguin).

I spend a fair amount of time messing around on the web, I'm reasonably active on Stackoverflow (link above) and I've been known to tweet occasionally.

I started this site primarily as a blog, I find it useful to write about what I learn and that's what I intend to do (hopefully my ramblings are useful to someone)!