JavaScript coding conventions#

Overview#

This document provides guidelines for code formatting to developers contributing to Silverstripe. It applies to all JavaScript files in the framework/ and cms/ modules.

In 2016, Silverstripe started a rewrite of its CMS interface in ES6 and ReactJS. Code written prior to this rewrite might not follow these conventions, and is placed in a legacy/ folder structure.

NPM packages#

Silverstripe authored npm dependencies are posted under the Silverstripe npm organisation.

Browser support#

Check our requirements documentation.

Conventions#

We follow the AirBnB JavaScript Conventions, as well as the AirBnB React Conventions. A lot of their rules can be validated via ESLint, and can be checked locally via yarn run lint.

Spelling#

All symbols and documentation should use UK-English spelling (e.g. "behaviour" instead of "behavior"), except when necessitated by third party conventions (e.g. using "color" for CSS styles).

File and folder naming#

  • All frontend files (CSS, JavaScript, images) should be placed in a client/ folder on the top level of the module
  • Frontend files relating to the framework CMS UI should be placed in admin/client
  • File names should follow the AirBnB Naming Conventions
  • The client/src/components folder should contain only React presentational components. These components should be self-contained, and shouldn't know about Redux state.
  • The client/src/containers folder should contain only React container components
  • React classes in client/src/components and client/src/containers should have one folder per component, alongside a README.md and SCSS files where applicable.
  • The client/src/state folder should contain Redux actions, action types and reducers. Each set of these should be kept in a folder named the same as its reducer state key.
  • JavaScript tests should be named after the module/class they're testing, with their file name suffixed with -tests.js.
  • JavaScript tests should be placed in a tests/ subfolder alongside the module code.