It’s hard to believe that JavaScript is already well over a decade old.  Often relegated to marginal tasks in its early years, JavaScript has grown to become a pillar of modern web development.  With the current popularity of DHTML and AJAX, it can be difficult to find a site that doesn’t use JavaScript anymore.  One of the driving forces behind JavaScript’s newfound popularity is a proliferation of JavaScript frameworks, such as jQuery.

Why?

Though JavaScript itself is a great programming language, the document object model (DOM) can be a web developer’s worst nightmare.  The DOM is a method through which browsers expose an interface allowing JavaScript code to manipulate elements, handle events, and perform other tasks related to a document within the browser.  While almost every browser implements an ECMA standard version of JavaScript, their DOM implementations are inconsistent and quirky at best.  In fact, if you’ve had bad experiences with client-side programming in the past, it’s likely that the DOM was the true source of your frustrations, not JavaScript itself.  This is exactly the pain point which jQuery addresses.

jQuery abstracts the DOM away, allowing you to focus on behavior instead of implementation.  It provides a simplified, reliable interface to the DOM that works consistently across all major browsers.  Instead of wasting time and effort supporting the idiosyncrasies of these browsers, you can write jQuery code that works the same across them all.

Why jQuery?  What’s in it for me?

• CSS3 selectors – In jQuery, nearly everything begins with a selector that defines a set of one or more DOM elements.  By implementing a CSS3 compliant selector engine, jQuery provides tremendous flexibility in this area.  Selectors may contain any combination of ID, CSS class, and/or an expanded set of pseudo selectors (e.g. :first, :selected, :input).
• DOM manipulation – One of the most common client-side tasks is making changes or additions to a rendered HTML document.  Whether updating a snippet of text or adding entire HTML structures, jQuery provides a robust set of utility functions that are up to the challenge.  Combined with the versatile selector engine, complex manipulations are possible with only a few lines of jQuery code.
• Animation – The core jQuery library contains a few commonly used animations, such as fades and slides, and it also provides for specifying custom animations.  Beyond that, jQuery UI offers animated transitions between CSS classes and a wide variety of easings.
• AJAX communication – No JavaScript framework would be complete without a way to make asynchronous requests, and jQuery is no exception.  jQuery provides AJAX communication through several methods which allow you to choose an appropriate balance between control and simplicity.
• Plugins – jQuery’s straightforward extensibility model has led to a thriving plugin ecosystem.  As of this writing, there are almost 2,500 third-party plugins in the repository.  Everything from simple utility functions to entire client-side templating solutions are available as jQuery plugins.  If you can imagine a feature, it’s likely that a plugin already exists to assist you in implementing it.
• Cross-browser compatibility – As previously mentioned, one of jQuery’s key strengths is that all of its features work consistently across every major browser.  Any jQuery code that you write will produce the same results in Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9+, and Chrome.
• Officially supported by Microsoft – For many Microsoft developers, this official blessing is the clincher.  Not only will Microsoft begin including jQuery with Visual Studio, but it is part of the default ASP.NET MVC project template.  What’s more, Microsoft Product Support Services has already begun offering support for jQuery.

Coming from ASP.NET, what should I know?

If you’re coming from an ASP.NET development background, some of jQuery’s idioms may seem foreign at first.  As with any framework, it’s important to learn the conventions and use them to your advantage.  Going against the grain only wastes your time and effort.
In that spirit, these are a few specific tips that I hope will help you flatten the learning curve a bit.

• Use selectors.  Think in sets.
  In the ASP.NET world, it’s rare to select sets of controls through queries. Instead, we’re accustomed to referencing a single control by its unique ID.  Of course this is possible in jQuery too, but its selector engine is far more sophisticated.
  
  Using selectors to identify a set of one or more elements is cleaner and more expressive than the iterative machinations you may be used to in ASP.NET server-side code.  Before parsing out an ID or iterating over a group of elements in search of certain ones, be sure that the task isn’t more easily accomplished through a jQuery selector.
• Use CSS classes for more than just styling.
  Another technique that is counterintuitive at first is the use of CSS classes as flags.  Coupled with jQuery’s selector engine, “flag” classes are surprisingly powerful.
  
  A good object lesson comes from one of my recent contracts, where I was hired to add client-side interactivity to an online card game.  One of the requirements was that the card images should have OnClick handlers applied at particular times, but only to those cards which were face down.
  
  The .NET developer in me immediately considered maintaining the state of all the cards in some sort of client-side collection.  Then, I could have iterated over that array to set up the appropriate OnClick handlers when necessary.  That would have worked, but it would have been messy, prone to breakage, and generally difficult to maintain.
  
  Instead, I realized that CSS classes as flags would allow me to implement a more elegant solution.  Within the code that “flipped” the cards face up, I used addClass to add a “flipped” class to the card images.  Then, a simple $(“.card:not(.flipped)”) selected the set of cards which were face down.  Using jQuery’s click(fn) on that set of elements allowed me to implement the entire feature in just a few lines of code.  Perhaps more importantly, that code was far easier to read and understand than the alternative would have been.
• Understand unobtrusive JavaScript.
  In the ASP.NET world, we use a lot of what’s sometimes termed obtrusive JavaScript.  This means that client-side event handlers are defined as attributes on elements.  For example, several ASP.NET WebControls render an OnClick=”javascript:__doPostBack()”attribute as part of their markup.  This is considered obtrusive JavaScript.
  
  When ASP.NET was initially being developed, this inline JavaScript was the norm.  However, as browsers began providing more sophisticated faculties for imperatively adding event handlers, this declarative technique quickly lost favor with client-side developers. As a consequence, the preferred approach has shifted toward what’s called unobtrusive JavaScript.
  
  Unobtrusive JavaScript is now considered a best practice when wiring up client-side event handlers.  This is primarily because it facilitates separation of concerns between behavioral JavaScript and structural HTML markup.  Unobtrusive JavaScript also helps you to write cleaner, more semantic markup, which improves accessibility and often has SEO benefits.
• Use the console to learn interactively.
  Coming from the save-compile-reload paradigm of statically typed server-side development, it’s natural to approach client-side development in a similar fashion.  While you certainly can write client-side code that way, it’s akin to working blindfolded when you consider the alternatives.
  
  Since JavaScript is usually interpreted by a browser, the browser is one of the best debugging environments available.  In particular, a JavaScript “console” is terrific for interactively interrogating the DOM, testing jQuery selectors against actual markup, and refining JavaScript code in real-time.
  
  My preferred browser-based tool is the Firebug addon to Firefox.  I cannot praise this Firebug highly enough.  It has revolutionized how I approach client-side development, both of JavaScript and of CSS.  If you prefer Internet Explorer, IE8’s updated developer tools are also very capable in this department.
  Whatever your browser of choice, I urge you to give these utilities a try when debugging client-side functionality.  Once you become proficient with one of these tools, you’ll be amazed that you ever developed client-side code without it.
• Get the VSDOC.
  Even though browser-based tools are great for debugging, an ASP.NET developer’s primary editor is still going to be Visual Studio.  When writing jQuery code in Visual Studio, having proper Intellisense can make a tremendous difference in productivity.  The discoverability that Intellisense provides is especially beneficial when you’re unfamiliar with jQuery’s API.
  
  As part of the official support for jQuery, Microsoft provides a documentation file to provide jQuery Intellisense inside Visual Studio 2008.  This is provided through what’s called a vsdoc file, and is available on the jQuery download page (via the “Documentation: Visual Studio” links).
  Jeff King has assembled an excellent FAQ to help you get Visual Studio 2008’s JavaScript Intellisense working:  http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx

Conclusion

By now, it’s probably no secret that I’m a proponent of jQuery and of Microsoft’s decision to officially support it.  Hopefully, some of the benefits outlined in this article have made it clear why.  After you’ve spent some hands-on time with the framework, I believe that you’ll begin to share my enthusiasm for it.

A common story I hear from ASP.NET developers is that they gave client-side development a fair chance several years ago, found writing cross-browser DOM code to be incredibly tedious, and have avoided it ever since.  If you’ve had that sort of bad experience with client-side programming in the past, there’s never been a better time to give it another try.  Between improved tooling and JavaScript frameworks such as jQuery, most of the old frustrations have been completely eliminated.

Case in point, the Glimmer application that the MIX team has just released is a great companion to your exploration of jQuery.  As far as I know, a task-oriented jQuery GUI is something that has not previously existed.  Kudos to the MIX team for bringing us this innovative new tool.