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.