Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited

In my previous post entitled Referencing jQuery, jQueryUI, and SPServices from CDNs, I provided the references to quickly add jQuery, jQueryUI, and SPServices from the CDNs I typically use.

However, I made a bit of a faux pas in what I provided. It’s better to omit the protocol in the references. Browsers will simply use the current protocol, whether it be http: or https:, as needed. This means that you won’t have to worry about any issues down the road should you decide to implement SSL. It also means that the location your user happens to use to access the site doesn’t matter.

Here’s my updated set of references with the protocols omitted and updated to the versions I’m currently using:

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>

Referencing jQuery, jQueryUI, and SPServices from CDNs

OK, I admit it. Now that SPServices is available on a CDN, I’m coming around to thinking that CDNs might be a good idea in some cases. I had been balking at using them primarily from a control standpoint, and I’m still concerned with that aspect. When you host the script and CSS files you are using yourself, you know exactly what you’re going to get. You control the content, the naming conventions, the storage location, the uptime, everything. With CDNs, many of those things are no longer your problem, but you give up some control. I don’t think that CDNs are perfect in every situation, but they can sure be useful.

When I was working with Dan Antion and his team last week, I needed to quickly get something up and running while they were all staring at me, expecting me to perform. (They are the nicest people, but it’s still unnerving to be on the spot to write great code on demand. It seems that I managed to pull it off.) Rather than trying to go out and download jQuery, jQueryUI, and SPServices right then, I decided to quickly toss together a txt file I could easily point to in a Content Editor Web Part (CEWP).

Here’s what I came up with. Google hosts jQuery, jQueryUI, and all of the standard jQueryUI themes, and SPServices is now on cdnjs.

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />

<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

I didn’t realize it at the time, but this txt file has become a standard part of my toolkit already. I’ve added it to three client environments just since last week. It’s the A #1 fastest way to get something up and running, even if you know you’re going to host the files locally later.

You simply add a CEWP to whatever page you want to work on, and then point the Content Link to wherever you’ve stored the txt file above. I usually use a Document Library in the root site of my Site Collection called ScriptCSS or something like that. You can, of course, just paste the contents of the txt file into your master page if your use of these tools is going to be ubiquitous.

Cool SPServices Developments Today

A couple of cool things happened today with SPServices that I thought I’d capture in a post.

First, I saw a couple of tweets this morning from Ryan Kirkman (@ryan_kirkman). Ryan runs a CDN for JavaScript solutions called cdnjs.

CDNJS was started in January 2011 as an attempt to speed up the web. It was hosted on Amazon until CloudFlare took over hosting using their own CDN in June 2011.

At the moment the site itself is managed by two passionate web-developers from Australia.   Feel free to get in contact with us at anytime.

http://twitter.com/#!/ryan_kirkman/status/185260155301134336

I’ve had suggestions from quite a few people over the last six months or so to get SPServices up on cdnjs so that they could reference it there rather than host it locally. I’ve wanted to do it, but each time I look at the fact that I need to learn how to use git to do it, I’ve lost steam. I really do want to learn how to use git, and I will (Codeplex just made it available as one of the source control options), but I haven’t yet. Ryan saw me tweet about that yesterday to Simon (@binaryjam) and posted the latest version of SPServices on cdnjs for us. Hooray! (But I still need to learn git.) If you’d like to use SPServices v0.7.1a from a CDN, you can do so by referencing it at the URL:

http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js

I’ll figure out how to get some of the other recent versions up there as well.

<UPDATE date=”2012-03-30″>

Josh McCarty (@joshmcrty) was kind enough to add some of the older versions of SPServices to cndjs as well. Take a look at his pull request to see the list. If you’d like any other versions, please let me know.

</UPDATE>

The second thing came from a guy named Ben Tedder (@bentedder) who has been writing a lot of great posts about SPServices on his blog.

http://twitter.com/#!/bentedder/status/185434992225157120

I haven’t had the pleasure to meet Ben (his listing on Twitter puts him in Beijing, China) but I’ve appreciated his posts. Today he did something unique, at least for SPServices. Here’s his “Hand-drawn intro to jQuery and SPServices“. I think it’s pretty cool.

Should You Use a CDN for jQuery Libraries?

I frequently have people ask me whether they should store jQuery libraries in house or reference external Content Delivery Networks (CDNs) instead.

I see plusses and minuses for using the various CDNs out there. (There are several big ones: Google, Microsoft, etc.)  Reducing the ‘hits on the server’ thing is potentially one plus, but unless you are seeing significant performance issues, there’s not really a benefit there.

My biggest concern is always one of control. By using a CDN, you are deciding that you trust Google or Microsoft more than you trust yourself to store and serve up the files. Yes, that’s their business, and they have a fantastic track record, but.

Another thing is the whole firewall question. While you may be reducing the traffic on the server and from your server to the browser, you’re increasing the traffic across the firewall. In many cases, I see the network as a far bigger problem than the SharePoint server(s) when it comes to throughput.  Make sure your firewall guys can handle it and sign off on it.

Finally, by hosting things yourself, you have control over naming, version management, etc.  If there’s a new version of jQuery (or anything else), you probably don’t want to just have Google flip you to it automatically.  Given this, the whole ‘kept up to date’ argument sort of falls apart.

All in all, I’m not sold on using a CDN at all. If you want "out of sight, out of mind", then it’s a decent option, but if you have problems, don’t tell me I didn’t warn you!