Archive for the ‘Javascript’ Tag

Choosing a Javascript Framework

Javascript frameworks have come a long way since I started working with them around 4 years back. There are a lot of frameworks available out there now which provides developers the ability to fight the cross-browser problems and enable them to do work more efficiently.

Here are some points to keep in mind when deciding which Javascript framework to use for your project:

  • Active community: This is very essential as when you run into some problem with the framework, you need some place to post your problems or search for solutions posted on similar problems. For this, there needs to be an active community.
  • Project requirements: Does the framework provides most of the functionality that your project requires ? One more thing to keep in mind is that you should not choose a heavy framework when your requirements are very light. For example, if your project requires very small DOM manipulation and no features like autocomplete or datatable, then avoid using a very heavy framework like YUI.
  • Support A-Grade Browsers: More than 90% of people in the world use A-grade browsers to browse the internet. So it is essential that the framework support all these browsers.
  • Framework History: Is the framework mature ? Does it have a dedicated core team developing it ? How often are the fixes/updates released ?
  • Documentation: This is essential to cut back on the learning cycle. If the framework is well documented and has a decent set of examples, the it becomes easy to adopt.
  • Framework Extensibility: If the project requires a feature not provided by the framework, can you implement that feature by extending the framework ? This also forms a community of developers around the frameworks, who releases their extension for others to use.
  • API Syntax: You get to notice this after you start writing code using the framework.

Some of the frameworks which follow most of the points above:

  • JQuery: This is the best framework in my opinion. It is light, easy to learn and easy to extend. There are lot of plugins available for any functionality that you may require. It has got a good following with even Google using it.
  • Yahoo UI Library (YUI): This is also a very good framework which provide lot of read-to-use javascript components like data table, autocomplete, in-window popups (Panels), etc. I have written about some of the problems in this framework in a separate post here. It is being used by Yahoo themselves and LinkedIn.
  • Mootools: This is also a nice framework like jQuery, but I have not used it myself. Here is a review on it.
  • Dojo Toolkit: It is one of the oldest framework out there with lot of ready-to-use components like YUI. Only downside with Dojo has been its documentation.
  • Prototype: Prototype is a popular framework and one of the oldest like Dojo. I have used it initially just for its AJAX part, but it is more than that. There are lot of plugins available to extend its functionality. Development with prototype forces you to work in an object-oriented way by way of providing its own classes.

Overall, I will recommend everybody to explore jQuery for their project requirements. I have been using it very extensively in LifeMojo and will be writing about some of its good plugins in my next post.

YUI 2.5 Problems

Yahoo recently released the preview release of YUI 3.0. After reading the changes they are trying to make in the framework, I thought of the issues we have faced with the earlier version, YUI 2.5, while using it in our startup lifeMojo. Some of the issues are:

  • More HTTP Requests: JS files are split based on the functionality. This means that separate HTTP request will be made for each functionality of YUI that you use. We use lots of YUI features and our pages used to do 8-9 HTTP requests just to get the YUI files. We had to combine all those files manually into a single file to improve the performance.
  • Even if you want to use a very small subset of some YUI component, you have to get the whole component. This increases the page size and thus performance can get affected.
  • Long Names: Usage of all components of YUI starts with something like YAHOO.lang. or YAHOO.widget., etc. In Javascript, you try to avoid long names of components which are used frequently so that the size is small, for example, Prototype and jQuery, both use $ as the main variable name to access the components. But, the long names in YUI increases your page size (There are ways to get over it like declaring a small name variable as the shorthand: var YL = YAHOO.lang)
  • No Powerful Selector: YUI does not support the widely used CSS based selector idiom made famous by jQuery. We have to use jQuery along with YUI to get these nice feature.

Apart from the problems above, YUI 2.5 is quite good. It saves you a lot from the cross-browser issues and provides ready-to-use components like DataTable, Calendar, Panels, etc.

YUI 3 promises to solve a lot of the above problems. I would love to use it once they release the beta version with lot more components (due probably in December).