Blog

A short story about the pitfalls of developing with CDNs

During the week I was developing a checkout process. I’ve built a few before and using the same technology stack, so I duly copied previous code I knew worked.

Except it didn’t.

So what do you do when something that should work doesn’t? Well, you start checking things.

Now I like to think I’m pragmatic when doing this, but the reality is more like rapidly task-switching:

I checked for typos Googled the error message checked if the JavaScript files had loaded the order they loaded whether the data was being loaded compared this code with another version Eventually I realised that it was specific plugin — Vee Validate for Vue.js — that wasn’t working.

But it was confusing why. The code itself I was certain was fine. I had used more or less identical code on another project. And the dependencies were being loaded.

It was only when I checked in the other project, and found that it too was no longer working I suspected that something else was going on.

Cue more Googling and trawling through Vee Validate on GitHub and website.

Eventually I discovered that Vee Validate had changed from version 2 to version 3 a week before. The version change was a substantial rewrite and would break version 2 code.

In both projects we load dependencies like this using a CDN:

<script src=“https://unpkg.com/vee-validate@latest”></script>

The @latest means the most recent version will always be loaded to the web page.

So while Vee Validate was being loaded, the web page was developed using a previous version. This broke it completely.

A careless way to develop

While the fix was relatively simple — load a specific version not the latest version — the thought that stuck in my mind was, “what if that had been a live website?”.

One day a website would work fine, the next it would suddenly stop. Imagine having to explain it to a client.

I realised how little I knew about what was being loaded. Do I even know what all these dependencies do, let alone what version they are?

While using a CDN is convenient — no files to download, quicker development — is it good practice?

Do we even need to use one?

The answer I believe can be found in a post Self-Host Your Static Assets by Harry Roberts.

What caught my attention was the Network Negotiation Penalty. Harry demonstrates that using multiple CDNs even to popular resources, makes websites slower not faster.

In his own words:

If this isn’t already a compelling enough reason to self-host your static assets, I’m not sure what is!

I urge you to read it in full — I wish I had done so.

— Alexander Blackman