GeekZilla

Comparing ATLAS and Dojo (part 1)

This is a first article in a series comparing some of the functionality of ATLAS with another popular AJAX framework called Dojo. Both frameworks have some powerfull components and there is a high degree of overlap.

This first article is a straight comparision of the Dojo TitlePane and the ATLAS CollapsiblePanel components. Both components provide client side presentation of a content area with a title/header switch which allows the user to hide/unhide the content.

First thing to note is ease of use.

Despite the intelisense help in VS2005 it is still much easier to add the Dojo component. Once you have some bolier plate .js includes/definitions and register the TitlePane the code to add the functionality is trivial:

<div dojotype="TitlePane" label="Label 1" labelnodeclass="label" containernodeclass="content">
    Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis,
    nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu
    ut augue. 
</div>

Compare this to the ATLAS code, which still has some boiler plate to add the ATLAS ScriptManager:

<asp:Panel ID="panelTitle3" runat="server">
    <asp:Button ID="linkButton3" runat="server" CssClass="label" Text="Label 3" />
    <asp:Panel ID="collapsedPanel3" Height="0" runat="server">
        Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis,
        nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu
        ut augue. 
    </asp:Panel>
    <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender3" runat="server">
        <cc1:CollapsiblePanelProperties SuppressPostBack="true" CollapsedText="Label 3"
          ExpandControlID="linkButton3" CollapseControlID="linkButton3" ExpandDirection="Vertical" 
          Collapsed="true" CollapsedSize="0" AutoExpand="false" ExpandedText="Label 3"      
          TargetControlID="collapsedPanel3" TextLabelID="Label3" />
     </cc1:CollapsiblePanelExtender>
</asp:Panel>

With ATLAS you have to link the behaviour (extender) to a control, the asp:Button. You will notice also that it works by having a panel containing the collapsing area inside another panel.

Code wise it looks much more complex, however, this is mainly due to the additional properties and control you have around the collapsing area. For staters ATLAS supports horizontal and vertical collapsing. Also you can set the hide/unhide switch to be almost any other asp control. Documentation is currently thin on the ground for the Dojo control but it appears to create the switch area as a link or as a static text placeholder.

So if you just want a simple collapsing area Dojo fits the bill. If you need much more control or different behaviour use ATLAS.

I built two pages, one based on Dojo and one on ATLAS. Both used the same elements where possible, .css for instance. Both had three collapsible panels.

For a simplistic performance test I ran a proxy and monitored GET request/response times and found the following results:

I ran Dojo with debug=true so some additional scripts were downloaded but this seems fair based on the beta basis of both frameworks. The initial Dojo page and scripts come in at a hefty 229204 bytes. The ATLAS page weighs in at 90392.

So the basic performance results favour Dojo after the initial page request.

Trying to come to some conclusion of this comparison is difficult. At the moment both frameworks are beta so not production strength. I would have to say depending on your WEB 2.0 efforts you might chose either.

If you are trying to introduce some AJAX into an existing application then Dojo TitlePane is easier. If you are starting from scratch then you have greater range of function with ATLAS CollapsiblePanel. Choose the one which best suits your needs.

Author Mark Page

Mark is trying not to drink too much 'cool aid' at the moment. All the more for everyone else!

Comments

Add Comment

Latest Articles