Thursday, November 8, 2007

The Helpers ... Part 1

Its just not that I tend to understand the wide world of the JavaScript libraries that are present (both as GPL and Commercial). I just wanted a comparison (need to browse to find out about these libraries and Stumble and Google helped me a lot with this). But why do we need these so called libraries? Of course we could manipulate the DOM using the native methods that JavaScript has and make our own js files. This would be in effect reinventing the wheel (just what we people who are trying to develop do not want). If somebody has done something good and effective, why not understand it, take a lesson from it and try to wrap something additional over it? Thats what these people (who have actually made these libraries ) have done. I will have some comparisons here (some of those libraries that i felt good using as a user and coding as a developer). So here we go ...

Prototype 1.6.0 : Its a library ( that is now used by many other libraries ) that facilitates the DOM access via JavaScript and the AJAX functionality. When I look at the documentation of this library, it reminds me of ruby. The syntax is similar and the constructs and more or less the same. The Class constructs are similar to Ruby's and there are mix ins too !! It concentrates on its Class structure where by you create Objects which is extend able. It has some utility methods by which you could access DOM elements ( say $ can be used for access elements with a specific id $('id') ). It has AJAX methods like updater (update contents according to the response), request ( give a request), responder ( set or unset certain listeners ), periodic updater (periodically call and update the element). Element object manipulations are present and there are many methods which facilitate the manipulation. Enumeration is another feature that is very strong with prototype. It allows enumerations (just as the each, collect methods in Ruby) and allows manipulations (anonymous pieces of code ) to be done on it. There are neat Event handlers in this library that can be used to track the events that happen on a particular event. The major methods that is used here is the observe, element and stop. It even kills the Microsoft IE memory leak problem. This is what Douglas Crockford has to say. This library has Form methods as well to get those form tags. For and AJAX call say we use Form.serilalize method to get the input fields and their corresponding values as url arguements. The bind concept ( It go me sometime to come into terms with this concept ) and its relief given by prototype by the Function helper. Insertion of html content after, before, top or btton of any element ( say a commenter .. ) is also done. A periodicalexecuter which is useful to say update a cricket score !! The Position utility which is used by libraries like script.aculo.us to position elements. Templates which can be used to substitute strings and stuff. It supports JSON too.

RICO 2.0 : A Open Source JavaScript library which has many AJAX powered features along with some great effects and components. It is also based on prototype. The effects are all things I see in the normal libraries. The ones which impressed me the most is the components features. It has such smooth UI features which closely resemble those Rich Internet Application created by Adobe Flex and Open Lazlo. The Live Grid and Accordion are two things that made me interested. This example shows how the Live Grid was used and it feels like its Flex. The weather example given in their webs site closely imitates the one originally developed in Open Lazlo ( which incidentally is one of my favorites ). In their site it has been tested for IE and Firefox and that the Drag and Drop feature does not work in Safari. Even the AJAX features does wok for Safari 2.0.3. Along with giving those Drag and Drop facilities it also provides some styling effects like rounding off the div so that it will not have sharp edges. Multiple objects may be updated as a part of the AJAX requests with RICO. This is one site which I found RICO to work very well. It provides the look and feel of a Flex application and runs faster that a Flex one ( Although this site loaded very slow for me. Dunno why !! ). Here is where I came across XOOPS as well ( Content Management System written in PHP and useful for social websites and corporate sites) and i will be exploring this in the near future. This Live Grid tutorial gives you a fair idea of what and how to do that access thing. The best part about this is that the Live Grid widget if connected to some database could be made to populate when the user scrolls the grid. This is an excellent feature and leads to better performance. There are tons of examples in this page and I suggest if interested view it.

MochiKit 1.4 - as they say it makes JavaScript suck a little bit less. Mochikit is a JavaScript library which stands alone. The primary contributor Bob Ippolito says that the library has taken the coding standards from python, objective-C etc. It has many cool features like logging, manipulating DOM elements, visual effects ( taken from script.aculo.us ), asynchronous server communication, functional programming, CSS manipulation, iteration and so on. The listening mechanism can be made use of (thought those concepts need some getting used to ) to make excellent Web 2.0 sites. Multiple elements could be configured to listen to a response ( say a JavaScript Array response could be traversed using evalJSON, and could initiate other Asynchronous calls to the server) and this is done through the slot/ signal technique that it uses. This article gives you an excellent insight into the core features that this library has. Turbo Gears is another framework built in python that uses this library. I am yet to go through this and try it out !! The main site has example where a sortable table is populated with contents using Asynchronous requests in both the xml and JSON format. It has both a development version and deployment version. The main categories are Async (asynchronous access), Base (Functional Programming stuff like map and filter and comparators), DOM ( create DOM elements like Tables to be inserted into nodes ), Drag and Drop, Color, DateTime, Format (those string operations go here ), Iterators ( some high end iterators), Log and Logging Pane ( the great logging features that this library has ), Selector ( access to the CSS elements using $$ ), Signal ( add event listener), Style ( style manipulation ), Sortable ( sortable drag and drop lists just as in script.aculo.us ), Visual ( visual effects like rounding of edges, fade, toggle etc). As it is python oriented I found this library hard to grasp though.

Dojo 1.0 : Dojo is a wonderful library that has great features and is preferred by most developers. Django and Web Works have integrated Dojo with their bundle asserting this fact. The biggest plus point that I see with Dojo is its wdiget construction helpers and components. I went through some of the docs that they have and was immediately impressed. They have widgets like Text Boxes, Check Boxes, Date Pickers etc which when associated with a theme will work as in a Rich Internet Application. It is said that the DOM level access is not that much but the UI features are awesome. A demo mail application and a Fish Eye Application are given in their site. When the package is downloaded, we also get a demo page which highlights all the UI features of Dojo. The cross browser features ( accessibility of DOM level 3 inside IE ) has been very tactically done by Dojo thus making event handling excellent. It gives the essential validations, tool tips, accordions, split panes, dividers, In place editors and whole lots of features. After looking at this one I feel I have wasted a lot of time with other libraries when I had a superb one right under my nose. After I went through the documents, I used it in my dummy application and to tell the least, the application rocks now !!

to be continued ..

No comments: