> We are currently in the process of re-writing our development guide to make it easier to find information. The new guide is still WIP but viewable in [development/new_fe_guide](../new_fe_guide/index.md)
This document describes various guidelines to ensure consistency and quality
This document describes various guidelines to ensure consistency and quality
across GitLab's frontend team.
across GitLab's frontend team.
...
@@ -12,15 +9,6 @@ GitLab is built on top of [Ruby on Rails][rails] using [Haml][haml] and also a J
...
@@ -12,15 +9,6 @@ GitLab is built on top of [Ruby on Rails][rails] using [Haml][haml] and also a J
Be wary of [the limitations that come with using Hamlit][hamlit-limits]. We also use [SCSS][scss] and plain JavaScript with
Be wary of [the limitations that come with using Hamlit][hamlit-limits]. We also use [SCSS][scss] and plain JavaScript with
modern ECMAScript standards supported through [Babel][babel] and ES module support through [webpack][webpack].
modern ECMAScript standards supported through [Babel][babel] and ES module support through [webpack][webpack].
### Javascript development
[Vue.js][vue] is used for particularly advanced, dynamic elements and based on previous iterations [jQuery][jquery] is used in lot of places through the application's JavaScript.
We also use [Axios][axios] to handle all of our network requests.
We also utilize [webpack][webpack] to handle the bundling, minification, and
compression of our assets.
Working with our frontend assets requires Node (v8.10.0 or greater) and Yarn
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
(v1.10.0 or greater). You can find information on how to install these on our
[installation guide][install].
[installation guide][install].
...
@@ -31,6 +19,14 @@ For our currently-supported browsers, see our [requirements][requirements].
...
@@ -31,6 +19,14 @@ For our currently-supported browsers, see our [requirements][requirements].
---
---
## 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.
## [Development Process](development_process.md)
## [Development Process](development_process.md)
How we plan and execute the work on the frontend.
How we plan and execute the work on the frontend.
...
@@ -73,6 +69,10 @@ How we use SVG for our Icons and Illustrations.
...
@@ -73,6 +69,10 @@ How we use SVG for our Icons and Illustrations.
How we use UI components.
How we use UI components.
## [Event Tracking](event_tracking.md)
How we use Snowplow to track custom events.
---
---
## Style Guides
## Style Guides
...
@@ -124,14 +124,3 @@ The [externalization part of the guide](../i18n/externalization.md) explains the
...
@@ -124,14 +124,3 @@ The [externalization part of the guide](../i18n/externalization.md) explains the
@@ -10,26 +10,6 @@ Discuss your architecture design in an issue before writing code. This helps dec
...
@@ -10,26 +10,6 @@ Discuss your architecture design in an issue before writing code. This helps dec
There are multiple ways of writing code to accomplish the same results. We should be as consistent as possible in how we write code across our codebases. This will make it more easier us to maintain our code across GitLab.
There are multiple ways of writing code to accomplish the same results. We should be as consistent as possible in how we write code across our codebases. This will make it more easier us to maintain our code across GitLab.
Whenever you see with existing code that does not follow our current style guide, update it proactively. Refrain from changing everything but each merge request should progressively enhance our codebase and reduce technical debt.
Whenever you see with existing code that does not follow our current style guide, update it proactively. You don't need to fix everything, but each merge request should iteratively improve our codebase, and reduce technical debt where possible.
## When to use Vue
- Use Vue for feature that make use of heavy DOM manipulation
- Use Vue for reusable components
## When to use jQuery
- Use jQuery to interact with Bootstrap JavaScript components
- Avoid jQuery when a better alternative exists. We are slowly moving away from it [#43559][jquery-future]
## Mixing Vue and jQuery
- Mixing Vue and jQuery is not recommended.
- If you need to use a specific jQuery plugin in Vue, [create a wrapper around it][select2].
- It is acceptable for Vue to listen to existing jQuery events using jQuery event listeners.
- It is not recommended to add new jQuery events for Vue to interact with jQuery.
Inline scripts and styles should be avoided in almost all cases. In an effort to protect users from [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting), we will be disabling inline scripts using Content Security Policy.
## Including external resources
External fonts, CSS, and JavaScript should never be used with the exception of Google Analytics and Piwik - and only when the instance has enabled it. Assets should always be hosted and served locally from the GitLab instance. Embedded resources via `iframes` should never be used except in certain circumstances such as with ReCaptcha, which cannot be used without an `iframe`.
