Why is JavaScript fragile?

I talk a lot about how JavaScript is the most fragile part of the stack, and that it’s better to lean on HTML, CSS, and server-side languages when you can.

But what do I mean by fragile, and what makes JavaScript more fragile than other languages?

HTML and CSS are incredibly forgiving.

If you fat-thumb the keyboard and type dvi instead of div, the browser ignores what you wrote, treats it like a span, and moves on.

<!-- Browsers treat this... -->
<dvi></dvi>

<!-- Like this... -->
<span></span>

If you mistype a CSS property—for example, writing bg-color instead of background-color—the browser just ignores the property and moves on.

.hero {
    bg-color: #f7f7f7; /* The browser ignores this */
    width: 100%;
}

But let’s say you misspelled a variable name in your JS—writing num as nmu in the example below.

The JavaScript file would throw an error and just… stop. The whole thing would stop working.

function doubleIt (num) {
	// This will break all the things
    return nmu * 2;
}

HTML and CSS fail gracefully. JavaScript does not.

That’s in large part because it’s a scripting language. If it can run a step in the code, it doesn’t want to keep going since future steps may depend on the one that just failed.

But this is also true of many server-side languages, so why I do I favor those of JavaScript when possible?

Because your server environment is predictable, but the browser is not.

On the server, you know exactly how much bandwidth and GPU power you have. You know what else is running and (generally) what happens when. You know what features are supported, and which ones are not.

In the browser, user devices can vary wildly in terms of computing power, feature support, and bandwidth.

Files can timeout or stop running unexpectedly. Aggressive ad blockers and firewalls can prevent files from loading entirely… and when they do, it’s usually JS files, not HTML or CSS.

Because of how browsers work, a partially loaded HTML or CSS file is usually still pretty functional, but a partially working JS file is the same as not having the file at all.

If you need help converting a fragile, JavaScript-heavy site or app to more resilient HTML and CSS, get in touch.

I’ve consulted with organizations big and small, including NASA, Harvard Business School, and more. I’d love to work with you!