Aug 14, 2013
Marina Rukavitsyna

Pros and cons of CDN usage in projects with DevExtreme Chart Widgets

We took great care to ensure that our Devextreme Data Visualization Library is easy to use no matter how one would wish to use it. And since we placed our library into the Content Delivery Network, I am excited to tell you that publishing sites containing DevExtreme visualization widgets is now a breeze.

DevExtreme CDN

Here are the links to the DevExtreme visualization library in CDN:

HTML
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/13.1.x/js/dx.chartjs.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/13.1.x/js/dx.chartjs.debug.js"></script>

In addition, base libraries (jQuery and Knockout) required by DevExtreme visualization library can also be loaded from public CDNs:

HTML
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>

Use these links in your deployed applications instead of publishing the libraries.

What is CDN?

A content delivery network (CDN) is a distributed system of servers located in multiple data centers that allow the loading of content from the nearest server. By content, I mean static resources used on web sites such as JavaScript libraries, CSS files, images, etc.

In other words, CDN is a set of geographically dispersed servers. When a visitor requests certain content, a CDN selects the nearest server to fulfill the request. This allows for a quick transmission of static content to web visitors from different parts of the world: the closer (geographically) the server is to a visitor, the faster a page loads for him/her.

We use a CDN provided by the Windows Azure cloud. For the current list of CDN node locations, see Windows Azure CDN Node Locations.

What are the pros of using the DevExtreme visualization library hosted on CDN?

  • Scripts are loaded quickly for end-users who are far from the content source.

  • A browser can cache libraries from CDN. So when you visit several sites that utilize DevExtreme visualization widgets, the dx.chartjs.js library is loaded only once.

When not to use CDN

Using a CDN to develop apps on corporate networks (Intranet) is not recommended, since in most such cases, the server is located on the premises and is much closer to you than the CDN server.

Another case when CDN is not the best solution is during an application’s development and debugging process. Querying static resources from your local host is certainly faster than over the Internet. In this instance, change your local URLs to CDN URLs when the application is ready for deployment.

An example of using the DevExtreme visualization library hosted on CDN

One of the great benefits of using the DevExtreme visualization library hosted on CDN is its usability for creating online examples using tools like jsFiddle.

Here is an example I created in jsFiddle: Chart Created Using DevExtreme CDN

jsFiddle provides some certain JavaScript libraries (e.g., jQuery) out-of-the-box. You can include them in the Frameworks and Extensions section. However, the ChartJS and jQuery Globalize libraries are not available in this section. So, I linked them from CDNs within the External Resources group.

To be honest, it became easier and faster for me to test DevExtreme examples when I learned that I can use the jsFeedle editor with links to CDN content. I hope that you will find the CDN usage with DevExtreme libraries helpful and that will make your work easier.