Web dependencies or libraries such as jQuery, Vue, bootstrap, underscore, Dojo, font-awesome, and others have become pretty much a part of the modern web. To make loading of these many assets, libraries, and dependencies easier and faster on the client’s browsers, most developers turn to services such as CDNJS and others.
For most developers who have been in the trade for at least a decade, Google has always been the only, and probably, most preferred CDN provider to make loading JS on the web easier and faster. There is also the advantage of the whole thing being free and quite reliable, to be honest. However, as many devs would agree, Google doesn’t really consider its CDN service a priority and can sometimes drag its feet when it comes to updates and upgrades.
In light of this, a new entrant into the JavaScript CDN service aimed to provide a more robust and FOSS frontend JS library hosting service for website owners relying on JQUERY for their websites’ functionality and visual interaction through libraries.
What exactly is CDNJS, and what can it do for your website or web application functionality as far as JavaScript is concerned? How different is CDNJS from other JavaScript or general-purpose CDN services out there? These and many other questions will be answered in this ultimate CDNJS guide.
Google has, for the longest time, been the most popular CDN service used by developers to speed up the loading of frontend libraries such as JQUERY. However, for an equally long period, Google has always focused their CDN service to popularly used libraries as well as dedicating less time and resources to the service.
A brainchild of two startup founders- Thomas Davis and Ryan Kirkman- CDNJS aimed to expand the number of libraries that could also be loaded through a CDN as well as make it a better-maintained and updated service as compared to existing ones. CDNJS is a free and open-source CDN service that hosts a variety of JavaScript libraries. Most of these libraries cannot be found on any other proprietary or free CDN out there which means they had to be self-hosted in the past.
What sets CDNJS apart from other services is the number of JS libraries hosted on their servers and served to millions of websites around the world. On top of that, CDNJS is a free and open-source service whose source code is free to other developers.
In addition to popular JS libraries on CDNJS such as cdnjs bootstrap, cdnjs jQuery and cdnjs font awesome, the service also avails a host of other libraries such as:
Over 3,900 JS libraries are currently hosted on CDNJS servers according to data provided by CDNJS themselves. At the same time, the small project has grown in terms of support and community. By the time of publishing this guide, CDNJS had over eight hundred active contributors in its community. The service has amassed a five million-strong user base since its inception, which is roughly 9.2% of the websites on the world wide web today.
As a recap of what CDNJS means, here are some of the things that CDNJS is all about:
Most developers familiar with content delivery networks might already have an idea of how CDNJS might work. The only difference between CDNJS and other JS library CDNs is the fact that it’s open-source, available in most countries, and has more libraries than any other JS library out there.
In a nutshell, CDNJS is a free distributed JS library delivery service that you can use to host your JS dependencies/libraries outside of your server. Using its robust cloud network delivery and storage service, CDNJS will deliver all JS libraries you use on your websites or web applications to your users.
CDNJS essentially makes your websites load faster and be more available to your visitors regardless of their location and internet connection. Since most frontend JavaScript libraries can be a bit heavy to be delivered through individual servers, developers can take advantage of this free service by pointing to the CDNJS-hosted library as opposed to downloading and hosting it on their web server.
At the time of writing this guide, CDNJS servers and delivery networks were hosted in collaboration with Cloudflare- one of the most popular general-purpose content delivery and DDOS protection networks out there.
Using CNDJS can be as simple as pointing to a particular JavaScript library on your frontend code as opposed to downloading the entire library, uploading it to your web server, and referencing it in your code. However, through CDNJS’s excellent documentation, you can find specific instructions on how to use the service for every possible JS library you might be using at any given moment.
Here are practical code examples of how you could use CDNJS for choice popular frontend JavaScript libraries:
You can reference the cdnjs jQuery library with a single line of code so long you know the URL and version you are after. Head over to the CDNJS library website to find the correct URL for the jQuery version you are using on your project. Here is a code example of how you could reference CDJSs hosted jQuery 3.5.1:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js” integrity=”sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==” crossorigin=”anonymous”></script>
Note: there are several versions and packages of the jQuery library on CDNJS. Be sure to visit the library to find the correct one for your project. CDNJS also makes it super-easy to generate the script automatically, including the authentication keys, as shown in the script snippet above.
You can also point to the CDNJS bootstrap library with a single line of code. This means bootstrap will always be loaded from the nearest CDNJS Cloudflare server whenever a user visits your website or web application/
Here is an example of how you can use CDNJS bootstrap version 4.5.0 on your website:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js” integrity=”sha512-iqhWkvLOXVDz+Lr//ZryEKNvZ5pmgdKEe58Wh/VwfTGwTku0MKbuLhjJ1zUAJu8iSbOqfLcXrrxJ61+27THi2Q==” crossorigin=”anonymous”></script>
The above script should be used in conjunction with the correct CSS bootstrap reference either hosted locally or on another CSS bootstrap CDN.
Another popular frontend JS library hosted on CDNJS is the Font Awesome library. Like the other libraries, Font awesome can be used or referenced with a single line of code on your websites’ JavaScript code. Below is a code snippet showing you how you could use cdnjs font awesome on your project:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js” integrity=”sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==” crossorigin=”anonymous”></script>
Insert the above script to the end or beginning of your JS file, and font awesome will be loaded from the CDJS Cloudflare servers whenever a user opens your website.
Another feature within CDNJS, cdnjs-cdn-data, allows bower devs to replace their references to ones hosted on CDNJS servers. This has the same benefits as referencing any other JS library hosted on CDNJS.
JavaScript dependencies are the most demanding components of the modern web. A single web application or simple website today could have up to five or more JS libraries that may affect the way the website functions, its speed, and how it appears to your users. Hosting your JS libraries on a CDN service such CDNJS has many benefits, among them:
CDN hosted JS libraries will load faster than those hosted on your web server. This improves your website’s performance and user experience, regardless of their location or browsing device power.
Your JavaScript libraries will always be available to be used on your website, no matter what happens to your web server’s storage.
CDNs hosting JS libraries often have a distributed server architecture where JS libraries are retrieved from servers nearest to your users. This makes loading, sometimes heavy JS libraries easier.
Most JS CDN services such as CDNJS are free, thus saving you the money you would have spent paying for extra storage on your web server.
You are guaranteed that the JS library being loaded to your website is secure and has not been replaced or hijacked without your knowledge.
Modern browsers such as Chrome will quickly identify a familiar CDNJS URL and download the library to a user’s cache. This means that the next user that visits your website probably has the library in their browser’s cache. However, the browser will only use the cached library if you used the already familiar CDN address on your website too.