MyCrossref Frontend

MyCrossref Frontend

Component
Area greenfield
Product Manager / Owner Sara Bowman
Tech Lead Patrick Vale
Language Vue
Description MyCrossref Frontend
Production URLs
Quality No Sentry, no SONAR
Source Code

The Frontend for my.crossref.org, which houses all our greenfield user interfaces. Built with Vue.js, using the Vuetify UI library.

Project Boilerplate

For the latest boilerplate for frontend code, head to the repo on Gitlab, and checkout either crossref-template for a project with Vue, Vuetify, Jest, Cypress and ESLint setup, or crossref-template-json-forms for the same but with JSON Forms intergated too.

Targetted Browsers

We follow Vuetify’s browser support policy, with the caveat that we do not support IE11 or Safari 9 and below:

Browser Support Status
Chromium (Chrome, Edge Insider) Supported
Edge Supported
Firefox Supported
Safari 10+ Supported
IE11/Safari 9 Not Supported
IE 10 and below Not Supported
Safari 8 and below Not Supported

Coding Style

Code should be written in typescript and should adhere to the Typescript Standard Style. When integrating existing JavaScript code, serious consideration should be given to finding a Typescript alternative, or porting the code.

For the avoidance of doubt, JavaScript should be written to ES6 (ECMAScript 2015) specification where possible, and transpiled during a build step to code runnable on all targeted 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 project repo.

The Vue CLI command lint 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 npm run lint to check and fix *.(ts|js|vue) within the project.

When running the project with npm run serve, lint on save is enabled by default. Sometimes this can cause trouble if you encounter bug in the typing system - a type error can cause failed compilation. If you want to turn this off so you can get on with debugging, it 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 targeting Vue components should use the Vue Test Utils. Testing library also welcome.

Intergration tests should be written with 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.

We’ve moved on from JSON-server and MirageJS to use Mock Service Worker to scaffold mocked APIs which can be used in development and testing. MSW works by intercepting requests at the network level - by a service worker in the browser, and node-request-interceptor when running under node (eg unit tests).

To debug MSW, check the brower’s console and network log.

Environment-specific configuration

Some configuration properties or values required by the framework will differ, based on which environment it is deployed into.

Env-specific variables will be injected at build time, via the Vue .env file handler, for sandbox, staging and production.