Overview

JavaScript at Built By Cactus can be broken down into two sections, vanilla JS that we might use in WordPress themes or plugins and SPA (Single Page Application) builds that will usually be built on a framework, such as React.

We will cover React specifics later, but I’ve tried to cover as much JS info as possible here.

ES6

ES6 has improved the way that JavaScript is written and has made the developer experience so much better.

For that reason, we suggest using ES6 whenever possible.

For a great course on ES6, see here

Compilation

Because a number of browsers still can’t natively parse ES6, it still needs compiling back into ES5. We generally lean towards Babel as it’s well tested and documented. Whilst Babel can be used standalone, it’s great when integrated with your build process. These are some options:

Arrow Functions

Arrow functions can be a great way to trim down multiline code blocks into a single line. They also give us the ability to call functions without rebinding this when used within classes which is quite useful.

For example, this is a great use of an arrow function:

Multi-line:

const log = (msg) => {
  console.log(msg);
};

Single line:

const log = (msg) => console.log(msg);

Concatenating Strings

Before ES6, concatenating strings within JavaScript was a pain and looked very messy, you ended up with +’s everywhere which made the strings hard to read for the engineers. ES6 introduced the template strings, which allow us to use backticks (`) to denote a string. We can then inject variables using ${variableName}. Take the following example:

var organisationName = 'Built By Cactus';
var jobRole = 'Engineer';
var message = 'Hello ' + organisationName + ' ' + jobRole + '. Do you love strings?';

with ES6 template strings, that can be re-written as:

const organisationName = 'Built By Cactus';
const jobRole = 'Engineer';
const message = `Hello ${organisationName} ${jobRole}. Do you love strings?`;

As you can see, the second version is a lot more readable.

Destructuring

This is a great feature that ES6 brought along. It allows us to extract data from an array or object, directly into a variable. The ability to do this gives us a great boost to readability.

The old way with arrays:

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];

The new way with arrays:

const [a, b, c, d] = [1, 2, 3, 4];

The old way with objects:

var obj = {
  organisationName: "Built By Cactus",
  position: "Engineer",
  year: 2020,
};

var organisationName = obj.organisationName;
var position = obj.position;
var year = obj.year;

The new way with objects:

const obj = {
  organisationName: "Built By Cactus",
  position: "Engineer",
  year: 2020,
};

const {
  organisationName,
  position,
  year,
} = obj;

Code Style

Writing readable and maintainable JavaScript is just as important as writing readable and maintainable PHP. For that reason, we have a set number of configurations that should be used for all JS work. You can find them here in the .eslintrc file.

Linting

ESLint is built into most IDEs these days, but it’s still a good tool to use standalone, especially when it comes to CI servers. Installing ESLint is east using NPM and the instructions can be found here.

Once installed, you can run ESLint from the command line using eslint.

A better way of using it is via your package.json file. You can add custom scripts that will allow you to run it easily. Just add the following to the scripts section of your package.json file:

"lint": "npx eslint . --ext .js,.jsx,.ts,.tsx"

You can then run npm run lint and it will lint all of your JavaScript and TypeScript files.

You may also ignore files from linting by placing an .eslintignore file alongside your .eslintrc file. This file follows the same format as a .gitignore file. You should probably always have at least node_modules in your.eslintignore file

Engineering Handbook