Monday, November 26, 2007

The Helpers ... Part 2

Its been sometime. Work caught up (at last). I got to work on some interesting things which made me feel that the libraries that those site use( the Java Script ones) must be optimized for performance more than anything. If the JavaScript you use slows down the application, the library is useless. I continue with some of the other libraries, in the search for the perfect one ( or a hybrid).

Bajax : Bajax is a small and simple JavaScript library to put Ajax driven content in your pages. When I heard about this library, I went on to search for this. The library is maintained by the BerliOS group. I did not see any kind of documentation, so I had to get hold of the READ ME. The library turned out to be very minimal. Just some functions where by you could call a page with arguments, insert some html to elements, insert whole pages to elements and get html from elements. That is it. :)

Behaviour : This library is an interesting one. I have always wondered how nice it would have been if I could assign some characteristics to some elements according to their class names. Like I want all elements which are of class 'fancy Hover' to have a border outline when hovered on. In this case I would have to write the onMouseOver and OnMouseOut methods for each element. This would clutter my code and make the behaviour and structure tightly bounded. Behaviour comes to the rescue in this case. By writing small lines of code and registering a behaviour we could assign elements of certain classes (or even elements of certain ids) to certain methods on certain events. This works with libraries like script.aculo.us to provide some snazzy effects as well. Some examples also give you the usefulness of this library along with its interactions with other libraries. This library gives me the option of adding behaviours to a set of elements at the same time and that, I feel, is very powerful.

Moo.FX : The Mo.Fx library is a lightweight JavaScript effects library written using prototype. The library is just 3Kb !! Even the tag line given is 'Size does matter'. When I went through the library I was amazed at what such a small library could do. Net Vibes also uses Moo.FX I suppose and the site itself testifies the abilities of this library. It has many stuff that a typical Web 2.0 site may require (accordions, Effects, Tips, Groups, Drag and Drop .. ). I had earlier used Dojo as a library for my sample application, but the library was so vast that it stalled my application more than often. I guess Moo.FX gives you the right amount of stuff to get started with and build a nice website with all those great Effects and some CSS support. I also found the Hash.Cookie feature (used to store values like the co ordinates of a drag gable element) very useful ( at least for sites like net vibes). Theming with Assets.CSS, loading images dynamically with Assets.Images, Chain Events and make them execute in a periodic fashion, Ajax calling and updating along with periodic access to those calls, Effects such as morph, transitions, scroll, slide and various other elements styles ( say you wanted the background to change very slowly, you will create an Fx object, associate it with a certain set of elements, and call the effect with the start and end states to get the effect). It also has sorters (which I think are the highlight of scriptaculous). Now the main difference that I see with the tremendous Dojo library is the amount of additional widgets (like context pane, tab containers, pop ups etc) that Dojo has. These kind of stuff can be built using JavaScript along with some help from Moo.Fx and Scriptaculous, but the maintainability will be a crucial point I feel here. If these kinds of widgets are available (or made into a simple extended library), I feel Dojo will feel to have some sort of competition.

ByteFx : Its just another library which gives you an accordion, some effects and transitions. Nothing special (but I have not gone through the code).

wz_dragdrop : Now this library just has the plain old drag and drop features and some other features like re size, clone and some effects. This library has a limited number of features but is enough for some starter sites and applications.

SACK : Simple AJAX Code Kit is a small library used to facilitate AJAX calls. The file is small and the a demo comes along with the package. The routines to call when loading, loaded, complete etc could be specified just as we do in a normal AJAX call. The library just gives us a better organized way to do it.

OverLIB : A small JavaScript library if you want only tool tips to appear and nothing else !!!

Sarissa : This library is very interesting. Well the techie guys will know that httpxmlrequest gives you an XML file after access. Now if you were to traverse through this file (validate, find nodes etc), it would be great pain. Sarissa is here to facilitate this. Its the same as you use DOM parsers in Java. We create a DOM object then add/ delete/ traverse what we need using methods available. I like this in a way that I had used a lot of parsing for my previous project and became quite good at parsing and stuff (even used TagSoup parser to make valid XML documents out of Html documents). The library as such seems small, but the functionalities are very helpful. I would definitely use this library if any requirement comes into picture. Some tutorials and starting points are also given. We could use xpath type access to get the nodes and manipulate them by adding attributes and tags. The cross browser acceptability is great (MS XML crap for windows and other XML Http stuff) and library deals with it well. Xlst stylesheet manipulation is also possible. We could do something like update a part of the DOM using the updateContentFromURI method after applying a style sheet to the resultant XML request. This I think is particularly useful as we could maintain a same structure to the site with just having style sheets for different request results.

Nifty Corners : Typically when I see a Web 2.0 powered site, I see that the design is great. There are real nice Ajax features, some great Effects at the right places and finally wonderful CSS combinations. The so called 'rounded corners' for the DOM elements are just as important as anything to make the web site look good. I have tried my lot to get libraries coexist so that I could use one for my effects and one for the rounded corners. But I was not successful at all. Then I went on to do the CSS way and sticked to it. Now this is one of those libraries that I used. Now this library actually tricks the user by adding some blocks of code with a specific margin space so that it seems that the edge is rounded. It adds 4 bold tags on the top and bottom of the element( say div with a specific id), which has specific classes of its own (from a linked css file called niftyCorners.css ) , when the JavaScript function Rounded is called (nifty.js). Nice trick eh? Well CSS 3 has now specified techniques where by we could specify the radius of the corner of elements so that they are rounded when displayed. Mozilla FireFox ans Safari 3 have adopted this (IE as always sucks) and they look great !!!

Plex : This is a nice little JavaScript library for GUI. It has components like menubar, tabbar, contentpane, trees, grids and title windows. The library seems to be fast and lightweight. The style of writing the components is similar to Dojo ( xml like coding). It has some AJAX support (pulling data from a xml or yaml and feeding it to the data grid maybe) and uses it well. Custom functions could be triggered on events too. Cross Browser functionality is ensured by this JavaScript library. It is said that client side xslt loading is supported for IE and FireFox. Its documentation also says that the components could save their states in sessions and thus potentially solving the 'back button' problem. Worth a look but I would go for better alternatives. :)

No comments: