Use jQuery from the Google Libraries API

So you’ve decided to join the web 2.0 fad and have taken up learning jQuery on your website. If you aren’t too familiar with the terminology, deciding which file to use can be a little vague. There is the production version and the minified version of the library you can download at http://jquery.com/. While developing you should use the development version. Inversely, while in production you should use the production version; enlightening, I know. More often than not when you find a JavaScript library or plugin on the internet these two versions will be offered. Although functionally equivalent, their size isn’t. The reason for this is that JavaScript is executed on the client side; therefore, the script you reference in your page has to be transferred to the client over the internet. To keep bandwidth costs low for sites that might experience higher traffic, many opt to go with the minified version because it is so much smaller.

It’s a pain to keep and manage many different versions of jQuery in all of your different environments. This is where Google comes in to play. The developers at Google have taken the time to build a wonderful API for referencing jQuery and many other JavaScript libraries as well. In addition, you also get the power of Google’s CDN or content delivery network. This means that Google will handle the bandwidth for retrieving these scripts for free and also that they manage the caching for you. Additionally, they have a global CDN that can speed things up when users access your site from a location that is far away from where your physical servers reside. Sounds good to me!

Using the Google Library APIs couldn’t be easier. All you have to do is place a few lines of code (similar to what you would do already when referencing jQuery) in the header of your HTML.

For example, I am building a site that requires the latest version of jQuery and also would like to include jQuery UI. Referencing these libraries is as simple as:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.7");
    google.load("jqueryui", "1.8");
</script>

Now you are all set to use jQuery and jQuery UI without having to download anything or set up caching rules. Additionally, if you ever want to upgrade to the newest version of anything all you have to do is change the google.load call in the HTML. Pretty simple! They support many of the popular JavaScript libraries available today. At the time of writing these are:

It is worth noting that you can also use jQuery hosted by Google without using the Loader API and get the same CDN benefits by including the following (but that’s not nearly as cool!):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

So next time you’re developing a jQuery application, keep this article in mind and stop worrying about managing dependencies. Get right into the code!

Advertisements
%d bloggers like this: