Gaia compared to ASP.NET Ajax

Most of you have probably heard about Microsoft's Ajax initiative; ASP.NET Ajax. While Gaia is 100% compatible with ASP.NET Ajax it is really more of an alternative and a competitor to ASP.NET Ajax than a "plugin" or "extension" to it.

We have just done a comparison between ASP.NET Ajax and Gaia Ajax Widgets in the amount of code needed to write a small web-page containing one Ajax Button and one Ajax TextBox. All though we knew from before that Gaia would seriously outperform ASP.NET Ajax due to its code model, the results was stunning even for us.

The criteria of the web-page was that the Ajax Button was only supposed to be enabled if there existed some text within the Ajax TextBox. If there existed no Text inside the TextBox the Button was supposed to be disabled! This doesn't sound so difficult and we tried to create this functionality in first Gaia Ajax Widgets and then in ASP.NET Ajax.

The Gaia Ajax Widgets code (7 lines of code)

This is the code needed to do this in Gaia Ajax Widgets.

As you can see there's 7 lines of code in this sample.

The ASP.NET Ajax code (105 lines of code)

This is the ASP.NET Ajax result of delivering the same functionality. As you can see we had to create an extension control in ASP.NET Ajax to be able to do this.

The C# files

using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using AjaxControlToolkit;
public partial class _Default : System.Web.UI.Page {
}

[assembly: System.Web.UI.WebResource("DisableButton.DisableButtonBehavior.js", "text/javascript")]

namespace DisableButton {
    class DisableButtonDesigner : AjaxControlToolkit.Design.ExtenderControlBaseDesigner<DisableButtonExtender> {
    }

[Designer(typeof(DisableButtonDesigner))]
    [ClientScriptResource("DisableButton.DisableButtonBehavior", "DisableButton.DisableButtonBehavior.js")]
    [TargetControlType(typeof(TextBox))]
    public class DisableButtonExtender : ExtenderControlBase {
        [DefaultValue("")]
        [ExtenderControlProperty]
        [IDReferenceProperty(typeof(Button))]
        public string TargetButtonID {
            get {
                return GetPropertyValue("TargetButtonID", "");
            }
            set {
                SetPropertyValue("TargetButtonID", value);
            }
        }

[ExtenderControlProperty]
        public string DisabledText {
            get {
                return GetPropertyValue("DisabledText", "");
            }
            set {
                SetPropertyValue("DisabledText", value);
            }
        }
    }
}

The JavaScript file

Type.registerNamespace('DisableButton');

DisableButton.DisableButtonBehavior = function(element) {
    DisableButton.DisableButtonBehavior.initializeBase(this, [element]);
    this._TargetButtonID = null;
    this._DisabledTextValue = null;
    this._changeHandler = null;
}

DisableButton.DisableButtonBehavior.prototype = {
    initialize : function() {
        DisableButton.DisableButtonBehavior.callBaseMethod(this, 'initialize');
        this._changeHandler = Function.createDelegate(this, this._onchange);
        $addHandler(this.get_element(), 'change', this._changeHandler);
        this._onchange();
    },

dispose : function() {
        if (this._changeHandler) {
            $removeHandler(this.get_element(),'change', this._changeHandler);
            this._changeHandler = null;
        }
        DisableButton.DisableButtonBehavior.callBaseMethod(this, 'dispose');
    },

_onchange : function() {
        var e = $get(this._TargetButtonID);
        
        if (e) {
            var disabled = ("" == this.get_element().value);
            this._oldState = e.disabled;
            e.disabled = disabled;
            if (this._DisabledTextValue) {
                if (disabled) {
                    if (!this._oldState)
                        this._oldValue = e.value;
                    e.value = this._DisabledTextValue;
                } else {
                    if (this._oldValue) {
                        e.value = this._oldValue;
                    }
                }
            }
        }
    },

get_DisabledText : function() {
        return this._DisabledTextValue;
    },

set_DisabledText : function(value) {
        this._DisabledTextValue = value;
    },

get_TargetButtonID : function() {
        return this._TargetButtonID;
    },

set_TargetButtonID : function(value) {
        this._TargetButtonID = value;
    }
}

DisableButton.DisableButtonBehavior.registerClass('DisableButton.DisableButtonBehavior', AjaxControlToolkit.BehaviorBase);

Conclusion

We have tried to be as neutral as possible in this comparison but it was really difficult to find a neutral piece of code to compare against since most things possible in Gaia Ajax Widgets is in fact impossible in ASP.NET Ajax.

In addition to what you see here, the ASP.NET Ajax example had to use two project files, it had to add up a Web.Config file containing more than 50 lines of code and it had to use 2 programming languages!

Also the .aspx files for both tests where roughly the same size, the ASP.NET Ajax .aspx file was 40 lines of markup and the Gaia .aspx file was 35 lines of code. So if you run pure math on this and don't count in the fact that the ASP.NET Ajax sample needed two different programming languages and that the Web.Config for the ASP.NET Ajax example had to be modified a lot with some pretty advanced settings Gaia Ajax Widgets is almost 95% more effective than ASP.NET Ajax. At least when it comes to the amount of lines of code needed to deliver the same functionality.

After all it's not for nothing we say; Code Less, Create More!