Crossref Front End Framework

Our framework for building new browser-based user interfaces. Built with Vue.js framework, on Vuetify component framework. New components can be built within this framework and then included into places where needed.

Targetted Browsers

We follow Vuetify’s browser support policy, which is currently:

We include the polyfill for IE11/Safari 9, and note the caveat relating to IE 11 <template> tag support.

Coding Style

JavaScript should be written to ES6 (ECMAScript 2015) specification where possible, and transpiled during a build step to code runable on all targetted browsers. JavaScript should adhere to the Javascript Standard Style (style guide, linter and formatter). Vue components should be built as Single File Components. Code should be transpiled using Babel and bundled (built) with webpack.

Linting

Code can be linted with ESLint, using an .eslintrc configuration file that extends the “standard” ruleset. An example of this can be found in the Frontend project repo.

Run eslint with eslint --ext .js,.vue src to check all .js or .vue files within the src/ directory.

Run eslint with eslint --fix --ext .js,.vue src to check and fix the same

In the Frontend VueJS project repo, the vue CLI service lint command is configured to run ESLint with --fix enabled against the Standard Style ruleset, and an extra ruleset that checks for deviations from the recommended VueJS component style guide.

Run Vue CLI lint with npm run lint to check and fix all .js and .vue files within the Vue project.

When running the project with npm run serve, lint on save is enabled by default. This can be controlled by the lintOnSave paramter within vue.config.js.

Testing

Unit tests should be written to target the Jest test runner.

Unit tests targetting Vue components should use the Vue Test Utils.

Intergration tests should be written to for Cypress.

Mocking endpoints

Endpoint responses can be mocked using Jest’s manual mocks, a lightweight service like json-server or MirageJS.

When creating manual mocks, use mockResolvedValue for returning simple values, or mockImplementation for more complex cases.

Json-server and MirageJS let you fake an entire API, and use it during development as well as while running tests (including Cypress tests). MirageJS has the advantage of running entirely within the app (it hijacks XHRs) and json-server has the advantage that it simulate the real network conditions of requesting an API exposed on a different domain/port (which allows you to test things like CORS).