Our job as developers is to try to build the perfect web application which provides the best user experience by great interactivity, best performance by quick responsiveness and a good developer experience by giving us the joy of writing it.
Let’s see the 5 ways of building web applications:
- Server-side ASP.NET approach, by using server-side controls
In a server-side ASP.NET application all the code is executing on the server. The browser is only responsible for rendering out the HTML built up on the server.
Although this approach is a safe way because of browser compatibility and powerful by using any programming languages, it has significant drawbacks regarding the user experience which we want to improve with our perfect webapp, because the user has to wait for each postback to finish and the page content has to be rendered after each interaction.
- Server-side ASP.NET AJAX approach, by using the ScriptManager, ScriptManagerProxy, UpdatePanel, Timer and UpdateProgress controls
Instead of doing everything on the server-side, this approach uses some JavaScript running on the client which fetches HTML fragments from the server-side and updates the client-side. Additionally, instead of using postbacks, we have sneaky postbacks. So where we usually have a complete postback for example on a button click, this time we are triggering an asynchronous request, grabbing the HTML fragment and updating it on the client-side.
This approach uses a minimum amount of JavaScript so it is a safe solution because if the browser doesn’t support JScript, hitting the button will post the whole page back to the server, instead of doing the sneaky postback.
So this is a slightly better upgrade to the server-side approach if you want to incorporate AJAX at least partially to get a better user experience (e.g. no full page reloading) and to have less bytes sent back and forth between the server and the browser. The responsiveness and the performance are still the main drawbacks because it is doing a sneaky postback which requires a lot of resources and a lot of work that has to be done on the server-side.
Tip 1: Never wrap the whole content of the page into an UpdatePanel because you are wasting traffic, instead wrap only the smallest region of the page which actually needs to be updated.
Tip 2: Viewstate of the page is still passed back and forth between the server and the client. So turn ViewState off for any control which doesn’t need it to reduce significantly the size of the page.
Tip 3: When building AJAX applications, Fiddler and FireBug are the perfect tools to monitor the performance and intercept the request/response pair.
- Client-side ASP.NET AJAX approach, by using the Microsoft AJAX Library
By using the MS AJAX Library, all the code and work is executed in the web browser instead of the web server. This will improve the responsiveness and performance because only the necessary information is passed between the client and the server. There is more risk involved in the client-side approach because of possible browser compatibility issues.
The basic idea behind the client application model is being able to render out the page once when the page is loaded for the first time and then being able to update different regions of the page by doing service calls, like WCF, ASMX and others. These services have to be added into the ServiceReference section of the page’s ScriptManager. So in this case, instead of re-rendering the page each and every time when the page is updated, the page would be rendered once or a minimum amount of times and, when you want to update the content of the page, the new information is grabbed by the service calls. The page is no longer participating, instead everything is performed on the client-side, including building up the HTML.
The greatest benefit of this approach is the performance and the reduced amount of bytes being sent back and forth, although the one drawback regarding the developer experience is the ugly mix of content and behavior on the client-side.
Tip 4: Don’t use window.onload because it is raised only after the page and all the images are loaded. Instead you would like to execute code when the document is ready by using the client-side pageLoad. This pageLoad function is automatically detected by the Microsoft AJAX Library and fired when the document is ready, which happens way before window.onload.
- Client-side ASP.NET AJAX approach, by using client-side templates and controls (new in 4.0)
The newest feature of the ASP.NET AJAX 4.0, that makes the developer experience much better compared to the previous approach, is the support of the client-side AJAX controls. This provides a clean separation between the content and behavior.
One of these client-side AJAX controls is the DataView which allows you to construct a data view using a template on the client-side. Creating the dataview control is a piece of cake with the Microsoft AJAX Library’s create shortcut, as seen in this screenshot:
This template is a fragment of HTML tags combined with double curly-brackets statements, which injects the current properties of the data item right into the template. You can call any JScript you want within those placeholders, for example the localeFormat in the following screenshot:
This approach works across any recent browsers, providing a great developer experience with separate content and behavior, good user interactivity by being highly responsive and having good performance.
We have reached perfection!
- Client-side ASP.NET AJAX approach, by using declarative client-side controls (new in 4.0)
If you hate JavaScript (as much as I do), you have another possibility to develop more on the client-side with the help of declarative client-side controls. Using the Microsoft AJAX Library, the HTML is extended with special namespaces and attributes.
Next, the declarative client-side controls have to be activated. This is performed by walking through the DOM elements of the area marked with the sys:activate attribute. By using this attribute, the developer specifies the region of the page where she wants to automatically activate the declarative client-side controls.
Tip 5: Activation requires a lot of resources because it has to do a DOM walk across all elements to find the elements that need to be activated and then to activate them. By taking the lazy approach and activating any declarative client-side controls in a huge page, is not the most efficient way. So find the smallest container element where you will activate the necessary elements for declarative client-side controls.
After that, you can attach declarative client-side controls to existing HTML tags. You can attach multiple declarative client-side controls to the same DOM element. This is helpful if you want to attach multiple behaviors to the same client-side control.
ike I said, in this approach, JavaScript is not needed which is good news for the JScript haters.
So how can you build fast and responsive AJAX applications? By performing as much as possible on the client-side and by avoiding unnecessary server-side execution. For better performance and less traffic, for better user experience write client-side ASP.NET AJAX applications. Embrace the client-side!
~~~~~~~~~~~~~~~~~~~~~~
Referenced sessions:
- WUX312 – ASP.NET AJAX by Stephen Walther
Resources:
- Official Microsoft website for tutorials, videos, and sample code for ASP.NET AJAX
- Stephen Walther’s Blog
- ASP.NET AJAX Program Manager’s Blog
- Client-Only AJAX Control Toolkit
FitGeekGirl 