Fri Jan 25, 2008 @ 9:29 AM
Since the time we shipped our first production suite of native ASP.NET AJAX controls back in November of 2006, we've been experimenting with new ways of doing efficient incremental page updates. We felt that we had something promising on our hands with full fledged client-side controls. The ability to create high-level UI elements (menus, treeviews, grids, etc.) on the client seemed like a solid foundation to build on.
Our research produced a new high-performance AJAX technique which is currently gaining quite a bit of momentum among our customers. I will explain how this technique differs from standard AJAX techniques, with comments on ease of use, performance, elegance and the available client-side features within each technique.
The server-centric AJAX container technique is employed by the ASP.NET AJAX UpdatePanel control as well as several AJAX solutions sold by the leading 3rd party control vendors. UpdatePanels are driven entirely by ASP.NET postbacks. AJAX applications are created by wrapping postback-based ASP.NET portions of the page and specifying which triggers (server-side events) will cause certain page areas to re-render.
Ease of use: The most obvious advantage of this approach is that it is extremely easy to implement. It is really not much harder than building a vanilla postback-based ASP.NET application and then wrapping certain areas of the page with UpdatePanels. This approach is ideal for quickly adding AJAX features to existing ASP.NET applications.
Performance: The biggest downside of this approach is performance. UpdatePanels always post the entire page - including full viewstate - to the server. Even though the required AJAX update to the page is often minimal, its server-side page processing essentially takes the same resources as when doing a full postback. The response sends raw HTML back to the browser, adding kilobytes to the required network traffic to process the AJAX request.
Elegance: The server-centric AJAX container technique is fairly elegant from the implementation point of view. Page areas are cleanly wrapped by UpdatePanel instances and AJAX updates are accomplished by mapping server-side events to triggers. All AJAX magic is performed by the UpdatePanel control itself.
Features: All features exposed to the developer using the UpdatePanel control are entirely on the server side. The control was not designed to be driven by client-side logic. The server-centric approach lacks the finer level of control on the client, which is definitely needed to build sophisticated AJAX apps with hyper-responsive user interfaces.
Technique 2 - Client-centric AJAX Containers (ComponentArt CallBack)
ComponentArt CallBack is similar to the UpdatePanel control in its high-level concept of acting as a generic AJAX container for ASP.NET content. Both controls allow rendering custom ASP.NET content (including server controls, user controls as well as literal content) through AJAX callbacks - without reloading the entire page.
However, ComponentArt CallBack is driven entirely by its client-side API. Developers specify exactly when a callback will be triggered and exactly which parameters will be sent to the server (CallBack doesn't post the page by default). This triggers a server-side event, where the developer has full control over what will be rendered back to the client.
Performance: Requests made through the CallBack control are extremely lightweight in terms of network traffic. However, each request has to go through the full page life cycle and the response typically generates HTML and sends it back to the browser.
Elegance: The CallBack control hooks into the page life cycle and exposes the native ASP.NET object for rendering (HtmlTextWriter) to the developer. While the developer needs to write custom code both on the server and the client to perform an AJAX request, the level of control that is gained makes it worthwhile in most cases.
Features: The client-centric AJAX approach exposes more capabilities to rich web applications with highly-responsive user interfaces because all AJAX request decision-making logic resides within the client-side event-driven code.
A similar technique is available with ASP.NET AJAX/3.5, which makes it incredibly easy to expose a web service and invoke it directly from client-side code. Significant performance improvements of this approach over the previous two are probably the main reason for its incredible popularity within the development community.
Performance: There are two important performance breakthroughs of this approach: 1) Since methods of any class can be invoked through client-side code, the server-side request processing doesn't need to go through the ASP.NET page life cycle. The client-side request hits exactly the method it needs and it receives exactly the response it needs. There is no waste of server resources. 2) The response doesn't contain HTML markup. Rather, it contains only the data requested by the client. This can reduce the network traffic required to process the AJAX request by an order of magnitude. The received data is used on the client side to generate or update user interface elements.
Features: The Ajax.NET library as well as ASP.NET 3.5 Script Services are loaded with client-side features. They contain the ability to easily invoke server-side logic as well as serialize .NET objects to their JSON representations. They don't, however, have the ability to manipulate high level UI elements (menus, treeviews, grids, etc.).
AJAX 2.0 - Client-side Controls Invoking Web Services
Ease of use: High-level client controls expose API methods to invoke web services. The structure and content of those controls is automatically populated with the results returned by the web service and the update is immediately visible on the screen. Even though some client-side coding is required to create and maintain user interface elements, it is reduced from many hundreds of lines to just a handful of high-level API calls. Not as easy as using the UpdatePanel control, but pretty close.
Performance: As already stated, this approach builds on best performance practises presented in the previous technique. However, the overall performance of an application built with this new approach actually exceeds the previous one. Additional performance improvements come from extensive client-side UI generation optimizations that we've built into the ComponentArt Web.UI suite.
Elegance: A high-level description of this technique is simple and powerful: "Objects on the client (client-side controls) communicate directly with objects on the server (web services)". The server-side logic of the application is delivered as a collection of web services - without any preconceived user interface decisions. This produces a real separation of tiers and greater code reuse options. Those web services could potentially be reused by multiple types of applications: mobile, smart client, Silverlight or other ASP.NET apps.
Features: Not only is AJAX request decision-making logic in the same domain as the rest of the app, but it is transparent to it. Updating a portion of the user interface through a fast AJAX request is no different than invoking any other client-side API method.
The new AJAX technique presented here is an evolution of the previously available techniques, rather than a radical departure from them. It builds on the strengths of AJAX best practises, while introducing something new: full fledged client-side controls capable of communicating directly with web services.
It's important to note that there is no clear winner for all application scenarios. All of these techniques deserve consideration, depending on the specific situation. For example, ASP.NET AJAX UpdatePanels might end up being chosen for apps that run on fast internal networks. Client-controls invoking web services are a great option for high-performance apps with rich and responsive user interfaces. Mixing various techniques within the same application is also a perfectly viable strategy.
Fri Jan 25, 2008 @ 9:29 AM
Bertrand Le Roy
Mohammad Javed From Comm-IT India Pvt. Ltd.