I get this question very often. Should I you the one or the other?
Well, my short answer in most circumstances is “you should use both“.
My long answer is “it depends on what you are trying to achieve”, and this blog post will try to cover what are the strengths of each of the libraries, and also why it’s OK to use both with the overhead this “might” have.

ASP.NET Ajax Library vs jQuery functionality overlap

Disclaimer: We are writing this documentation as part of the new Web Client Guidance that is being done in patterns & practices. We are close to finishing this project, so I would like to get more feedback or validation from everyone that gets the chance to read this before we release. Have in mind that the content of this topic can change both in content and in form (it can change because of YOUR feedback).
Also, this topic was created using ASP.NET Ajax Library 0911 beta and jQuery 1.3.2.

Guidelines for using ASP.NET Ajax Library and jQuery

There are different JavaScript libraries that can assist you in authoring JavaScript code that runs on the browser, and using at least one of them is an absolute must in today’s environment. Though ASP.NET WebForms is better suited -but not limited to- for using the ASP.NET Ajax Library, ASP.NET MVC has no preference over either ASP.NET Ajax Library, jQuery or other 3rd party libraries. Furthermore, ASP.NET Ajax Library and jQuery can work especially well together and complement each other, whether you render markup using WebForms or MVC.

ASP.NET Ajax Library and jQuery can be used together in the same Web application, and they both have support from Microsoft. These libraries do not conflict with each other, but they complement each other greatly. The overlap between functionality is not big, and since jQuery’s official support by Microsoft, this overlap is getting reduced in every release.

ASP.NET Ajax Library has made important changes to its core to leverage jQuery functionality when it detects that jQuery is also loaded. For example, ASP.NET Ajax Library provides some basic jQuery-like selector support for selecting DOM elements for its Sys.get(selector) method, which is used internally by many other components. Nevertheless, when jQuery is available, the selector passed into this method can be very complex, because it will delegate the DOM selection to jQuery under the hoods.  Furthermore, all ASP.NET Ajax Library controls and plugins, are also exposed automatically as jQuery plugins.

We found that in most cases, although there is an additional cost for downloading the 2 libraries instead of just one, the productivity and features covered by both libraries working together far outweighs that cost. Also, keep in mind, that if your application is hosted in the internet, as opposed to an Intranet, it is strongly recommended that you use the Microsoft CDN, so the download time gets reduced, and sometimes skipped, as the files may be cached by the browser.

The following sections define some pros that we found when using a particular library over the other. This list should not be taken as completely objective or closed, as depending on what plugins you decide to use, there might be advantages or disadvantages for each. These guidelines are based on the experience developed by using both ASP.NET Ajax Library and jQuery when building web applications in the last few months, as Microsoft has recently added support for jQuery from within Visual Studio, and the ASP.NET Ajax Library has taken huge steps towards supporting both libraries side by side.

Why should you use jQuery

One of the more important reasons for using jQuery is for DOM (Document Object Model) manipulation.

  • The jQuery library is extremely easy to use for finding elements using selectors, for moving elements to different locations inside the DOM, changing element classes, basic animations, and so on.
  • jQuery has a simple API for handling DOM events. However, this functionality is comparable to what can be accomplished with ASP.NET Ajax Library. Due to this, in the Reference Implementations both approaches are used interchangeably; depending on what was the handling logic being used for (that is, DOM manipulation, controlling logic, and so on).

Another strong point of jQuery is the Developer community behind it.

  • Because jQuery supports only client-side functionality, it is server-side technology agnostic, and has a powerful extension mechanism.
  • For the previous reasons, it has been more widely used to develop plugins for a lot of different situations. These plugins are available through the official jQuery site, although each of them has its own license. Nevertheless, a big percentage of these plugins use very permissive open source licenses, an most of them use the same license as the jQuery core, to ease adoption for users who are already using jQuery.

Why should you use the ASP.NET Ajax Library

We found the ASP.NET Ajax Library to be especially useful for writing JavaScript logic whose objective was not just manipulating or animating the DOM. Also, the script loading capabilities was of great help in both the perceived performance of the application and in the development and organization of the JavaScript code.

Some other strong points of the ASP.NET Ajax Library are the following:

  • API and syntax similar to the .NET framework. The library imitates the .NET framework API, type system and namespaces hierarchies, therefore the developers familiar with the .NET framework can learn this framework with ease.
  • The Ajax Script Loader that comes with the library is useful for loading scripts in parallel and for managing dependencies. Using the Script Loader gives you the following advantages.
    • Minimize an Ajax application’s render time
    • Handle loading script dependencies
    • Leverage script combining techniques
    • Perform lazy loading of scripts behind the scene

Note: For more information about the ASP.NET Ajax Library Script Loader, there is a specialized Script Loading document in the Web Client Guidance, make sure to check it out.

  • It is especially useful for writing logic that does not only manipulate the DOM. It provides infrastructure for creating JavaScript controls and behaviors (extending the Sys.Component type), and also provides memory management, easy control creation/instantiation.
  • You can use Client Templates to bind the UI to an observable view model. This allows separating the concerns of UI specific code (or DOM manipulation) from the presentation logic. This also simplifies unit testing the JavaScript code by avoiding the need to test the DOM state and user interaction directly.
  • Browser history:  When the state of a web page changes by using Ajax calls to the server, the URL in the browser does not change automatically. The ASP.NET Ajax Library simplifies working with the browser history, with a cross-browser approach.
  • The Ajax Control Toolkit is a set of reusable controls that can be used from both ASP.NET Ajax Library and jQuery using JavaScript code, and is also very friendly for using it from server-side generated JavaScript, especially when using ASP.NET WebForms server controls.
  • It provides auto-generated proxy classes that simplify calling Web service methods from client scripts.
  • When using ASP.NET WebForms, the ASP.NET Ajax Library is the easiest to use in several scenarios, as many of the controls and functionality can be used from their server-side controls counterparts.
  • Working with ADO.NET Data Services is very easy with the ASP.NET Ajax Library. This, in combination with Client Templates can help creating client side views that consume data from the server very easy.

 

More Web Client Guidance

You can find this and many other topics and key decisions for creating web client applications (both in ASP.NET WebForms and ASP.NET MVC) in our latest Web Client Guidance drops. We are close to finishing this guidance, so your prompt feedback is invaluable to us. Make sure you check it out and comment in this topic or in the codeplex forums (there is a special tag to mark conversations for this new guidance)

  • http://www.timacheson.com/ Tim Acheson

    I use both and tend to use JQuery for the more simple DOM manipulation operations. In an interesting case study, I recently replaced JQuery UI slider with ASP.NET Ajax slider — with excellent results:

    http://www.timacheson.com/Blog/2010/feb/ms_ajax_slider

  • http://starterkit.jsonfx.net/jbst JsonFx

    A good alternative to the MS Ajax libraries is the far lighter JsonFx.NET Ajax library:

    http://jsonfx.googlecode.com

    The client-side templating in JsonFx looks and works just like ASP.NET user controls (rather than the cumbersome MS Ajax syntax) and are compiled to pure JavaScript which can be compressed and attached to the page rather than continually reloaded in the page.

    JsonFx works great with jQuery and has a far smaller client-side footprint. JsonFx includes JSON-RPC services, and much more.

  • jdominguez

    @Tim: cool, then that is similar to our findings. When authoring code that manipulates the DOM, it’s typically a little easier with jQuery. Nevertheless reusing controls from the Ajax Control Toolkit (now integrated with the ASP.NET Ajax Library and available in CDN) is also extremely simple, so I also use those when possible.

  • jdominguez

    @JsonFx: Hehe, nice plug :) Nevertheless I’m curious to try it sometime, as I’ve never heard of it (I noticed that it’s relatively new). Cheers!