A few years ago I compiled a list of all the things that make up my front-end design “toolbox”. I thought it would be fun to do a quick update to this list and expand on some of the reasoning.

So here it goes, these are the things I use on a daily basis (as of March 2016) and why:

JavaScript

This is one category where a lot has changed for me since compiling the original 2013 list. The ES6 spec is officially published and now instead of a jQuery plugin for everything, there’s an NPM package and build tool for everything. It’s easy to get overwhelmed by all the options in the JS ecosystem, and I tend to look for tools that are well documented, enjoyable to use, easy to maintain and handoff, and have a thriving ecosystem.

ECMAScript 6. This introduces a lot of handy new things like arrow functions, template literals, and default values. In the past I used Coffescript, but I’ve since reverted back to using plain JS because of the affordances of ES6 and it’s much easier for new developers to get up to speed with your project.

React. I was initially hesitant about React, but after getting past the weird JSX syntax I eventually became an advocate. A lot of the front-end of Siteleaf v2 is in React and I’m slowly pushing Dropmark that way. Building dynamic pages is so much easier when you can store the page’s state in one spot and let React automatically figure out what DOM elements to update when anything in that page state changes.

Babel. Since ES6 isn’t fully supported by legacy browsers, in order to safely use ES6 today, you have to transform it to ES5 (the older version) before deploying it to production. That’s where Babel comes in. It takes your fancy future-ready code and transforms it to legacy browser compatible code. It can also transform your React JSX code into regular JS.

Webpack is what ties all of the above together. It runs the Babel transforms and allows you to “require” modules like you would in Node, or as you would in ES6 with the import statement. This has made it much easier for me to write small, reusable and maintainable modules, which is important to me since I tend to work on large projects with lots of different bundles. It also gets bonus points for unlocking the ability to use any module on NPM.

Grunt is my task runner. It watches for changes as I’m developing and runs tasks like compiling Sass to CSS and triggering LiveReload when a change is made. My tasks aren’t super complex, so I like how Grunt’s setup is just a little JSON (like Webpack), compared to Gulp’s more programmatic way of doing things.

Jest. I only recently started using Jest to write JavaScript unit tests and I’m still on the fence. On one hand, it was a fairly simple process to get up and testing, but on the other hand the automocking feature has had me running in circles for hours multiple times.

An example of my front-end assets build process is available on GitHub.

Other JavaScript tools: Redux, Lodash, Autosize, loadJS, Payform, Select2, Dropzone, Moment, Packery, imagesLoaded