2017-03-22 15:30:54 -04:00
# Frontend Development Guidelines
This document describes various guidelines to ensure consistency and quality
across GitLab's frontend team.
## Overview
2019-09-27 08:06:07 -04:00
GitLab is built on top of [Ruby on Rails ](https://rubyonrails.org ) using [Haml][haml] and also a JavaScript based Frontend with [Vue.js ](https://vuejs.org ).
Be wary of [the limitations that come with using Hamlit][hamlit-limits]. We also use [SCSS ](https://sass-lang.com ) and plain JavaScript with
2018-04-19 14:36:17 -04:00
modern ECMAScript standards supported through [Babel][babel] and ES module support through [webpack][webpack].
2019-01-10 12:35:01 -05:00
Working with our frontend assets requires Node (v8.10.0 or greater) and Yarn
(v1.10.0 or greater). You can find information on how to install these on our
2017-03-22 15:30:54 -04:00
[installation guide][install].
### Browser Support
For our currently-supported browsers, see our [requirements][requirements].
2019-08-12 19:40:09 -04:00
Use [BrowserStack ](https://www.browserstack.com/ ) to test with our supported browsers. Login to BrowserStack with the credentials saved in GitLab's [shared 1Password account ](https://about.gitlab.com/handbook/security/#1password-for-teams ).
2019-03-14 04:19:13 -04:00
## Initiatives
Current high-level frontend goals are listed on [Frontend Epics ](https://gitlab.com/groups/gitlab-org/-/epics?label_name%5B%5D=frontend ).
## [Principles](principles.md)
High-level guidelines for contributing to GitLab.
2018-04-19 14:36:17 -04:00
## [Development Process](development_process.md)
2019-02-13 09:43:19 -05:00
2018-04-19 14:36:17 -04:00
How we plan and execute the work on the frontend.
2017-03-22 15:30:54 -04:00
## [Architecture](architecture.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
How we go about making fundamental design decisions in GitLab's frontend team
or make changes to our frontend development guidelines.
2017-10-11 01:59:34 -04:00
## [Testing](../testing_guide/frontend_testing.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
How we write frontend tests, run the GitLab test suite, and debug test related
issues.
## [Design Patterns](design_patterns.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
Common JavaScript design patterns in GitLab's codebase.
## [Vue.js Best Practices](vue.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
Vue specific design patterns and practices.
2018-03-22 06:50:52 -04:00
## [Vuex](vuex.md)
2019-02-13 09:43:19 -05:00
2018-03-22 06:50:52 -04:00
Vuex specific design patterns and practices.
2017-11-20 04:57:08 -05:00
## [Axios](axios.md)
2019-02-13 09:43:19 -05:00
2017-11-20 04:57:08 -05:00
Axios specific practices and gotchas.
2017-10-23 08:07:44 -04:00
2018-11-28 05:00:03 -05:00
## [GraphQL](graphql.md)
2019-02-13 09:43:19 -05:00
2018-11-28 05:00:03 -05:00
How to use GraphQL
2018-05-27 15:21:12 -04:00
## [Icons and Illustrations](icons.md)
2019-02-13 09:43:19 -05:00
2018-05-27 15:21:12 -04:00
How we use SVG for our Icons and Illustrations.
2017-09-22 04:39:47 -04:00
2018-02-14 04:16:04 -05:00
## [Components](components.md)
How we use UI components.
2019-04-16 11:22:05 -04:00
## Frontend FAQ
Read the [frontend's FAQ ](frontend_faq.md ) for common small pieces of helpful information.
2017-03-22 15:30:54 -04:00
## Style Guides
### [JavaScript Style Guide](style_guide_js.md)
2019-02-13 09:43:19 -05:00
We use eslint to enforce our JavaScript style guides. Our guide is based on
2017-03-22 15:30:54 -04:00
the excellent [Airbnb][airbnb-js-style-guide] style guide with a few small
changes.
### [SCSS Style Guide](style_guide_scss.md)
2019-09-27 08:06:07 -04:00
Our SCSS conventions which are enforced through [scss-lint ](https://github.com/sds/scss-lint ).
2017-03-22 15:30:54 -04:00
## [Performance](performance.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
Best practices for monitoring and maximizing frontend performance.
## [Security](security.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
Frontend security practices.
## [Accessibility](accessibility.md)
2019-02-13 09:43:19 -05:00
2017-03-22 15:30:54 -04:00
Our accessibility standards and resources.
2017-10-24 00:16:57 -04:00
## [Internationalization (i18n) and Translations](../i18n/externalization.md)
2019-02-13 09:43:19 -05:00
2017-10-24 00:16:57 -04:00
Frontend internationalization support is described in [this document ](../i18n/ ).
The [externalization part of the guide ](../i18n/externalization.md ) explains the helpers/methods available.
2017-03-22 15:30:54 -04:00
[haml]: http://haml.info/
[hamlit]: https://github.com/k0kubun/hamlit
[hamlit-limits]: https://github.com/k0kubun/hamlit/blob/master/REFERENCE.md#limitations
[babel]: https://babeljs.io/
[webpack]: https://webpack.js.org/
[jquery]: https://jquery.com/
2018-02-15 18:19:54 -05:00
[axios]: https://github.com/axios/axios
2017-03-22 15:30:54 -04:00
[airbnb-js-style-guide]: https://github.com/airbnb/javascript
[install]: ../../install/installation.md#4-node
[requirements]: ../../install/requirements.md#supported-web-browsers