picking jQuery 1.9 or 2.0 using JavaScript and Require.JS

Question

jQuery 2.0 is increasingly mature: http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/

jQuery 2.0 breaks compatibility with older browsers, so one must know when to stay with jQuery 1.9. The recommended approach is to use IE's conditional comments:

<!--[if lt IE 9]>
    <script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0b2.js"></script>
<!--<![endif]-->

• current web development best-practice suggests that we should be avoiding browser-sniffing or user agent string parsing, but isn't this sort of what conditional comments are?

• does jQuery 2.0 only break compatibility with older Internet Explorer? or are there other browsers that will be worse off in 2.0?

• if this affects more than just Internet Explorer (which is the only place conditional comments work), then what strategy should we use for selecting the best jQuery?

• is there a globally-accessible value/object/function/etc in the JavaScript environment whose presence can be used to signal compatibility with jQuery 2.0 (e.g. a feature-detect)?

main question

My projects currently use Require.JS to modularise my code. My code currently loads jQuery only when it encounters the first section that requires it.

What is the best way to load the correct version of jQuery using Require.JS?

I'm currently considering:

• using the IE conditional comments before I load Require.JS, then "defining" jQuery manually afterwards

• using a JS feature-detect in the code that sets Require.JS's paths (before anything require's jQuery) setting the path to 1.9 or 2.0 as appropriate (my preferred method)

• always using 1.9 no matter what (the safest and most boring approach)

Answer 1

Adaptation of niaccurshi's answer to AMD spec.

// Do this before your first use of jQuery.

var pathToJQuery
if('querySelector' in document
    && 'localStorage' in window
    && 'addEventListener' in window) {
    pathToJQuery = '//cdn/jQuery2.0'
} else {
    pathToJQuery = '//cdn/jQuery1.9'
}

require.configure({'paths':{
    'jquery': pathToJQuery
}})

require(['jquery'], function($){ /* you get the one you need here */ })

Answer 2

There is actually a more elegant solution, it's being used by the BBC for their responsive news website.

It essentially detects browsers considered to be new, and thus would be compatible with jQuery 2.0+, and therefore leaves everything else as an old browser. You may be able to replicate this with Require.js, but the reality is you don't need to...

if(querySelector in document
    && localStorage in window
    && addEventListener in window) {
    //Add jQuery 2.0+
} else {
    //Add jQuery 1.9.0+
}

//This is intended to be a flag that can be checked against to see if the jQuery library has been loaded into the browser.
var jQueryVersion = 0;
function jQueryRunning(ver) {
    //This could be "true", or could be a version number, it's largely down to your own system needs!
    jQueryVersion = ver;
}

Source: link

You should add a callback function to each of the scripts for jQuery, that calls jQueryRunning with the parameter equal to it's version number, this may help you decide on further functions to run down the line, and has the benefit of letting you know when the jQuery code has been embedded (just in case the connection is slow and it takes a while to download).

If using Require.js this may not be something you want to be concerned about!

I say this is a elegant solution because you're quite right, the issue isn't only old versions of IE, it's also older versions of Firefox (before 3.5) and old mobile browsers (if they even deal with javascript!)