Javascript Toolkits: Prototype Versus Dojo
Tuesday, August 8th, 2006
If you deal a lot with writing Javascript in web pages, you'll often find yourself writing a lot of common methods over and over again, or creating a basic toolkit for yourself that contains a lot of utilities you like to use. I end up writing a trim() method for getting rid of spaces before and after strings, cross-browser methods for getting browser dimensions and elements on the page, and utilities for making Ajax calls that works on all major browsers.
That all stopped once a couple of interesting toolkiits came into play: the Prototype Javascript Framework and the Dojo Toolkit.
Both toolkits are libraries for Javascript that help in building applications. Both serve to take a lot of the fuss of dealing with different browsers away from the developer and both provide a pretty interesting set of widgets you can use in your code to make some pretty interfaces. So which one is better?
It all boils down to personal preference, really, but after using both frameworks I definitely prefer Dojo over Prototype. Before I get into the reason I like Dojo so much more, let me briefly describe both libraries.
Prototype
Prototype is very lightweight and is used in the excellect effects library script.aculo.us, written by Thomas Fuchs. There are also some pretty good widgets written with Prototype called Rico. Script.aculo.us and prototype are built into the popular framework Ruby on Rails, and in fact if you use Prototype you'll find that your Javascript code starts to look a lot like Ruby code.
One of the most used and well-known feature of Prototype is the $() function. Imagine that you are wanting to get a reference to a certain element in the DOM in order to see what its value is. Normally, you'd do something like this:
The $() method is shorthand for the document.getElementById part with some added benefits. You can get the element by doing this:
If you want to get multiple elements, you could do this:
Then elements would contain an array of references to your element, something the standard document.getElementById() cannot do. There is also another method, $F(), which is like the $() method, but instead of returning the element itself, it returns the value of the element, making life very easy.
If you want to see more, I recommend looking at Particletree's Quick Guide to Prototype, and the Prototype documentation.
Dojo
If Prototype is a lightweight Javascript library, then Dojo is a heavyweight tool. Dojo has a wide variety of tools available, all seperated by different namespaces that can be dynamically loaded whenever you need them. This has the benefit of not cluttering the main namespace like Prototype does, so you don't have to worry about the library stepping on your own functions.
To use Dojo, you unpack the downloaded zip file to a web-accessible directory, and include a script tag pointing to dojo.js:
Then to include a specific package, do the following:
That includes the package dojo.widget.DropdownDatePicker, which is obviously the widget for displaying a dropdown date picker.
(BTW--Dojo has an equivalent to $(), dojo.byId(), and if you want an array you can do dojo.byIdArray().)
In addition to general language utilities, Dojo provides tools for dealing with all sorts of things. Events, math, cryptography, persistence of data via Dojo Storage (yes--client side storage via Javascript! woohoo!), and a really nice system for creating your own widgets.
The base widgets provided with Dojo are pretty nice, too. On their homepage there is a "see it in action" link that has a list of demos for all their widgets, and also has a few sample applications. Very neat stuff if you ask me. If you can't tell, I particularly like the date picker widget, which can show up in a dropdown like this:
While there is a lot more to Dojo and it is criticized as being "heavier" than Prototype, the fact that there is no namespace pollution, heirarchical package management, abundant pre-written utilities, and a comprehensive set of existing widgets makes it a clear winner in my book. If you want to see more, check out the Dojo manual.
That all stopped once a couple of interesting toolkiits came into play: the Prototype Javascript Framework and the Dojo Toolkit.
Both toolkits are libraries for Javascript that help in building applications. Both serve to take a lot of the fuss of dealing with different browsers away from the developer and both provide a pretty interesting set of widgets you can use in your code to make some pretty interfaces. So which one is better?
It all boils down to personal preference, really, but after using both frameworks I definitely prefer Dojo over Prototype. Before I get into the reason I like Dojo so much more, let me briefly describe both libraries.
Prototype
Prototype is very lightweight and is used in the excellect effects library script.aculo.us, written by Thomas Fuchs. There are also some pretty good widgets written with Prototype called Rico. Script.aculo.us and prototype are built into the popular framework Ruby on Rails, and in fact if you use Prototype you'll find that your Javascript code starts to look a lot like Ruby code.
One of the most used and well-known feature of Prototype is the $() function. Imagine that you are wanting to get a reference to a certain element in the DOM in order to see what its value is. Normally, you'd do something like this:
var myElement = document.getElementById("myElementId"); The $() method is shorthand for the document.getElementById part with some added benefits. You can get the element by doing this:
var myElement = $("myElementId");If you want to get multiple elements, you could do this:
var elements = $("element1", "element2", "element3");Then elements would contain an array of references to your element, something the standard document.getElementById() cannot do. There is also another method, $F(), which is like the $() method, but instead of returning the element itself, it returns the value of the element, making life very easy.
If you want to see more, I recommend looking at Particletree's Quick Guide to Prototype, and the Prototype documentation.
Dojo
If Prototype is a lightweight Javascript library, then Dojo is a heavyweight tool. Dojo has a wide variety of tools available, all seperated by different namespaces that can be dynamically loaded whenever you need them. This has the benefit of not cluttering the main namespace like Prototype does, so you don't have to worry about the library stepping on your own functions.
To use Dojo, you unpack the downloaded zip file to a web-accessible directory, and include a script tag pointing to dojo.js:
<script type="text/javascript" src="/dojo/dojo.js"></script>
Then to include a specific package, do the following:
<script type="text/javascript">
dojo.require("dojo.widget.DropdownDatePicker");
</script>
That includes the package dojo.widget.DropdownDatePicker, which is obviously the widget for displaying a dropdown date picker.
(BTW--Dojo has an equivalent to $(), dojo.byId(), and if you want an array you can do dojo.byIdArray().)
In addition to general language utilities, Dojo provides tools for dealing with all sorts of things. Events, math, cryptography, persistence of data via Dojo Storage (yes--client side storage via Javascript! woohoo!), and a really nice system for creating your own widgets.
The base widgets provided with Dojo are pretty nice, too. On their homepage there is a "see it in action" link that has a list of demos for all their widgets, and also has a few sample applications. Very neat stuff if you ask me. If you can't tell, I particularly like the date picker widget, which can show up in a dropdown like this:
While there is a lot more to Dojo and it is criticized as being "heavier" than Prototype, the fact that there is no namespace pollution, heirarchical package management, abundant pre-written utilities, and a comprehensive set of existing widgets makes it a clear winner in my book. If you want to see more, check out the Dojo manual.