Don't rely too much on JavaScript libraries

This article first appeared in issue 214 of .net magazine - the world's best-selling magazine for web designers and developers.

JavaScript libraries have become an essential part of a web developer’s toolkit, and for a good reason. With there being discrepancies in each browser’s JavaScript implementation, libraries enable developers to focus on writing code that nine times out of 10 will just work – and that’s a brilliant thing.

But have you ever stopped to think about learning JavaScript instead of relying on a library for everything? While I’m not advocating leaving libraries, I’m going to give you a few things to consider that might get you reaching towards your copy of JavaScript: The Definitive Guide again.

1. Less panic when things break

The one thing every developer dreads is when something that you rely on to work doesn’t. This could be a core library function or a plug-in, but both provide you with a dire need to fix something.

A library provides a nice abstraction layer over the various browser differences, but under the hood they’re just JavaScript, so a bit of fundamental knowledge can begin to help you to understand where things may have failed. Even if you’re unable to fix the bug yourself, you’ll be in the position to highlight where it needs fixing and report back to the library’s core team.

2. Spot bad code early

If you use a library that allows community plug-ins, you’ve probably already come across a bad one that you’ve had to remove from your project, or have wasted time trying to make work. To be able to notice a pattern that may cause performance problems can mean the difference between a happy or unhappy client once a site is live.

3. Do you really need one?

Depending on your required functionality, you might be able to write the code needed without a library. If you’re only doing simple DOM manipulations, it might be worth giving it a go.

Page weight and performance are important factors on the web, and a JavaScript library can weigh in at between 20kb and 80kb. On the desktop over a fast broadband connection, 80kb isn’t much, but if you’re making a site for a mobile audience, you’ll want to keep your work as light as possible. I recently launched a site that only needed JavaScript when CSS animations were available.

I decided I didn’t need the helping hand provided by the library, because I only had to deal with the JavaScript implementation of one browser. The total amount of JavaScript came in at about 2kb.

4. Keep up with the Joneses

JavaScript is an evolving language, and we’re in a whole new world where we’re far outstripping the capabilities we thought would be available. You can now use JavaScript on the server with node.js. You can provide geolocation details of where a user is accessing an app. HTML5 is providing us with new APIs that can be used, among other things, to control embedded rich media, store information and determine whether your user is online.

Since we’re talking about new and developing technologies, the current level of documentation is to be found in API documents that are traditionally in-depth and dense. Knowing some JavaScript will be a massive help when researching the features you want to use. Many examples found online won’t use libraries, so it will help in your own hacking to be able to understand exactly what’s happening.

Learning resources

So, have I talked you into it? If so, the best place to start is to look inside the library you’re using. Google provides uncompressed versions for you at code.google.com/apis/library and I’d recommend bookmarking the latest version of your favourite.

When you run into something you don’t understand, head to the Mozilla MDC for explanations. If you’re looking for examples of the new possibilities that HTML5 will provide, then html5demos.com has loads of great and simple examples to work from.