JavaScript Challenge: Create a Website without a JavaScript Library

JavaScript without External Libraries

Do you know JavaScript? No, really. I mean do you really know JavaScript? I don’t mean knowing every little detail of the language off the top of your head. Rather, I’m asking if you know the actual language of JavaScript, not JavaScript based largely on external libraries and frameworks.

I tend to find that a good number of developers “know” JavaScript, only to find that they can really only use jQuery to target a few page elements and use a couple convenience methods such as hide() and show(). What happens when such developers are put in front of even a moderately complex problem that requires creating custom functions, using conditional logic, or even simply using basic operators? Will they know what to do?

Don’t get me wrong — I’m not trying to intentionally bash anyone, or any JavaScript libraries or frameworks. Rather, I’m aiming to get you to ask yourself how much JavaScript you really know. And I’m challenging you to break out of your habits and to develop a website without the use of any external JavaScript libraries and frameworks.

My Own Challenge

I’ll be honest. I tend to use jQuery in many of my own projects. By and large, this is because I work with teams who have a familiarity with jQuery. And after all, if it isn’t broken, don’t fix it. But I don’t use it because I don’t know pure JavaScript. On the contrary, I pride myself in knowing JavaScript quite well. I mean, I’m no Douglas Crockford or anything, but I definitely know most of the intricacies of the language. In fact, I’ve recently been developing a lot of demos and proofs-of-concept without the use of external libraries or frameworks. And while it would have been easy to include jQuery as a crutch to make things a bit easier, I decided to challenge myself and code with pure JavaScript. Again, not that there is anything wrong with using libraries/frameworks, but I wanted the challenge.

Since I had done a number of demos with pure JavaScript, I decided to focus my attention on my own website for my challenge. I took a look at my scripts.js file, which was minified and included jQuery (minified) and one jQuery plugin (also minified). Here’s what I found:

  • The minified file was 102kb. Not huge, by any means. But most of this was jQuery and the plugin.
  • My code had 101 uses of jQuery. Many of these references were simply targeting DOM elements, while some were things like the bind() or each() methods.

To start, I simply deleted jQuery and the plugin from my non-minified scripts file. This resulted in an immediate file size decrease, with the new file size being 12kb.

Next, I turned my attention to my custom code, starting with my init function that kicks off all scripts on the page, and working sequentially through the rest of the code. Though there were lots of updates I made replacing jQuery, I found that the most common ones were:

  • Targeting DOM elements with document.getElementById rather than jQuery selectors such as the ID selector $(“#id”).
  • Replacing jQuery bind() methods with addEventListener() and attachEvent().
  • Setting CSS properties via element.style rather than $(“#id).css().

Surprisingly, removing jQuery from my scripts did not make my code that much longer. Heck, comparing the before and after of my non-minified code, the jQuery-free version was only 45 lines longer than the version that used jQuery.

After replacing all of the jQuery references in my code, I tested the site across the full spectrum of browsers. Once browser testing was done, I validated that the code was error-free via JSHint.com. Lastly, I minified it.

When all was said and done, my newly-updated, jQuery-free scripts.js file clocked in at a mere 5kb. Yes. You read that right. 5kb.

You may be saying to yourself, “You did all that work and saved a measly 97kb?” Well, yes. But that’s not the sole reason for updating my scripts. I proved to myself that I don’t always need to be reliant on external JavaScript libraries, be it for small-scale demos or larger websites. Sure, there are times when libraries like jQuery are nearly essential to save time, avoid bugs, etc. For instance, I’m not a big fan of writing out my own AJAX logic when jQuery makes it so easy. But for the simpler stuff, I tend to find that external libraries just aren’t always necessary.

Your Challenge

Regardless of how much JavaScript you really know, here’s my challenge for you: Develop a website without the use of any external JavaScript libraries or frameworks.

Take some time to write up a small demo site. Start small. Don’t just jump in and make it overly complex. As you develop the code, I’d urge you to test the site across multiple browsers — especially Internet Explorer (which is notorious for not playing nice). And when you’re done, run your code through a validator like JSHint.com.

I’ll be honest with you, accepting this challenge may hurt your feelings. You may find that your actual JavaScript knowledge is severely lacking. But just like exercising, you need to stick with it, practice, and not give up.

Among other things, you will:

  • Get better at JavaScript
  • Learn a lot more than you thought possible
  • Gain the satisfaction of knowing that you don’t necessarily need to use an external library/framework as a crutch in every project
  • Be able to author your own solution from scratch

Until next time, happy coding!

2 Responses to this post:

  • Prashant says:

    Nice article. But don’t think using external libraries help you in easily writing code which will be cross-browser compliant?

    And second, did any specific book help you in learning “JavaScript”? I can think of “Eloquent Javascript”.

  • I do think that using external libraries is helpful in many cases. That said, I think that many developers (especially newer ones) use them as a crutch and don’t really understand the language itself. Like I said in the article, I’m not trying to bash anyone or any libraries, just to try and get anyone who reads it to better understand the core language of JavaScript, which will in turn help them become better developers.

    As for learning materials, I always keep a copy of “JavaScript: The Definitive Guide” on my desk for quick reference. And I’m a big fan of Douglas Crockford’s book “JavaScript: The Good Parts” as well.

Leave a Comment