Optimizing and Understanding AJAX
Company: Microsoft Product: Microsoft ASP.NET AJAX
There were two classes at TechEd 2007 that really showed off not only what Microsoft ASP.NET AJAX could do, but also how to squeeze every bit of performance out of your site as possible. For those unfamiliar with AJAX, this is a way of developing websites so that when you click on links or other actions that typically cause the screen to refresh, you won't get the "flicker" or wait time that comes with a full reloading of the page. Instead, only the part of the page that needs to be updated refreshes. For good examples of AJAX in action, check out the dynamic loading of modules in Google's personalized home page, iGoogle. Under the Hood of ASP.NET AJAX Partial Rendering, taught by Dino Esposito, explained the difference between a fully realized AJAX site and the Partial Rendering model that Microsoft introduced with the UpdatePanel control. Partial Rendering is a powerful system that allows the web developer to not deal with the server responses or manipulating the HTML directly. Instead, any controls found within the UpdatePanel can be altered from the code behind just like everything else.The only difference is that no actual post back is occurring, and the JavaScript on the page is just requesting updated information from the server.
Esposito showed that while this was an easy way to perform AJAX like operations that required little or no JavaScript skills, you still have to deal with ASP.NET issues like the Viewstate. He also explained that with the UpdatePanel, you don't have a fine enough control over your page to do some of the more advanced features that AJAX typically allows. Esposito rounded out his talk with a discussion about using the new JavaScript PageRequestManager system that Microsoft developed to handle the requests and responses to and from the server. He showed that, by hooking into the events that this new system exposes, you can call Web Services (pieces of functionality that exist on the server for the express purpose of being called remotely), and handle their replies on a more personal level (instead of just letting the UpdatePanel and .NET do it for you).
This class was immediately followed by Jeff Prosise's Optimizing and Extending ASP.NET AJAX. In this class, Prosise skimmed over some of the material covered in Esposito's talk, but he went more in depth into some of the reasons the UpdatePanel is both good and bad. Prosise exclaimed that he believed the UpdatePanel is one of the most revolutionary controls to come out of Microsoft because it allows the developer to not have to deal with many of the more tedious tasks associated with AJAX development, but he also stated that it is really inefficient and showed, with the help of an Internet Explorer plugin, Web Development Helper, just how much data was being transferred between the client and the server when a small section of the page was requesting an update. Prosise explained that the default behavior of UpdatePanel is to refresh when any trigger needs to go to the server. This means that if you have multiple panels on a page and a button on one panel triggers a request, all other panels will send out a request as well. Prosise showed that the simple fix to this is to switch the UpdatePanel's properties from "Always" refresh to "Conditionally" refresh. This means that a particular panel will try to refresh only when one of its triggers are called (like a button within it being clicked).
Most of this talk went into how to use the JavaScript "classes" that Microsoft developed. That's right, MS went to a lot of trouble to make JavaScript Object Oriented for their client-side portion of AJAX. Or at least, they made it appear to be Object Oriented. Instead, it is all a way of cleverly using JavaScript's current functionality to simulate inheritance and polymorphism. Unfortunately, to go into the changes made to JavaScript, I would need to start up a whole new article, so I won't go into any real detail here. Suffice it to say that with this system, you can hook into the client-side code before a request is made, after a request is made, make requests and tons of other actions that allow you to bypass the UpdatePanel completely. Of course, this means that you will have to deal with the things the UpdatePanel hides from you, but the good thing about these new libraries is that it isn't specific to .NET (as one would expect with JS). Instead, if you are a PHP, PEARL or even a ColdFusion developer, all you need to do is include a copy of the MS AJAX JavaScript classes into your page and you can have the benefit of the PageRequestManager and not need to mess with .NET at all. Both of these classes revealed a lot about the new AJAX framework and not only how to use the system, but also how to use it correctly.
-J.R. Nip, GameVortex Communications AKA Chris Meyer
Related Links: ASP.NET AJAX Home Page
XNA Game Development Attracts Lots of Interest The Five Most Common Web Development Flaws