A Natural Progression

When I started learning HTML and CSS I relied on frameworks like Foundation and Bootstrap to do the heavy lifting of any project I was working on. Early on I learned Sass so I could customize what components I was including in my final CSS. I started out using pretty much everything included in the frameworks. I slowly started removing components until all that was left were some helper classes and the grid system. Eventually, I dropped frameworks like these altogether.

Currently, depending on the size of the project, I’ll either use my own grid system or use something like Susy. In every project I also use Normalize and Bourbon. So, at most I’m including three third-party libraries in my CSS (Normalize is the only one that outputs actual CSS...Bourbon only supplies mixins and functions, as does Susy). The rest of my CSS is all handwritten Sass.

I see this as a natural progression in learning a new language or technology. Start with a lot of assistance, see how much more experienced professionals do this type of work, how they structure and write CSS or HTML, and learn from them. Once you become more comfortable, reduce your need for their code.

I’m getting to that point with JavaScript now. jQuery is awesome and it does a lot of stuff I could never imagine doing myself. I still find it essential on a lot of large-scale projects. However, in a lot of instances, jQuery is overkill. As someone obsessed with optimizing websites for performance, I need more convincing than ever that it is worth adding an extra ~95kb un-gzipped to the page if I’m only doing very basic functionality. Even if I’m going to use jQuery, do I really need to use someone else’s jQuery-dependent library for a lightbox or audio player? These libraries tend to be trying to do much more than I need and add even more weight to the page. My natural progression in JavaScript is getting to the point where I don’t really need someone else to write a lightbox plugin for me—I can do it myself, laser-focused on my needs. This results in (hopefully) smaller and more efficient code that is easier to tweak.

I put this to the test recently on that podcast player I was talking about. In the initial prototype I had both jQuery and a third-party audio library to do the majority of the work. As I began running into issues with the audio library (and having little success finding any decent alternatives), I kept finding myself in the source code mangling it to suit my needs. At one point I just gave up and decided to write my own small audio library. With a little help from our friends at Mozilla, writing a tailor-made audio player was insanely simple.

I wanted to take my challenge a step further, so I tried writing the audio player in native JavaScript, excising jQuery from the project. Having spent the majority of my time writing JavaScript on the web with jQuery, it is very refreshing to write native JavaScript in the browser. Especially with newer APIs, native JavaScript is making a convincing case to remove jQuery especially for basic DOM manipulation and traversal.

The result? From prototype to (nearly) final product, we went from over 115kb of minified JavaScript (un-gzipped) to just 2.5kb of minified, un-gzipped JavaScript for a customized audio player with playlist support and some dynamically added features.

For your next project, see if you can get away with native JavaScript. If that’s not reasonable, see if you can write all of the functionality without any third-party plugins.