JavaScript Tooling Anxiety — Help Is at Hand

This article was peer reviewed by Chris Perry, Nuria Zuazo and Vildan Softic. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

JavaScript tooling anxiety, (or, as it’s customary to abbreviate everything, TA), has now become a thing and not necessarily in a good way. It’s that awful feeling you get when you’re overwhelmed by the array of shiny developer toys and unable to filter the constant jibber-jabber of community advocacy.

Like its better established cousin, information overload (IO), TA can lead to confusion, headaches, procrastination and, in some severe cases, leave the victim rendered totally inert with indecision. For those who feel they are coming down with a nasty dose of TA, however, the treatment is pretty straightforward: keep calm and carry on.

Remember What You’re Good At

There’s not enough time in life to get to know all the various frameworks, libraries and plugins out there, never mind reading about them, so it’s important to not let yourself get overloaded with information. There was a great article by Tim Evko about IO published last year and as you can see from the ~50 comments it really hit home.

One of the most salient points in Tim’s piece was to stick to your stack. I’d like to broaden that slightly and say: remember what you’re good at. For many developers this means core skills such as being organised, problem-solving and efficient communication. So take a deep breath and remind yourself that you’re good at what you do.

Horses for Courses

Tempting as it is to try each major piece of kit out there, it’s likely there’s only a tiny smattering of them that you need for each job. At Zone I’ve done a lot of CMS-oriented design-and-build jobs, and what makes doing that easier is having constant access to a very slim, but important, selection of tools. Consequently they’re the ones I have focused on.

A lot of the libraries that fight for our attention these days are ones used for building slick single-page apps, which are generally known as MVC (or MV Whatever). If you or your company often make these kinds of applications, then it’s worth getting to know one. If, like me, you don’t make many of these things then you needn’t worry too much about them. That’s not to say you shouldn’t know what problem they solve, but assuming you have an IQ over 90 it’s likely you’ll be able to get to grips with something like an SPA framework without too much homework.

Just Because It’s Trendy

I’ve assessed quite a lot of software in my time. However, I’ve also seen a lot of things come and go. The world of web design and development can be fickle. Fads come and go as quickly as boy bands and, as a consequence, a lot of time is wasted learning about tools that will be dead by the time you get around to using them commercially.

I’m certainly guilty of obsessively having a stab at the next big thing and then realising I’ve forgotten much of what I learned when the time comes to use it.

Beware Buzzwords

Speaking of trends, certain libraries and frameworks (mentioning no names ahem Angular ahem) have become CV musts. When speaking with some recruiters the first question I’ve been asked is “What version of Angular are you at?”. Any dev worth their salt should answer Angular 8 and see what the response is! But aside from being useful when it comes to winding up poorly informed recruiters, buzzwords should be avoided.

An Aerial View of the Landscape

Lots of the tools out there ostensibly do the same things. A quick search online will yield loads of results comparing the most popular ones with each other, Grunt and Gulp being a memorable example. If you ever find yourself a bit confused as to how a particular tool fits into the landscape, have a quick look for a post where some kind soul has gone to the trouble of painting this picture, such as Fred Sarmento’s Front End tools page. Once I can see how some new kid on the block fits into the bigger picture, my TA subsides.

Keep It Simple

This is easier said than done of course, but good programming and good architecture is often about reducing complexity. Applications can quickly become difficult to manage unless you put a little time into the architecture. Taking a modular approach to CSS and JavaScript will really help you to stay in control of your code. Even if you work alone I implore you to explore this — an initial investment will go a long way on each subsequent project.

If, like me, you often work on similar types of projects then making a simple boilerplate will pay dividends. If the gamut of work you do is much wider then you might want to leverage the hard work of others by using a scaffolding service such as Yeoman.

Task automation will help simplify and speed up your workflow, so it’s not surprising that the most powerful and popular tools are the task and module managers (e.g. Webpack, Gulp). These tools can take care of things such as code hinting, concatenation, minification and testing. I’m not going to recommend one here, but I will say that if I had to pick something I couldn’t live without it would be one of those guys.

Picking a Tool

I’ve been in a situation many times where I need a new tool, say a charting library, and I don’t know which of the six or seven major players to go with. So what criteria do I use to pick one?

GitHub stars or npm downloads — is it widely used compared with its peers?
Documentation — is it clear how to get set up, how the API works etc.?
Size of the community — are there plenty of online resources for it?
Last commit — has it been years since it was updated?
Feature comparison — how does it shape up against its peers?
Plays nicely with my pattern — for example, will it work with CommonJS and Browserify?

There are some large organisations (e.g. Facebook) that have the clout to really push their wares (React) and that can evoke a sense of being out-of-the-loop if you’re not on board. I’m not saying they don’t have many positive qualities, but I believe a tool should be judged on its merits and not solely because it was born of a major player.

Spend Your Time Wisely

What downtime you have is precious, so use it well. Whether you work alone or in a large team it’s important that your code is both machine and human-readable, so invest some of your study time in fundamental things such as best practices. This means things such as:

Code structure and styling – ESLint can really help with this
Accessibility – Check out the W3C’s new quick ref guide
Application performance – Google’s page speed tool is invaluable

Libraries and plugins will come and go but design and build challenges will persist.

Another aspect of every developer’s job that can be given less attention than it deserves is debugging. As important as it is, it can fall by the wayside when there are so many other attractive distractions. Knowing how to test and debug your code well will save hours of anguish. The most popular tools aren’t as transient as the others I’ve mentioned elsewhere in this piece as they’re developed by the browser manufacturer themselves — the ones Chrome and Firefox offer are highly rated in the community.

The recent release of ES6 means that JavaScript developers now have a more robust and feature-rich language to write in. It also means that your skills as a programmer are more transferrable to or from another language, as ES6 embraces many of the things other OO and functional languages take for granted. If any aspect of JavaScript were worth focusing on I would say it is this: JavaScript itself.

Conclusion

Do you remember the days of Flash, Java applets and images for non-system fonts? Whether you do or don’t, you’ll just have to trust me: it wasn’t pretty back then. Many sites from yesteryear wouldn’t score highly on SEO, usability, accessibility or responsiveness.

Right now we’re in a really good place, both in terms of what the user and the developer has available to them.

My closing message is this: automate what you can, don’t get distracted by trends, focus on your core developer skills and only use the helper libraries you really need. Most of all: stay calm, everything’s OK, the web is in a great place and getting better every day.