JavaScript Toolkits

April 28, 2006 - 3 minute read -

For much of the web's history JavaScript has been the domain of the web designer who was often not a skilled programmer. So JavaScript was often a messy endeavor and did not follow a lot of the tenets of good software development. What has been missed this whole time is that JavaScript is a really interesting and powerful language. It shares many things that I like so much about Ruby. It has closures and prototyping (the ability to add methods to Objects at runtime). It is a highly dynamic language that can do a lot.

The rising popularity of AJAX and rich-client web applications and the power that they can provide to offer very good user experience have led to interest by the hard-core development community. This interest has led to the development of a number of frameworks for client-side JavaScript development. These frameworks aim to handle the plumbing of JavaScript including handling the incompatibilities across various browsers. These toolkits lower the barrier of entry to building interesting, dynamic web applications.

Toolkits

Prototype

Ruby on Rails comes with a JavaScript toolkit called Prototype. Prototype has added a lot of Ruby-like constructs onto JavaScript that makes it a lot more natural to Ruby programmers to use. Adding onto Prototype is the Scriptaculous library. Scriptaculous adds interesting visual effects to the core Prototype toolkit.

While these are the toolkits of choice for Ruby on Rails, there is nothing that will prevent you from using them in any web application, no matter what the underlying server-side technology.

There is a great Prototype Reference available to get you started.

Dojo

Where Prototype is built like Ruby, Dojo is "just JavaScript". They do not try and change the core language in any way that is not natural JavaScript. They also have taken a very good software engineering perspective on the system including a suite of unit tests and a build system. Dojo has a complete AJAX abstraction, visual effects and a very cool event mechanism. Dojo also has the concept of Widgets that allows you to build reusable components. It seems like it has a lot of potential.

Tacos is a blending of the Dojo toolkit with the Tapestry framework allowing Tapestry to do AJAX.

Other Toolkits

Prototype and Dojo seem to be the most interesting toolkits to me, but there are a number of others available: MochiKit Yahoo! UI Toolkit Zimbra TrimJunction

Development Tools

Client side development has lacked many of the tools that serious developers are used to for "regular" development. This is probably one of the many reasons that hard-core programmers have snubbed their noses as client side development. Well, yet another excuse has been removed.

Syntax highlighting and code completion are available in a number of IDEs these days including Intellij IDEA and Eclipse.

There are interesting debugging tools for both Firefox and Internet Explorer that allow you to easily debug problems in each browser. In addition to the Javascript console in Firefox and Venkman some other handy tools are available.

Firebug is a really nice Firefox plugin. IE Script Debugger is available for the same task in Internet Explorer.

Other References

JavaScript Kit offers some really good documentation and tutorials. It includes some interesting in-depth discussion of some discussion of creating Object Oriented constructs in JavaScript.