Hyvejs-components NPM

Hyve Javascript Style Guide and Discussion Board

A mostly reasonable approach to JavaScript from airbnb

Linting

We use ESLint to ensure our code is idiomatic and conforms with globally recognized standards

After initializing each app, first install the required packages locally.

yarn add -D babel-eslint@7.2.3 eslint@4.5.0 eslint-config-airbnb@15.1.0 eslint-plugin-babel@4.1.2 eslint-plugin-import@2.7.0 eslint-plugin-jsx-a11y@5.1.1 eslint-plugin-react@7.1.0

That will populate the package.json with the following development dependencies:

"devDependencies": {
  "babel-eslint": "7.2.3",
  "eslint": "4.5.0",
  "eslint-config-airbnb": "15.1.0",
  "eslint-plugin-babel": "4.1.2",
  "eslint-plugin-import": "2.7.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.1.0"
}

Finally download the .eslintrc file to the root for the latest agreed upon custom rules by Hyve's JS team.

wget https://bitbucket.org/onnet/javascript/raw/626ae7ca1cf8240dc771f1f7c7145e1e5831285d/.eslintrc

Standards

Security

JWT Token Storage. What's the best method?

https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

Version Control

As a standard Hyve extends Vincent Driessen's GitFlow, with additions. GitFlow and Hyve's additions are explained briefly below:

Smart Commits

If your commit relates to a particular JIRA task, then add the task ID into the commit for tracking purposes. eg:

$ git commit -m "[SRM-98]: This is my commit message"

Group Tokens

Use pre-defined "grouping" tokens in front of your branch names. eg:

feature/api-authentication
hotfix/user-control-dropdown
release/rc-4.2
suggestion/model-user

Branch Naming

Feature Branch

eg: feature/branch-name

Contains a large, fully spec'd, addition to the codebase. Always merge through a Pull Request.

Suggestion Branch

eg: suggestion/branch-name

Useful when making suggestions as to a better/more efficient way to adapt the architecture of a particular piece of code in the application. Use the PR as a place to discuss the suggestion. Always merge through a Pull Request.

Hotfix Branch

eg: hotfix/branch-name

Used when making emergency changes to the codebase while ensuring that only the master branch will be effected. Important to rebase master into your local feature and suggestion branches after a hotfix was deployed. version tag

Develop Branch

Always: develop

contains the latest accepted but untested features or suggestions as spec'd by the team for a particular version.

Release Branch

eg: release/rc-1.4

The release candidate branch to be deployed on staging for testing and scrutiny before merging into master. This should contain the untested code in develop and always append the version number being tested. version tag

Master Branch

Always: master

The latest tested, stable and deployable code. Only hotfixes are merged directly into master. version tag

Dependencies

Webpack

We use Webpack and Babel to bundle and compile our code. (In order for us to use modern Javascript syntax, we need to convert it to an old version of Javascript that can be executed in the browser.) The following dependencies are needed for minimal configuration.

webpack
webpack-dev-server
html-webpack-plugin - simplifies creation of HTML files to serve webpack bundles
babel-core
babel-loader
babel-preset-env - improvement upon babel-preset-es2015
babel-preset-react

For any additional styling (css and sass) imports additional loaders are required:
css-loader
extract-text-webpack-plugin
sass-loader
style-loader
node-sass

React

The following packages are required for React:
react
react-dom

Scripts

npm start - launch the webpack dev server npm run build - transpile src code

Publishing to NPM

When publishing to NPM we only want to publish our lib folder. Usually, Node will look for a main file within the
module folder called index.js, therefor it is necessary to override this behaviour. To specify an alternative path,
update package.json to contain a key named main that specifies the path to the main file.