Version 4 supported
This version of Silverstripe CMS is still supported though will not receive any additional features. Go to documentation for the most recent stable version.

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.

Related

Edit on Github