2020-10-30 18:08:56 +00:00
---
stage: none
group: unassigned
2020-11-26 06:09:20 +00:00
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
2020-10-30 18:08:56 +00:00
---
2017-03-22 19:30:54 +00:00
# Frontend Development Guidelines
This document describes various guidelines to ensure consistency and quality
2020-12-17 00:09:53 +00:00
across the GitLab frontend team.
2017-03-22 19:30:54 +00:00
## Overview
2021-01-25 21:09:03 +00:00
GitLab is built on top of [Ruby on Rails ](https://rubyonrails.org ). It uses [Haml ](https://haml.info/ ) and a JavaScript0based frontend with [Vue.js ](https://vuejs.org ).
2020-04-21 15:21:10 +00:00
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-04-19 18:36:17 +00:00
2020-03-10 00:08:12 +00:00
Working with our frontend assets requires Node (v10.13.0 or greater) and Yarn
2019-01-10 17:35:01 +00:00
(v1.10.0 or greater). You can find information on how to install these on our
2020-04-21 15:21:10 +00:00
[installation guide ](../../install/installation.md#4-node ).
2017-03-22 19:30:54 +00:00
### Browser Support
2021-01-25 21:09:03 +00:00
For supported browsers, see our [requirements ](../../install/requirements.md#supported-web-browsers ).
2017-03-22 19:30:54 +00:00
2020-07-02 15:09:08 +00:00
Use [BrowserStack ](https://www.browserstack.com/ ) to test with our supported browsers.
2020-12-17 00:09:53 +00:00
Sign in to BrowserStack with the credentials saved in the **Engineering** vault of the GitLab
2020-07-02 15:09:08 +00:00
[shared 1Password account ](https://about.gitlab.com/handbook/security/#1password-guide ).
2019-08-12 23:40:09 +00:00
2019-03-14 08:19:13 +00:00
## Initiatives
Current high-level frontend goals are listed on [Frontend Epics ](https://gitlab.com/groups/gitlab-org/-/epics?label_name%5B%5D=frontend ).
2020-03-02 15:08:01 +00:00
## Principles
2019-03-14 08:19:13 +00:00
2020-03-02 15:08:01 +00:00
[High-level guidelines ](principles.md ) for contributing to GitLab.
2019-03-14 08:19:13 +00:00
2020-03-02 15:08:01 +00:00
## Development Process
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
How we [plan and execute ](development_process.md ) the work on the frontend.
2017-03-22 19:30:54 +00:00
2020-03-02 15:08:01 +00:00
## Architecture
2019-02-13 14:43:19 +00:00
2020-12-17 00:09:53 +00:00
How we go about [making fundamental design decisions ](architecture.md ) in the GitLab frontend team
2017-03-22 19:30:54 +00:00
or make changes to our frontend development guidelines.
2020-03-02 15:08:01 +00:00
## Testing
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
How we write [frontend tests ](../testing_guide/frontend_testing.md ), run the GitLab test suite, and debug test related
2017-03-22 19:30:54 +00:00
issues.
2019-10-13 21:06:13 +00:00
## Pajamas Design System
Reusable components with technical and usage guidelines can be found in our
[Pajamas Design System ](https://design.gitlab.com/ ).
2020-03-02 15:08:01 +00:00
## Design Patterns
2019-02-13 14:43:19 +00:00
2020-12-17 00:09:53 +00:00
Common JavaScript [design patterns ](design_patterns.md ) in the GitLab codebase.
2017-03-22 19:30:54 +00:00
2020-03-02 15:08:01 +00:00
## Vue.js Best Practices
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
Vue specific [design patterns and practices ](vue.md ).
2017-03-22 19:30:54 +00:00
2020-03-02 15:08:01 +00:00
## Vuex
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
[Vuex ](vuex.md ) specific design patterns and practices.
2018-03-22 10:50:52 +00:00
2020-03-02 15:08:01 +00:00
## Axios
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
[Axios ](axios.md ) specific practices and gotchas.
2017-10-23 12:07:44 +00:00
2020-03-02 15:08:01 +00:00
## GraphQL
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
How to use [GraphQL ](graphql.md ).
2018-11-28 10:00:03 +00:00
2020-03-02 15:08:01 +00:00
## Icons and Illustrations
2019-02-13 14:43:19 +00:00
2020-03-02 15:08:01 +00:00
How we use SVG for our [Icons and Illustrations ](icons.md ).
## Dependencies
General information about frontend [dependencies ](dependencies.md ) and how we manage them.
2017-09-22 08:39:47 +00:00
2020-10-12 15:08:32 +00:00
## Keyboard Shortcuts
How we implement [keyboard shortcuts ](keyboard_shortcuts.md ) that can be customized and disabled.
2019-04-16 15:22:05 +00:00
## Frontend FAQ
Read the [frontend's FAQ ](frontend_faq.md ) for common small pieces of helpful information.
2017-03-22 19:30:54 +00:00
## Style Guides
2019-11-29 18:06:24 +00:00
See the relevant style guides for our guidelines and for information on linting:
2017-03-22 19:30:54 +00:00
2019-11-29 18:06:24 +00:00
- [JavaScript ](style/javascript.md ). Our guide is based on
2020-04-21 15:21:10 +00:00
the excellent [Airbnb ](https://github.com/airbnb/javascript ) style guide with a few small
2017-03-22 19:30:54 +00:00
changes.
2020-04-04 09:09:16 +00:00
- [SCSS ](style/scss.md ): our SCSS conventions which are enforced through [`scss-lint` ](https://github.com/sds/scss-lint ).
2019-11-29 18:06:24 +00:00
- [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-03-22 19:30:54 +00:00
2020-02-13 06:09:07 +00:00
## [Tooling](tooling.md)
2017-03-22 19:30:54 +00:00
2019-11-29 18:06:24 +00:00
Our code is automatically formatted with [Prettier ](https://prettier.io ) to follow our guidelines. Read our [Tooling guide ](tooling.md ) for more detail.
2017-03-22 19:30:54 +00:00
## [Performance](performance.md)
2019-02-13 14:43:19 +00:00
2017-03-22 19:30:54 +00:00
Best practices for monitoring and maximizing frontend performance.
## [Security](security.md)
2019-02-13 14:43:19 +00:00
2017-03-22 19:30:54 +00:00
Frontend security practices.
## [Accessibility](accessibility.md)
2019-02-13 14:43:19 +00:00
2017-03-22 19:30:54 +00:00
Our accessibility standards and resources.
2017-10-24 04:16:57 +00:00
## [Internationalization (i18n) and Translations](../i18n/externalization.md)
2019-02-13 14:43:19 +00:00
2017-10-24 04:16:57 +00:00
Frontend internationalization support is described in [this document ](../i18n/ ).
The [externalization part of the guide ](../i18n/externalization.md ) explains the helpers/methods available.
