In the following I will write about several hot topics covered in this referenced session presented by Stephen Walther, describing how to take advantage of the latest features of the ASP.NET AJAX framework introduced with .NET 3.5 Service Pack 1.
Browser History
Anyone who works with AJAX applications, knows that as soon as an asynchronous postback is triggered the behavior of the browser is broken. An important functionality is the bookmark of the pages, which is no longer possible with AJAX applications. Boy, I have good news for you! The big boys at Microsoft provide now several ways of accomplishing to bookmark a page in an AJAX application.
- Server-side browser history
By enabling this new feature with the EnableHistory=true property of the ScriptManager, it will detect when the URL is changed and it will add a history point which will be later used for the browser history. How is this done in the background? In Internet Explorer it renders out a little secret iframe to keep the browser history. This iframe is updated every time the user moves to another page. In Firefox, it pulls the changes in the hash value of the URL.
Once it is enabled, the developer has to create an event handler of the ScriptManager’s OnNavigate event. This event is raised every time the user changes the URL by clicking on the Back or Forward button, picking out a history point or opening a bookmarked page.
Whenever there is a significant point in history which you would like to record, you have to call the ScriptManager’s AddHistoryPoint so that it can remember that particular page and recreate the state. To recreate the state, the developer takes advantage of the OnNavigate event which is automatically raised on server-side when the user comes back to the page.
The AddHistoryPoint has 3 overloads, including one which provides a parameter for the browser title. By setting this title, the developer can give intuitive titles to the webpages, which will be shown in the history or in the bookmark list, instead of the actual URL. This will give a better user experience.
- Client-side browser history
The client-side API is very related to the server-side one. You can accomplish the same functionality by using the client-side Sys.Application.addHistoryPoint() method to add value representing the state to browser history and Sys.Application.add_navigate() event to recreate the state from the previously added value.
- IE8 browser history
If you are absolutely sure that your users are going to surf through your application only with IE8, for example in an intranet web application, this browser offers you a new feature called Ajax Navigation. This functionality accomplishes all what we talked about previously regarding the server or client-side browser history. All you have to do is set the page to IE8 mode, <meta content=”IE=8″ http-equiv=”X-UA-Compatible”>.Then add value representing state to browser history by using the window.location.hash property and handle the recreation of state from value by implementing a handler for the window.hashchange event.
If your application is used in various browsers, you can always choose between the server or client-side browser history approach.
jQuery
So why would you want to use jQuery?
Well, this library is highly cross-browser compatible and CSS3 compliant, it has a lightweight footprint of 15Kb. The main philosophy of jQuery is to keep things small, keep the initial load of the page down by having the library’s size small which needs to be loaded when your user first comes to your website. The basic idea behind this small footprint is to have a small core framework easily and quickly loadable but to have a big environment to create plug-ins for extending the framework. So another benefit of jQuery is that it has a huge community of plug-ins ready to be used. And last but not least, it is fully extendible, even you can create plug-ins for jQuery.
What kinds of features does it add to the existing ASP.NET AJAX?
The first thing jQuery is good at is the selectors, it has a really good Selectors API. The big innovation of jQuery is that it took the same selectors used to building CSS and transferred those into the JavaScript world. Take a look at some examples:
By using jQuery, we are moving from the world of style to the world of behavior, by taking the same syntax from CSS, with which we are already used to, and then being able to use that in JavaScript. It also works very well with ASP.NET controls because all what the ASP.NET controls do is render out HTML into the browser. So you can just use CSS through JavaScript, for example by marking up HTML with different styles for various events.
Another nice feature of jQuery is animations. In ASP.NET AJAX applications we have background postbacks and no browser progressbar support so it is difficult for the user to recognize when the server is in process mode, unless we give them some visual feedback. To create a good user experience in AJAX applications, we can take advantage of the jQuery animations. The basic set of animations out of the box are the followings:
Other nice visual effects can be accomplished by using the plug-ins of jQuery, for example the jQuery UI plug-in providing additional 30 animations.
Further more, jQuery provides IE8 specific Selectors API. You can use it by simply setting the page into IE8 mode, <meta content=”IE=8″ http-equiv=”X-UA-Compatible”>. Then you can use the document.querySelector() method to retrieve the first element that matches the selector and the document.querySelectorAll() method to retrieve all elements that match the selector. So if your users are using strictly IE8, you can take advantage of the built-in feature of IE8 jQuery selectors API to provide a really fast and efficient user experience.
How does jQuery fit in with Microsoft?
- The Microsoft and the jQuery team have been working together to provide full annotation for jQuery so now jQuery has full Intellisense support.
- Microsoft is releasing jQuery under the MIT license.
- Microsoft is integrating jQuery into their products without actually modifying jQuery: the future versions of Visual Studio, ASP.NET MVC (jQuery is shipped now with its beta version), the next version of WebForms.
- Microsoft will provide 7/24 full product support for jQuery.
Script combining
This new feature allows the ScriptManager to take more JavaScript files, combine them up into a single JavaScript file and then ship that out to the browser. This gives better performance to the page.
There are two big enemies of Ajax Performance, namely:
- The limited number of browser connections. When you are downloading JavaScript for the page, this blocks additional connections from executing, because that JavaScript file has to be downloaded and parsed before additional files can be downloaded, so that can slow down behavior.
- The network latency, meaning the amount of time needed to initiate the download.
When using script combining, it is recommendable to use the Script Reference Profiler web control, which analyses the page for the currently referenced scripts and automatically writes them out for easy combining within the ScriptManager.
To use script combining, all you have to do is list your script to be combined in the CompositeScript of the ScriptManager:
1: <asp:ScriptManager runat="server"> 2: <CompositeScript> 3: <Scripts> 4: <asp:ScriptReference Path="~/Scripts/Script1.js" /> 5: <asp:ScriptReference Path="~/Scripts/Script2.js" /> 6: <asp:ScriptReference Path="~/Scripts/Script3.js" /> 7: </Scripts> 8: </CompositeScript> 9: </asp:ScriptManager>
Then behind the scenes the server will automatically combine them for you and send them out.
Let’s take a look at the performance of loading a webpage containing the AJAX Control Toolkit, which requires a lot if scripts to be downloaded, with and without script combining.
The first test without script combining took about 15 seconds to finish. Notice that downloading of the scripts is performed one after the other, thus having the stair-step style graphic in FireBug:
The second test with script combining this time finished in an amazing time of 3 seconds, having to dowload only one JavaScript file which combines all the files into one.
This performance has the highest effect for the first-time users when the JavaScript files are not cached yet and, in the normal case, they have to be downloaded one by one, waiting after each other. With this new feature of script combining, we will only have one JavaScript file to download.
You can see the statistics of primed and non-primed cache, by using the YSlow plug-in for Firebug. So the first chart displays the first time loading of the page with no cache, where all the green are is the JavaScript. The second graph displays the cached version of the same page, where the blue are is HTML, so a very low amount of JavaScript to be downloaded.
Additionally, this tool analyses your web pages from a performance perspective and lists the specific changes to be made for improvement.
~~~~~~~~~~~~~~~~~~~~~~
Referenced sessions:
- WUX402 – ASP.NET AJAX Tips and Tricks 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
- JQuery
- jQuery Plugin Repository
- ScriptReferenceProfiler
- YSlow
FitGeekGirl 