Microsoft Only Ajax Application

I completed a project using an entirely Microsoft solution: ASP.NET 2.0, ASP.NET Ajax 1.0, and the Ajax Control Toolkit (2007-09-20 release).

Lesson #1: Update panels are slow

Originally, for client/server communications, our project used an update panel. Due to the nature of the dynamic data, the resultant HTML could be rather large. In this model, the user would fill out an initial form, then we would use that data to make various backend requests in an update panel, then the server would populate the update panel. The problem was that this sequence would take on the order of 2 minutes. Regardless of how cool, animated, and asynchronous your application is, 2 minutes is about 1:50 too long – at least. We optimized to use a Javascript templating system, some smart innerHTML use, and ASP.NET Ajax ScriptMethods, we were able to reduce that 2 minutes to about 8 seconds. (And we reduced the Ajax response size from 800kb to 240kb.)

Lesson #2: ScriptMethods are really cool

ScriptMethods are amazingly easy to use, and create some very clean code. For example, let’s say you have a server side method that takes an object as a parameter, and returns some business objects. You can call that method, on the client side in Javascript, and it just works behind the scenes. ASP.NET Ajax creates Javascript proxy classes so you can construct the object you pass as a parameter to the server side method and creates Javascript proxy classes for the the data types used in the method’s return value. It also:

• transparently serializes the parameter object to JSON
• deserialized it on the server so your server side .NET code (C#, most likely) has no idea it is dealing with an object originally written in Javascript
• serializes the responses to JSON
• then deserializes the responses back to a Javascript object so your Javascript code “just works.”

The simplicity is rather elegant. You don’t write any proxy classes nor any XMLRPC request.

Lesson #3: Microsoft’s Ajax Control Toolkit is seriously lacking in documentation

If you want to do something simple, like create a “To Do” list application, ACT may be the tool for you, and it has the documentation so you can do it. But, we have tons of animated elements on our page, many of them similar to, but not exactly like, those found in the ACT. For example, we needed a collapsible panel that collapsed/expanded with a slightly different animation. To do that, we needed to copy the code, do a find/replace on the original control name with the new name, then use the new control. Not exactly simple, but not brain surgery either. The problem is – what happens when MS fixes a bug, or otherwise updates, the collapsible panel control? We’ve forked! And now we’re in maintenance trouble.

Googling reveals very few results, and very little code. MS’s site has very little documentation – and it is almost all about using the controls on the server side (using the ASP.NET ASPX-style) in very simple scenarios. Therefore, if you want to create an ACT control on the fly in Javascript on your client… welcome to reverse engineering land! We used Firebug, IE Developer Toolbar, and some guessing to figure out how to accomplish what we wanted to accomplish.

For example, if you want to use a ACT control in Javascript, but do not have it on your ASPX page, you need to run this code:

protected void Page_Load(object sender, EventArgs e)
    {
        #region add js and css for extenders used in javascript but not in aspx
        List<scriptreference> scriptReferences=new List</scriptreference><scriptreference>();
        foreach (Control c in new Control[] { new SliderExtender(), new HoverMenuExtender(), new TabContainer() })
        {
            scriptReferences.AddRange(ScriptObjectBuilder.GetScriptReferences(c.GetType()));
            Page.Controls.Add(c);
            ScriptObjectBuilder.RegisterCssReferences(c);
            Page.Controls.Remove(c);
        }
        foreach (ScriptReference scriptReference in scriptReferences)
        {
            ScriptManager1.Scripts.Add(scriptReference);
        }
        #endregion
}
</scriptreference>

You won’t find that documented anywhere. Nor will you find it on Google. That’s all guess and check, and some serious object exploring.

Lesson #4: Microsoft in the name does not mean Microsoft supported

And finally, let’s say you have an issue. You think to yourself… this is Microsoft! I can pay them lots of money (say $259 per phone call) and they’ll put me in contact with someone who will address my issue. We came across a bug, and did just that. MS’s response: ACT is not a supported product – it is only community supported. The client chose ACT because it was an MS product, and they didn’t want to use other toolkits (such as MooTools, prototype/scriptaculous, or Jquery) because they were community supported (aka, no one to blame if it all hits the fan). With MS saying that they don’t support ACT, we’re left with the same type of support (community based) as the alternatives, but with a smaller, less active community, and far less documentation, than we would otherwise have with another toolkit.

Lesson #5: MS’s CSS/Javascript development tools are HORRIBLE

IE Developer Toolbar <<<<< Firebug. That’s all I have to say.

Lesson #6: Release Mode

Optimize code for release mode. When deploying, in web.config, set debug=false, and in the project properties, set it to release mode. This will cause the Javascript to be optimized (comments/line breaks removed), the .NET code to be optimized, and a lot of runtime checks to be skipped (like ACT’s famously expensive “ValidateParams” call).

Another neat performance thing you can do is use the ToolkitScriptManager with script combining. This will reduce the payload to the browser. And finally, you can use the ACT Javascript comment stripper on your own Javascript.

To get comment stripping to work on your own Javascript, first get script combining to work. Then add JavascriptCommentStripper.dll, Tools.dll, and Tools.netmodule to your project’s Bin directory. And now open your project file (.csproj) in a text editor, and add these lines:

<usingtask taskname="AjaxControlToolkit.JavaScriptCommentStripperTask" assemblyfile="$(MSBuildProjectDirectory)\Bin\JavaScriptCommentStripper.dll">
<propertygroup>
    <compiledependson>
      StripJavaScriptComments;
      $(CompileDependsOn)
    </compiledependson>
</propertygroup>
  <target name="StripJavaScriptComments" condition=" '$(ConfigurationName)'=='Release' ">
    <createitem include="@(ManifestNonResxWithNoCultureOnDisk)" condition="'%(Extension)'=='.js'">
      <output taskparameter="Include" itemname="EmbeddedJavaScriptSourceFiles">
    </output>
    <javascriptcommentstrippertask sourcefiles="@(EmbeddedJavaScriptSourceFiles)" destinationfiles="@(EmbeddedJavaScriptSourceFiles)">
  </javascriptcommentstrippertask>
</createitem></target></usingtask>

They go right above where it says “ProjectExtensions”.

Conclusions

If I had to do it all over again, I wouldn’t use ACT. Perhaps I’d use their Javascript comment stripper, or their Toolkit Script Manager for script combining, but I’d definitely not use their animations. Overall, I think the project could have been done cleaner and faster without ACT. The moral of the story: small, quick project, nothing too fancy: ACT okay. Otherwise… look elsewhere.