Development Introduction

HPC-Cloud relies heavily on these libaries:

Front-End

In the /src folder there are several folders:

  • config: react-router routes config
  • network: network stack
  • pages: app pages for react-router, each folder is a mapped to a route in config/routes.js. e.g. /pages/Simulation/View maps to [hostname]/view/simulation/[some simulation id]
  • panels: comming, reusable panels for use throughout the application
  • redux: redux data flow and store
  • tools: react wrappers for external tools
  • utils: various helpers
  • widgets: similar to panels but more simple
  • workflows: simultion workflows

To get started with development on the front end, in your HPC-Cloud directory run:

# installs dependancies
npm install

# runs a webpack-dev server on localhost:9999.
npm start

Dev tools

HPC-Cloud is written in ES6 it’s transpiled into ES5 with Babel.

Style

ESLint ensures that code style is followed and adhered to, we’re extending Airbnb’s rules. Webpack will throw errors if something is wrong. The basics are:

  • Tab width is two spaces.
  • No line padding at the beginning or end of a function.
  • var must be declared at the top of the scope, use const or let otherwise.
  • Spaces surround properties in objects, also one space before the value e.g. { foo: bar };
  • Comma after the final property in objects which are declared over multiple lines.
  • Open brackets are on the same line as the declaration. e.g. function qux() { \n
  • Anonymous functions must be ES6 arrow function.
  • String concatenation must be ES6 string templates.

Test tools

For a full overview of testing consult /test/README.md.