Channels ▼

Web Development

AJAX: Selecting the Framework that Fits

Source Code Accompanies This Article. Download It Now.

Compare Ease of Development

Throughout the process of building and testing the prototypes using each AJAX framework, we got a good understanding of how to work with each framework and the strengths and weaknesses of each.

Overall, Dojo provides more features and HTML widgets than YUI and Prototype. However, Dojo's widget customization requires some effort. Each widget requires one or more JavaScript files and possibly an HTML template file, images, and a stylesheet. Styles are somewhat tied to the JavaScript and HTML templates. If the template to build the widget is different from the design you were given, it may take some time to customize it. This happened to us when we used the HTML TabContainer widget. None of our Java developers are good at the stylesheet, and we had to turn to our graphic designer to change the default style for the widget to suit our needs. This isn't an issue with YUI or Prototype because their styles are separated from the dynamic behavior of the hub.

As developers, we were also concerned about ease-of-use with each AJAX framework. This is related to how well each framework is documented, whether there are examples that we can quickly try, and how easy it is to understand the source code. All three of our demos stretched our JavaScript expertise. JavaScript knowledge is an important consideration for teams starting their first AJAX implementation.

We took a look at the source code of each framework and felt that YUI is easier to understand because of its well-documented code and detailed tutorials from the Yahoo website. At the time of this development project, both Dojo and Prototype lacked complete documentation and we had to try to build our own prototypes. In the end, YUI stands out as the easiest to work with.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.