Peter*s Blog

A blog covering my exploration of Ruby, HTML/CSS, JavaScript, and web development in general. About Me.

Useful CDNs

CDNs (Content Delivery Networks) can be used to load JavaScript packages over the internet with a high degree of reliability. Loading packages in this manner is often considered a best practice, because it cannot be assumed that a user will have any given library downloaded on his or her machine.

The link to the CDN's package is set as the value for a script element's src attribute. The script itself is placed towards the bottom of the HTML document's head element, with the scripts ordered by dependance, and the local script (that will directly or indirectly depend upon them all) at the bottom. The resulting set of script tags usually looks something like this:

<head>
  <!-- title, meta information etc... -->
  <!-- CDNs -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- local script -->
</head>

Packages are often made available in uncompressed and minified forms, for development and production, respectively. The difference between these two is that the standard form retains whitespace and non-essential characters, which make it easier for humans to understand, while the minified version removes these, making the file smaller and quicker to download. It's best to use minified CDN packages for production applications, since these packages are unlikely to be scrutinized by a person and will provide some performance gain during page load.

Below are CDN URLs for some of the most common JS packages, with the minified version listed second.

jQuery

https://code.jquery.com/jquery-3.2.1.js

Copy

https://code.jquery.com/jquery-3.2.1.min.js

Copy

Underscore

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js

Copy

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

Copy

Handlebars

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js

Copy

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.min.js

Copy

Backbone

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js

Copy

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js

Copy