silverstripe-framework/docs/en/05_Contributing/12_JavaScript_Coding_Conventions.md
2017-03-10 11:59:38 +13:00

2.6 KiB

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.

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.