Client Overview
The front-end JavaScript code is located under the client directory in the root of the repository.
The production code is all under client/src/main.
The unit tests are located in a mirrored folder hierarchy under client/src/test.
Each stand-alone component of software in the front-end code exists as an angular module.
Each angular module is located in its own folder under client/src/main/webjar.
Each angular module has unit tests located in a folder under client/src/test/webjar.
A module consists of a mix of *.js, *.html, and *.scss files.
One component is created per file.
The contents of each module should be kept to a minimum to avoid circular dependencies,
keep components simple, and maximize code reuse.
By convention, module names should be camelCased, but file names should be kabob-cased.
For module someName in a folder with the name some-name:
- A module and its dependencies is created in a file named
some-name.module.js. - A route is defined in a file named
some-name.route.js. - A component is defined in a file named
some-name.component.js. - A service is defined in a file named
some-name.service.js. - HTML template exists in a file named
some-name.html. - SASS/CSS styling exists in a file named
some-name.scss.
The modules must be defined in a *.module.js file in order to be defined before
they are used.
The gulp build includes module files before others to guarantee they are defined before usages.
Code quality and consistency is guaranteed through the use of ESLint.
Strict ESLint configuration is set in the eslintConfig variable inside client/package.json.
While many of the settings are merely style preferences, the team thought it was important
for the future development of the project to establish strict guidelines early to ensure
a consistent coding style no matter which current or future developers work on the project.
The gulp build process runs the ESLint rules against the front-end code to ensure any deviations from the established coding style are identified and corrected before they can be introduced into the codebase.
All parts of the front-end code are unit tested with a suite of Jasmine tests. The gulp build process runs the jasmine unit tests with Karma to ensure any incorrect code is caught early before being introduced to the codebase.
Unit test files should be named the same as the name of the component being tested,
but ending in *.spec.js.
So a component named client/src/main/webjar/some-name/some-name.component.js
should be tested in a file named
client/src/test/webjar/some-name/some-name.component.spec.js.
Only tests in files with the *.spec.js pattern will be ran by the build.