Replacing JQuery slider with MS Ajax slider – a definite win!

Allow me to share with you my experience of migrating an important slider control, on the main page of a high-profile web application, from JQuery UI slider to ASP.NET Ajax slider. It was a definite win!

Case study: Global Radio's new online player

The UK's largest commercial radio company, Global Radio, recently soft-launched the new version of new online media player.

Although it was a simple v1 release of the product, this is cutting-edge stuff! It's a multimedia web app, capable of delivering a rich, interactive "visual radio" user experience. The technology is state-of-the-art, including some of the newest and coolest products currently available (ASP.NET MVC, ASP.NET Ajax, Entity Framework, HE-AAC/AAC+ audio and H.264 video streaming with embedded metadata, etc).

The new Global Radio player features an Ajax volume slider control, for which JQuery UI slider was used in version 1.0.0. The volume slider is bound to the volume setting of the core media player within a Silverlight/Flash app via JavaScript.

Replacing JQuery UI slider with ASP.NET Ajax slider

These two JavaScript libraries have a lot in common. They can both provide similar excellent Ajax functionality through pure client-side code -- JavaScript/HTML/CSS. In addition, ASP.NET Ajax can be implemented on the server-side, and integrates beautifully with other features of ASP.NET.

We had some minor layout issues with our implementation of JQuery's slider control in v1.0.0 of the player, with inconsistent handle positioning varying in severity between platforms -- e.g. handle 2 pixels too high in IE8 on Windows XP, handle 4 pixels too high in Safari on Mac, during/after any click/drag event. So I added a timeboxed story to our Scrum board, to try and identify and evaluate potential solutions to the problem. (We were aware of the problem long before release, but we had a deadline, and it was a low priority bug -- something nobody but a QA analyst would be likely to detect.) It didn't take long to determine that using the ASP.NET Ajax slider would be the best strategy for a quick win -- much simpler than trying to find a work-around for the issue arising within the JQuery UI HTML/CSS when applied to our design (JQuery UI out-of-the-box doesn't seem to like a handle below a certain width.)

Implementing the ASP.NET Ajax slider was quick and easy. It took about the same amount of dev time as JQuery UI slider, about 2 hours, and worked for our design right out-of-the-box on all browsers/platforms that we need to support. (In fact, it works perfectly on all platforms tested so far, more than just those we promise to support!)

I'm an ASP.NET Ajax convert

My experience of ASP.NET Ajax, and the super-fast free Ajax CDN provided by Microsoft for hosting your JavaScript libraries, has been so good that I've decided to take it even further. I'm looking out for other ways to use the ASP.NET Ajax library. It's starting to look like it's the best way to achieve a lot of common Ajax functionality. In the future it's conceivable that, subject to benchmarking, I could want to use JQuery less -- even for routine DOM manipulation operations. For some projects I may drop JQuery altogether in favour of ASP.NET Ajax.

The more I use ASP.NET Ajax, the more I love it. Every time I look, I find something new or clever in this JavaScript library...

After years of JQuery, using an <input/> element as the basis for a slider control felt uncomfortable at first. But as I got my head around what was happening under the hood, while stepping through the uncompressed code, it quickly dawned on me that there's a good reason for everything in MS's Ajax library. Of course, a slider based on a form element makes perfect sense! In fact, it's a master-stroke of inspired genius. A slider is just the visualisaton of a user-defined value! Furthermore, form fields have an onchange event built-in!!

I've also fallen in love with MS Ajax's ingenious Sys.require function for loading required JavaScript libraries. Instead of a <script/> element for every JavaScript file, just include Start.js and let your core library take care of the rest. Again, it takes some getting used to, but now I can see that this approach is the future for referencing script resources. After using this script loader functionality, referencing JS files in the markup now looks archaic, like something from 1997 back when HTML 4 was released.

Try it yourself

I strongly recommend ASP.NET Ajax to all web developers. Every front-end/Ajax developers should at least try it out. The best web developers are those with knowledge of more than one solution to a particular problem. You can have a basic ASP.NET Ajax slider demo up and running within a few seconds with just a few simple lines of code.

Official documentation and examples for the ASP.NET Ajax slider control are not yet as complete as I would like. The documentation and client-side code samples don't cover some of the things I'm doing. If you can't work out how to do something, please let me know -- chances are I've already found the solution.

More info on ASP.NET Ajax and the slider control

Essential reading:

 

Note: this page is a first draft, I'll update it later with more info about my implementation, simple working code samples, and more...

08 February 2010

Share the love:

Comments: 8

Add Comment

Tim Acheson (09 Feb 10, 14:14)

I posted on the official JQuery forum yesterday to see what others out there in the web dev community think about the relative pros and cons of JQuery vs ASP.NET Ajax. No replies yet...

Personally, I try to use the best tool for the job. I expect most devs, like myself, will use JQuery where that works best and ASP.NET Ajax where that works best.


While I absolutely LOVE ASP.NET Ajax (and the cool new features of v4.0), I think using it along with jQuery is the best approach, and the new features of ASP.NET Ajax come alive when jQuery is loadedwith it. Might want to look at my article here about how ASP.NET Ajax kicks jQuery's butt when accessing WCF services.

Tim Acheson (25 Feb 10, 13:51)

Thanks for sharing your thoughts. Yes, I get good results using both JS libraries, playing to their respective strengths and weaknesses.

I found your article on the superiority of ASP.NET Ajax over JQuery for those web serices very interesting, and useful! IT's interesting what useful results you can get when you compare performance with something other the usual "established" benchmarks. I love stuff like this.

Tim Acheson (19 Mar 10, 07:39)

It's worth noting that ASP.NET Ajax will become less important in the future, with JQuery being Microsoft's preferred JavaScript library. We already have seamless JQuery integration in Visual Studio for for ASP.NET web development. MS will increasingly be contributing to the JQuery project, as announced at Mix10. I welcome this direction for Microsoft! :) [Full credit to James Senior who kindly emailed me about this yesterday.]


Excellent post Tim, Im currently working for a company where some guy made the move from jQuery to MsAjax slider, but as he is off at the moment I am having to do some research on changing it from vertical to Horizontal oriented, but first wanted to know why he wasn't using the jQuery Slider any more...
This answers all my questions and more...

Tim Acheson (16 Jul 10, 11:43)

That's a familiar story! ;) Using the MS Ajax JS did solve some annoying little problems. BUT as indicated in my last comment above, I would reccomend using JQuery UI slider for future projects. Either way, transposing a slider from vertical to horizontal orientation is straight-forward, and the defaults and most examples are for horizontal which is handy if that's the way we're going.


Hi Tim,

Thanks for the post and code.
I'm in the process of targeting a javascript library for a public commerce platform and JQuery and MS Ajax seems to be both good working together.
I haven't be able to find good documentation for MS Ajax though; and I also noticed that the codeplex project is not updated since last May... what do you think about that? Is that a sign of poor maintenance and support from MS?
Thanks

Tim Acheson (19 Oct 10, 15:00)

Hi Racielrod, MS is very much involved in the JQuery project. Check out my previous comment about the future of MS Ajax and JQuery (above). I wouldn't discourage you from using MS Ajax. You should take a few things into consideration -- it's still in Beta, and the focus for MS is now in collaborating on JQuery. Whether you use JQuery or MS Ajax, do consider using the MS Ajax CDN which serves both. Let me know how you get on. Enjoy! :)

Tags:


  • Twitter
  • LinkedIn
  • Facebook
  • Windows Live / Messenger
  • Xbox Live
  • RSS
  • Email