Thursday, August 23, 2012

Choosing a Javascript Library - jQuery vs YUI3

Back in 2006, I started tinkering with the YUI javascript library and set out to build a one page UI framework that I could use to build data-driven web applications.  I was inspired by how well Yahoo Mail was able to mimic certain qualities of a desktop mail client and decided that it was time to move away from page-to-page navigation with some AJAX enhancements to a one-page approach with all dynamic DOM manipulations to create that desktop feel.  I looked at several Javascript libraries that normalized AJAX and DOM access/manipulation but ultimately decide that YUI had what I needed plus some nice basic widgets to build around.

Fast-forward several years and YUI 2 is now EOL and being replaced by YUI 3.  As I've now written a lot of code with the YUI 2 library and various other enhancements of my own,  it was time to re-evaluate what I wanted to do based on my prior experience.  For several years now, I've been monitoring the maturity of the jQuery library - both in breadth of functionality and the community of developers - and am impressed by its approach and growth.

Its lightweight and does not force you into any predefined framework pattern.  The core library has just the right amount of functionality to effectively work with the DOM, handle events, and manage AJAX requests.  With the addition of jQuery UI, you get the foundation necessary to build highly dynamic web sites using best practices to extend jQuery with complex, stateful widgets.  Adding the third-party developed jQueryMX library adds further rigor to your application design with a well thought out set of MVC base classes and functionality.

You will find many similarities between YUI 3 and jQuery.  Both libraries have very similar methods to select DOM elements, iterate over those collections, bind events, and manage AJAX connections.  YUI 3 also establishes a widget design pattern and MVC base classes out-of-the-box.  YUI 3 is clearly influenced by jQuery's approach.  The original methods present in YUI 2 are basically gone replaced by a much more desirable set of methods for working with the DOM.

I see two major differences between jQuery and YUI 3:

  1. YUI 3 seems to be attempting to be a complete Javascript based framework with well defined patterns for constructing widgets and wiring them together to interact with the user.  The jQuery library does not attempt to assume what type of application you're building or dictate how you should build that application.  Instead, it provides the basics and then allows you or others to build on that foundation (the addition of jQuery UI does add some formal patterns to widget development - its clear that some order is needed to establish good behaviors).

  2. jQuery seems to have a much larger contributing community.  On GitHub, jQuery has 2091 forks and 16,350 watchers while YUI 3 has 399 forks and 1892 watchers.  YUI 3 does have a Gallery which contains community contributed enhancements which must be approved by the YUI Team.  jQuery also has a plugin site (or did - as of this time its being redesigned) but does not require approval (you will have to follow some guidelines to get published).

Ultimately, I've decided that I want a library that establishes a basic framework to extend it without too many assumptions about how that should happen and has a large community building enhancements to extend it.  However, everyone has a different problem to solve and a different approach to solving that problem.  Use you're own judgement to assess and pick what will work best for your project.