Crossref Front End Framework
Component | |
Area | tools-libraries |
Product Manager / Owner | rmasih |
Tech Lead | Joe Wass |
Language | Vue |
Description | Crossref Front End Framework |
Production URLs | |
Quality | No Sentry, no SONAR |
Source Code |
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:
Browser | Support Status |
---|---|
Chromium (Chrome, Edge Insider) | Supported |
Edge | Supported |
Firefox | Supported |
Safari 10+ | Supported |
IE11/Safari 9 | Supported with polyfill |
IE 10 and below | Not Supported |
Safari 8 and below | Not Supported |
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).