Towards a Better Developer Experience
Tags: tooling, javascript
Published: 2021-01-31 14:48:18

Despite the many Twitter arguments that I've gotten into, many developers still feel that developer experience isn't important. Hell, that's probably the reason that PHP still exists in the wild. Cheap jabs at PHP aside, I feel that a good developer experience is important for a myriad of reasons.

## Why does it matter?

To address this, I'd like to provide an example, and you'll hopefully see where I'm going with this:

> Imagine you're working on a fairly large React project, and you have to update some styles for a component. Each change you make takes a second or two to update, but it's no problem for a 10x developer like yourself. You can just try to make large changes all at once and deal with it. Finally, you're ready to run a test build, and oh, wait for it... wait for it... it's still not done? You go and get yourself a cup of coffee and check in on it, and it's still going. You go take your dog for a walk, and... it's still going. You go walk your dog again (even your dog is tired of webpack at this point), and oh, wait, the process crashed. You then scream a variety of curse words while sipping cold coffee.

See, wasn't that a fun adventure? No? Did it hit a little too close to home? Here's a virtual tissue to wipe your tears. Although the example was a bit of an exaggeration, it wasn't too far off. So to give a serious point for once, developer experience affects productivity; happiness; and overall how much you enjoy working on something (crazy, right?). So, if there are simple ways to improve this experience, why not go for it?

## Effect on new developers

I think it would be a good idea to take a moment to discuss the effect that developer experience can have on people who are just learning to write code. We've all been there at one time or another, and it can become really overwhelming (especially in the JavaScript ecosystem) to be bombarded by a million new tools, concepts, and technologies. A positive experience in the tooling department can really make all the difference in the world. No one wants to make a cup of coffee every time they add a new variable to their code (that would be a lot of coffee). I really do believe that a good developer experience can draw newcomers in, and a bad one can push them away.

## What makes a good developer experience

I ***could*** list a million little regurgitated ideas of what makes a developer experience great, but let's be honest. I don't like writing enough to enjoy that, and you don't really want to read that. That would be a **bad experience**, which, as you've probably figured out, is a big no-no in this article. So to keep this short, a few things that make the developer experience better are:

- Performance: Everyone loves snappy things. Well I mean languages like Python and Ruby are out there, so maybe not everyone. But most people like speed
- Reliability: It can be really frustrating when a tool works one minute, but then refuses to work the next day because the lunar cycle changed. Tools should be reliable
- Ease of use: While not everything has to be simple, a tool that makes things easier on developers is always appreciated - why do you think package managers exist?

This is, as always, not a complete list, but rather some of the main ideas. There's a lot more complexity here that I am neither qualified nor desiring to talk about. Note, these are the same principles for good UX (at least I think they are), and for good reason. At the simplest level, developers are users of tools and hence want those same things (although I doubt your average user could learn how to use VIM). If you take one thing away from this, let it be this:

> Developer experience and user experience don't have to be mutually exclusive (that's a lie perpetrated by the dark forces of Stackoverflow)

## An overview of some great tools

I was originally planning on making this whole post into a list of tools for a good developer experience, but:

1. That makes absolutely no sense without any context
2. I'm also not a fan of writing list articles (listicles) as they come off as low effort, and possibly boring if not executed right

So instead of giving you a laundry list of tools that you must use if you to want to be an ex-Google, ex-Facebook, ex-millionaire, ex-ecutioner, I'll showcase a few tools that really have changed my workflow for the better, as a way to exemplify what I'm talking about.

Two tools, in particular, came to mind (well really three, but you'll see what I mean)

### Snowpack / ESBuild

I'm including these two together because I have yet to use esbuild on its own, however, it's an integral part of snowpack and what makes it great. I won't go into detail about snowpack - as [their website](https://snowpack.dev) does a much better job at it. However, I will say the techniques are genius and it results in ridiculously fast build times. Seriously, if you use React or Svelte (or even if you don't), give Snowpack a try!

### `pnpm`

On the surface, `pnpm` is just a drop-in replacement for `npm`. However, in reality, it is... well yeah it's just another `npm` replacement. But it's a really fast `npm` replacement! That must get it to some level of coolness. `pnpm` uses a global cache of your node modules and uses smart directory structuring. In other words, it's like yarn, but better. Try it out [here](https://pnpm.js.org)

## Closing remarks

As is usual with my rather unprofessional writing, this post has a big fat `/s` attached to it. If I insulted your programming language of choice, then you might want to learn JavaScript or Rust instead. Seriously though, thanks for putting up with my bad jokes for long enough to get through the post. I figure there was a lot of "Just get on with it already"-ing, and I thank you for it.

I loved watching myself slowing losing my sanity, and this article going increasingly off the rails. Thanks for reading, and come back next time to see me complain some-more (shhh `complaining == passion` when type coercion is on)

### Credits

Cover Photo by <a href="https://unsplash.com/@gentlestache?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Bonneval Sebastien</a> on <a href="https://unsplash.com/s/photos/user-experience?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>

### Links

- [Twitter](https://twitter.com/su_andrewk)
- [GitHub](https://github.com/ajkachnic)