Commit 3ad7193c authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'docs-cleanup-fe' into 'master'

Docs cleanup fe

See merge request gitlab-org/gitlab-ce!26158
parents 9764c123 d7c92faa
# Frontend Development Guidelines # Frontend Development Guidelines
> **Notice:**
> 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
[scss-lint]: https://github.com/brigade/scss-lint [scss-lint]: https://github.com/brigade/scss-lint
[install]: ../../install/installation.md#4-node [install]: ../../install/installation.md#4-node
[requirements]: ../../install/requirements.md#supported-web-browsers [requirements]: ../../install/requirements.md#supported-web-browsers
---
## [DropLab](droplab/droplab.md)
Our internal `DropLab` dropdown library.
- [DropLab](droplab/droplab.md)
- [Ajax plugin](droplab/plugins/ajax.md)
- [Filter plugin](droplab/plugins/filter.md)
- [InputSetter plugin](droplab/plugins/input_setter.md)
...@@ -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.
## Enhance progressively ## Improve code [iteratively](https://about.gitlab.com/handbook/values/#iteration)
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.
[jquery-future]: https://gitlab.com/gitlab-org/gitlab-ce/issues/43559
[select2]: https://vuejs.org/v2/examples/select2.html
...@@ -120,6 +120,13 @@ You can read more about components in Vue.js site, [Component System][component- ...@@ -120,6 +120,13 @@ You can read more about components in Vue.js site, [Component System][component-
#### Vuex #### Vuex
Check this [page](vuex.md) for more details. Check this [page](vuex.md) for more details.
### 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][https://vuejs.org/v2/examples/select2.html].
- 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.
## Style guide ## Style guide
Please refer to the Vue section of our [style guide](style_guide_js.md#vuejs) Please refer to the Vue section of our [style guide](style_guide_js.md#vuejs)
......
# Development # Development
## [Design patterns](design_patterns.md)
Examples of proven design patterns used in our codebase.
## [Components](components.md) ## [Components](components.md)
Documentation on existing components and how to best create a new component. Documentation on existing components and how to best create a new component.
...@@ -12,14 +8,6 @@ Documentation on existing components and how to best create a new component. ...@@ -12,14 +8,6 @@ Documentation on existing components and how to best create a new component.
Learn how to implement an accessible frontend. Learn how to implement an accessible frontend.
## [Network requests](network_requests.md)
Learn how to handle network requests in our codebase.
## [Security](security.md)
Learn how to ensure that our frontend is secure.
## [Performance](performance.md) ## [Performance](performance.md)
Learn how to keep our frontend performant. Learn how to keep our frontend performant.
......
# Security
## Avoid inline scripts and styles
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`.
## Resources for security testing
- [Mozilla's HTTP Observatory CLI](https://github.com/mozilla/http-observatory-cli)
- [Qualys SSL Labs Server Test](https://www.ssllabs.com/ssltest/analyze.html)
...@@ -3,14 +3,6 @@ ...@@ -3,14 +3,6 @@
This guide contains all the information to successfully contribute to GitLab's frontend. This guide contains all the information to successfully contribute to GitLab's frontend.
This is a living document, and we welcome contributions, feedback and suggestions. This is a living document, and we welcome contributions, feedback and suggestions.
## [Principles](principles.md)
Ensure that your frontend contribution starts off in the right direction.
## [Initiatives](initiatives.md)
High level overview of where we are going from a frontend perspective.
## [Development](development/index.md) ## [Development](development/index.md)
Guidance on topics related to development. Guidance on topics related to development.
...@@ -27,9 +19,6 @@ Learn about all the internal JavaScript modules that make up our frontend. ...@@ -27,9 +19,6 @@ Learn about all the internal JavaScript modules that make up our frontend.
Style guides to keep our code consistent. Style guides to keep our code consistent.
## [Event Tracking with Snowplow](event_tracking.md)
How we use Snowplow to track custom events.
## [Tips](tips.md) ## [Tips](tips.md)
......
# Initiatives
> TODO: Add Initiatives
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment