Tuesday, November 6, 2007

The Widget Way !!!

I am a great fan of the Web 2.0 way of rendering its pages. The special effects, the sliding of windows, the drag and drop, the dynamic tabs, the user persona and the speed and effectiveness of the website. The feed capabilities and the user interaction get these sites up and running and as a result we see over a million users using these sites. I was asked to evaluate two of the best sites which have one of the best interfaces I have seen (Not forgetting those sites with huge flash content which makes the loading extremely slow and makes me want to close even before it opens up). I am talking about Netvibes and iGoogle. I will be talking about them and will try to compare them both as a user and as a developer. I will start as a user and then gradually go into becoming some what of a developer.

Both the interfaces are great. They are a treat to watch and in functionality they are the same. The guy who ever thought of the idea of having bulk data from all those pages you browse into one single page must have some imagination. The widget concept is the root here and the interaction between the widgets (drag and drop) is very fast. But I like the Netvibes interface better. They have many of the gadget and we could even add our own custom code (html) to make certain widgets. I feel Netvibes uses those nifty AJAX functionalities the most. Even when I need to choose another widget to add, iGoogle transfers me to another page and then it lets me add it. But with Netvibes I add it right from my own screen using the javascript libraries that it uses. Netvibes has more themes and stuff and those combinations are deadly. The time it takes to load is kind of the same. Netvibes even has the facilities where by you could add widgets or tabs. You could also go to 'Universes' (branded pages with widgets) and explore them.

Netvibes even has a search facility where by you could search within the widgets you added for a term. The search results loads up in the tabs (after filtering) and once you close the search it comes back to normal (and that too in very high speeds). Adding of feeds (xml or opml) is simple in Netvibes and iGoogle. Netvibes gives us a more of a view of the description as a tool tip where as iGoogle gives it as a clickable show all image. Of course Google has a Single Sign On facility and they have much more pages which have buttons telling you to add the content to your iGoogle, but for the sheer look and feel I will go with Netvibes.

Both these cool sites having tabbing facilities available (the AJAX way). These tabs are loaded when required and not before. The tabs Netvibes provide have more functionalities for the user (adding it to the tabs list, adding an icon to the tab and other stuff). Application could also be configured in individual tabs (I have the whole meebo application in one tab) for Netvibes. Although this is just adding the page url to the widget content, its effective. The one thing that I saw different for iGoogle is that the tabs could have its own look and feel. I don't see this as a shortcoming for Netvibes but as a special feature for iGoogle.

Now the developers view. Netvibes uses moo.fx for its neat Javascript features where as iGoogle uses its own libraries along with yui. The architectural basis is the same. They have a main frame for each widget and a unique id for the widget( may be a global variable in Javascript). They keep on incrementing this for each widget so that they have a unique id in that page. The widget is a combination of divs, spans, images and iframes. The main widget frame will have a header frame which holds the header information for the widget and the content which holds the iframe which has all the contents. This gives us the additional advantage that the widget content could be a stand alone application having its own logic and still be embedded inside the widget as the container is an iframe. The buttons you see (add to iGoogle and stuff) adds this content url to the base site (after you log in) and then you get to see the application inside an iframe.

The drag and drop are all from the moo.fx library (Netvibes). Alternatively they could also have used script.aculo.us for their effects. They have pretty good tabs facilities which I guess script.aculo.us does not have ready made. I guess the code that iGoogle uses may be python based ( I honestly dont know ) but have not sure what Netvibes uses.

The reason for my sudden interest (or may I say incidental) is that I was trying to mimic this feature in a my own site. Now I used script.aculo.us and the base was set up within 6 hours using Ruby On Rails. ROR has great support for those AJAX and Javascript features that script.aculo.us provides and I really dont need to write a single line of code. Aptana IDE is the IDE of my choice when it comes to Ruby On Rails. The auto complete feature is not complete in this IDE but it's better than nothing. There are tons of libraries that I intend to use (tags, ferret and other plugins) and I am looking through these stuff as of now. Hope I will end up a better developer with this !!!

No comments: