First and second thoughts, jQuery, YUI and charting
Aug 11, 2009I usually work on middle-tier and back-end software and on one particular project I’ve taken a bit of flack for neglecting the front-end. A current project is an end-to-end rewrite of an existing system so I’ve been experimenting with browser-based data-driven user-interfaces, particularly charting. It’s a good time to work on these things, the variety and quality of toolkits (and browsers) has advanced in the five years since I last looked. Coming from a bad-old-days raw Javascript and DHTML background, I like that these libraries just work.
Before I get into the libraries, I should mention two other invaluable open source tools: Douglas Crockford’s JSLint, a code quality tool, and Firebug, a javascript debugger for Firefox. All I can say is, “Thanks!” These saved me hours.
I started with JQuery, the JQuery UI and Flot, a pure Javascript plotting library for JQuery. In two partial days I had a working demo. The JQuery API is light, slightly sparse but very convenient. I appreciate that I can incorporate as much or as little of its techniques as I need. I’m not sure if I like or hate the style of chaining calls, I found myself rewriting my chained code in order to debug it. The JQuery UI is trivial to use, easily themed and mostly works out of the box but the interfaces are inconsistent, probably owing to it’s being a collection of plugins from different authors. The charting library Flot is, in a word, great. I love the API, the rendering and the zooming but I’m disappointed that the handling of tick labels is just barely adequate and that they can not be rotated. It also requires the Explorer Canvas to render in IE6 but I chalk that up to Microsoft’s features trailing the other browser. Documentation associated with the projects range from average for the core down to “read the source” for some plugins but examples are short, plentiful and easily adapted.
The YUI, the Yahoo User Interface library has a different feel. It’s more structured and has very well thought out utility abstractions and copious amounts of documentation. The data and connection utilities are very nice. It comes with a set of widgets and styles but they feel more like a building material compared to the prefab construction of JQuery UI. It is modular but much larger than JQuery, though it also does much more. Considerably more code is necessary to get things working and some widgets have annoying interactions with my existing styles and layouts. The documentation doesn’t show the same method for working with a control twice and the demo coding style is inconsistent in places. The flash-based charting library is very good and works as expected on IE6 without resorting to a canvas plugin but lacks zooming and is considered “beta”. All told, I spent three full days learning the APIs and porting the existing demo, one of those just reworking my existing layout and css to fit the YUI grid model. The payoff is that I improved my code by adopting some of the Yahoo style and they’ve evidently put serious effort into cross-browser consistency.