Javascript

Linter

We use ESLint with JavaScript Standard Style for the style of JS code on all of our projects.

React/Redux

This is our main JS technology. We aim for dynamic and interactive pages with great scalability and easy debugging.

File Structure

We manage a very natural file structure based on views for all of React - Redux code.

 - actions
	 - view_1
		 - index.js: exports all actions creators.
		 - types.js: contains all of actions strings.
		 - group_of_actions_for_view_1.js
		 - group_of_actions_for_view_2.js
	 - view 2
- components
	 - view_1
	 - view_2
	 - shared: all generic shared components.
 - containers
 - reducers
	 - view_1
	 - view_2
	 - entities.js
 - stores
 - utils
 - constants.js

Async requests

Server requests and responses are based on the Json Api specification. The responses are then processed with jsonapi-normalizr for a much natural reading process.

We prefer to use Axios for the requests, but in some places we use jQuery Ajax (only if jQuery is already loaded on the project).

To manage Redux async requests we use redux-thunk as suggested by the documentation.

Testing

We use Jest with Enzyme for our testing.

We separate our testing files in views too. Actions, components and reducers are tested. Test filenames end with .test.js ; this to tell Jest to only test those that end in .test.js and not helpers files such as data and mocks. To configure this, use:

"testRegex": "path_to_tests/.*\\.(spec|test)\\.(js|jsx)$",