Saturday, March 04, 2006

JavaScript Frameworks

There are many frameworks to make working with web pages (via JavaScript) easier. All of them work cross browser, do events (window load, element click etc) and basic manipulation (get element, modify css, hide/show/move), but some do more than others. Syntax often differs between them.

Choosing one to work with depends on what you want to do, and how much code you are willing to write yourself (sometimes it is more satisfying to figure out a solution to a problem yourself, rather than to rely on someone else's code). Like with any code, the more it does, the bigger the download for the client. So it may be best to go with the most minimal solution (no extra features you won't use).

Here is a basic overview of what is available (that I know of)

Prototype

http://prototype.conio.net/

There is a useful reference for this at Prototype Dissected. As you can see from it, Prototype has quite a lot of features.

Very widely used and quite a reasonably big file (approx 46kb). There are several other projects based on it.

  • Ruby On Rails - open source web development framework, based on the Ruby language.
  • script.aculo.us - a library (approx 100kb) for adding visual effects (animation, fade), drag and drop and more to your web pages.
  • Rico - an Ajax library (approx 90kb) built on Prototype. Behaviour - this uses CSS style selectors to attach events to elements in your page.
  • moo.fx - a lightweight (3kb / 6kb with extra effects) alternative to script.aculo.us. Also, as an option, you can use a cutdown version of Prototype (3kb)

jQuery

http://jquery.com/

A relative newcomer onto the scene. Very lightweight and easy to use. < 15kb compressed. Basic features include: DOM traversing and modification, iteration, events, style and effects. Plugins are easy to write and there is currently an Ajax one available. Example code (adds a line break after all labels, and adds a border around the associated element):

var break = document.createElement("br");
$(window).bind("load",function()
{
 $("label").after(break).each(htmlFor);
});
function htmlFor()
{
 $(this.htmlFor).css("border","1px solid #000");
}

Dojo

http://dojotoolkit.org/

Animation, Widgets, Events, Ajax and more. It includes a rich text editor widget, which just requires some extra html markup. However, to make best use of it, extra attributes need to be added, meaning that it will not validate. It can be applied to div's, but then there would be an issue if the client has JavaScript disabled, so it is better if textarea's are used instead. Other widgets include a DatePicker, TimePicker, Menu, ContextMenu and ToolBar. It has a package system which means you don't have to include extra markup (it is dynamically loaded). Better suited when you know the client has enough bandwidth (i.e. not on dial up). There are several build available:

  • AJAX
  • I/O (XmlHttp)
  • Event + I/O
  • Widgets
  • The "Kitchen Sink" (all packages)

There is a good Dojo tutorial available: Dojo Done Quick, which covers coverting your own code to use the Dojo events and widget systems.

Yahoo! User Interface Library

http://developer.yahoo.net/yui/

One of the most well known companies that are doing a free toolkit for working with JavaScript. Already outlined its features before: Yahoo! User Interface Library and Design Pattern Library

Atlas

http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

Microsoft is working on Atlas, mainly targetted at ASP.NET developers, but hopefully will work with any server side solution. No download link that I can find, so at the moment, the Yahoo one is the most 'mainstream' (company known for other things) solution.

Conclusion

These should be seen as enhancements to your web page. You should still have a fallback to server side processing. Otherwise your site is not accessible. Get the basics done first, then work on the client to improve the experience and reduce hits to you web server.


Tags: , ,

1 comment:

Gizmo said...
This comment has been removed by a blog administrator.