debian-mirror-gitlab/doc/development/fe_guide/index.md

114 lines
3.9 KiB
Markdown
Raw Normal View History

2017-08-17 22:00:37 +05:30
# Frontend Development Guidelines
This document describes various guidelines to ensure consistency and quality
across GitLab's frontend team.
## Overview
2020-05-24 23:13:21 +05:30
GitLab is built on top of [Ruby on Rails](https://rubyonrails.org) using [Haml](http://haml.info/) and also a JavaScript based Frontend with [Vue.js](https://vuejs.org).
Be wary of [the limitations that come with using Hamlit](https://github.com/k0kubun/hamlit/blob/master/REFERENCE.md#limitations). We also use [SCSS](https://sass-lang.com) and plain JavaScript with
modern ECMAScript standards supported through [Babel](https://babeljs.io/) and ES module support through [webpack](https://webpack.js.org/).
2018-10-15 14:42:47 +05:30
2020-04-08 14:13:33 +05:30
Working with our frontend assets requires Node (v10.13.0 or greater) and Yarn
2019-03-02 22:35:43 +05:30
(v1.10.0 or greater). You can find information on how to install these on our
2020-05-24 23:13:21 +05:30
[installation guide](../../install/installation.md#4-node).
2017-08-17 22:00:37 +05:30
### Browser Support
2020-05-24 23:13:21 +05:30
For our currently-supported browsers, see our [requirements](../../install/requirements.md#supported-web-browsers).
2017-08-17 22:00:37 +05:30
2020-07-28 23:09:34 +05:30
Use [BrowserStack](https://www.browserstack.com/) to test with our supported browsers.
Sign in to BrowserStack with the credentials saved in the **Engineering** vault of GitLab's
[shared 1Password account](https://about.gitlab.com/handbook/security/#1password-guide).
2019-10-12 21:52:04 +05:30
2019-07-07 11:18:12 +05:30
## Initiatives
Current high-level frontend goals are listed on [Frontend Epics](https://gitlab.com/groups/gitlab-org/-/epics?label_name%5B%5D=frontend).
2020-04-08 14:13:33 +05:30
## Principles
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
[High-level guidelines](principles.md) for contributing to GitLab.
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
## Development Process
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
How we [plan and execute](development_process.md) the work on the frontend.
2017-08-17 22:00:37 +05:30
2020-04-08 14:13:33 +05:30
## Architecture
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
How we go about [making fundamental design decisions](architecture.md) in GitLab's frontend team
2017-08-17 22:00:37 +05:30
or make changes to our frontend development guidelines.
2020-04-08 14:13:33 +05:30
## Testing
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
How we write [frontend tests](../testing_guide/frontend_testing.md), run the GitLab test suite, and debug test related
2017-08-17 22:00:37 +05:30
issues.
2019-12-21 20:55:43 +05:30
## Pajamas Design System
Reusable components with technical and usage guidelines can be found in our
[Pajamas Design System](https://design.gitlab.com/).
2020-04-08 14:13:33 +05:30
## Design Patterns
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
Common JavaScript [design patterns](design_patterns.md) in GitLab's codebase.
2017-08-17 22:00:37 +05:30
2020-04-08 14:13:33 +05:30
## Vue.js Best Practices
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
Vue specific [design patterns and practices](vue.md).
2017-08-17 22:00:37 +05:30
2020-04-08 14:13:33 +05:30
## Vuex
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
[Vuex](vuex.md) specific design patterns and practices.
2017-08-17 22:00:37 +05:30
2020-04-08 14:13:33 +05:30
## Axios
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
[Axios](axios.md) specific practices and gotchas.
2018-03-17 18:26:18 +05:30
2020-04-08 14:13:33 +05:30
## GraphQL
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
How to use [GraphQL](graphql.md).
2019-02-15 15:39:39 +05:30
2020-04-08 14:13:33 +05:30
## Icons and Illustrations
2019-07-07 11:18:12 +05:30
2020-04-08 14:13:33 +05:30
How we use SVG for our [Icons and Illustrations](icons.md).
## Dependencies
General information about frontend [dependencies](dependencies.md) and how we manage them.
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
## Frontend FAQ
Read the [frontend's FAQ](frontend_faq.md) for common small pieces of helpful information.
2017-08-17 22:00:37 +05:30
## Style Guides
2020-01-01 13:55:28 +05:30
See the relevant style guides for our guidelines and for information on linting:
2017-08-17 22:00:37 +05:30
2020-01-01 13:55:28 +05:30
- [JavaScript](style/javascript.md). Our guide is based on
2020-05-24 23:13:21 +05:30
the excellent [Airbnb](https://github.com/airbnb/javascript) style guide with a few small
2017-08-17 22:00:37 +05:30
changes.
2020-04-22 19:07:51 +05:30
- [SCSS](style/scss.md): our SCSS conventions which are enforced through [`scss-lint`](https://github.com/sds/scss-lint).
2020-01-01 13:55:28 +05:30
- [HTML](style/html.md). Guidelines for writing HTML code consistent with the rest of the codebase.
- [Vue](style/vue.md). Guidelines and conventions for Vue code may be found here.
2017-08-17 22:00:37 +05:30
2020-03-13 15:44:24 +05:30
## [Tooling](tooling.md)
2017-08-17 22:00:37 +05:30
2020-01-01 13:55:28 +05:30
Our code is automatically formatted with [Prettier](https://prettier.io) to follow our guidelines. Read our [Tooling guide](tooling.md) for more detail.
2017-08-17 22:00:37 +05:30
## [Performance](performance.md)
2019-07-07 11:18:12 +05:30
2017-08-17 22:00:37 +05:30
Best practices for monitoring and maximizing frontend performance.
## [Security](security.md)
2019-07-07 11:18:12 +05:30
2017-08-17 22:00:37 +05:30
Frontend security practices.
## [Accessibility](accessibility.md)
2019-07-07 11:18:12 +05:30
2017-08-17 22:00:37 +05:30
Our accessibility standards and resources.
2018-03-17 18:26:18 +05:30
## [Internationalization (i18n) and Translations](../i18n/externalization.md)
2019-07-07 11:18:12 +05:30
2018-03-17 18:26:18 +05:30
Frontend internationalization support is described in [this document](../i18n/).
The [externalization part of the guide](../i18n/externalization.md) explains the helpers/methods available.