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
- Demo: launch the new player (Capital Radio's live audio stream).
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).
Replacing JQuery UI slider with ASP.NET Ajax slider
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
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!!
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
- ASP.NET Ajax slider implementation tutorial, with client-side code example. (More documentation and examples are needed to cover the full range of possibilities with the slider control, but this is a good start.)
- How to make Ajax easier using ASP.NET Ajax's script loader.
- Introduction to the ASP.NET Ajax library -- by James Senior, Microsoft's social web guy. I highly recommend James's blog for all things ASP.NET Ajax, where you'll find the latest news and numerous essential tutorials with simple sample code. (I've had James in my contacts list ever since he emailed me about some benchmarking work I blogged about, and it's thanks to his expert advice that I completed this project so quickly.)
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