Skip to main content

Javascript coding standards

IE non-standard Javascript​

We are targeting ES6 as we are using React which targets ES6.

This is a compatability chart for ES6

http://kangax.github.io/compat-table/es6/

As you can see, IE11 has very bad support. However since we are using compilers we should not worry too much about IE compatablity issues.

(this contradicts my earlier statements)

General javascript​

  • Stop using global variables var, start using let, const

React​

General React​

  • Do not assign self to this (self = this) - this means you are binding or calling your methods incorrectly

Mutating state and props directly​

Mutating (changing) this.state in React components without using this.setState will cause various issues.

Do not:

this.state = {foo: 'bar'};

This is very poor practice and is to be avoided at all costs.

Do:

this.setState({foo: 'bar'});

When to break this rule​

In the constructor you can set state directly.

This is acceptable:

constuctor(props) {
    super(props);
    this.state = {
        foo: 'bar'
    };
}

Do not mutate state inside of methods which render the DOM​

This will cause an endless loop and client's browser will crash.

Do not:

doSomething() {
    this.AJAX_REQUEST(url, (res) => {
        this.setState({
            foo: res.data.foo
        });
    });
}

render() {
    this.doSomething();
    return (
        <div>
            {this.state.foo}
        </div>
    );
}

Do:

componentDidMount() {
    this.AJAX_REQUEST(url, (res) => {
        this.setState({
            foo: res.data.foo
        });
    });
}

render() {
    return (
        <div>
            {this.state.foo}
        </div>
    );
}

Event listeners​

You should generally avoid setting event listeners on the dom directly when using React, but its required in various locations throughout our codebase due to the fact that we are interacting with legacy code.

Try not to mix Jquery with React, instead use naitive javascript where possible.

document.getElementById("foo").addEventListener("click", this.bar);

Make sure that you unbind your events in componentWillUnmount:

document.getElementById("foo").removeEventListener("click", this.bar);

Global methods attached to the window​

Here's an example of what i would like to see us start doing (injecting things from window into react components as props):

ReactDOM.render(
    <PowrPricing
      selectedAppName={options.app_name}
      selectedAppType={options.app_type}
      selectedPlan={options.plan}
      planType={options.plantype}
      renderType={renderType}
      currentUser={window.CURRENT_USER}
      appModel={window.APP_MODEL}
      discountID={window.META ? window.META.discount_id : null}
    />,
    $(selector)[0]
);

Binding methods​

Good (preferred by me):

class FooBar extends React {
    constructor(props) {
        this.foobar = this.foobar.bind(this);
    }

    foobar() {}
}

Does same thing, also considered good (by the internet, not me)

class FooBar extends React {
    foobar = () => {

    }
}

Does same thing, considered bad, but people use it (including me when i'm being stupid)

class FooBar extends React {
    foobar() {}

    render() {
        return (
            <a click={this.foobar.bind(this)}>asdf</a>
        );
    }
}

Works and does same thing, but considered bad

class FooBar extends React {
    render() {
        return (
            <a click={() => {

            }}>asdf</a>
        );
    }
}

Documentation​

There should be no need for heavily documented code. Your code should be clean and concise to the point that documentation looks like clutter. If you find yourself writing documentation, something has gone wrong somwhere.

Variable, prop, function naming​

The name of your variables, props and functions should be descriptive enough that someone can easily deciper their meaning within the context of the code.

Use prop types instead of writing down a list of props and what they do​

PropTypes should be all the info anyone should need when it comes to passing in props.

https://reactjs.org/docs/typechecking-with-proptypes.html

Stop adding author documentation to the top of your file​

This is an old-school practice. We have git now - please don't clutter the files with this type of documentation.

Look out for deprecated methods​

These methods are all depreacted but we're still using them:

https://hackernoon.com/problematic-react-lifecycle-methods-are-going-away-in-react-17-4216acc7d58b

Non-react front-end javacript​

I suggest having a look at this book:

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Although the syntax is outdated, the patterns it describes are applicable to many different languages. If we are going to continue to write non-react javascript we need to start following some of these patterns so that we are not creating loads of global variables and functions that are attached to the window.

There are most likely even better resources for javascript patterns, but the way those patterns are written was easy for me to understand.

Node​

Have a look at the social feed node files that i created -- these are good examples of how to write modern class based javascript in Node.