diff options
Diffstat (limited to 'doc/development/fe_guide')
| -rw-r--r-- | doc/development/fe_guide/development_process.md | 8 | ||||
| -rw-r--r-- | doc/development/fe_guide/droplab/plugins/filter.md | 2 | ||||
| -rw-r--r-- | doc/development/fe_guide/droplab/plugins/input_setter.md | 2 | ||||
| -rw-r--r-- | doc/development/fe_guide/graphql.md | 2 | ||||
| -rw-r--r-- | doc/development/fe_guide/performance.md | 11 | ||||
| -rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 22 | ||||
| -rw-r--r-- | doc/development/fe_guide/vue.md | 1 |
7 files changed, 26 insertions, 22 deletions
diff --git a/doc/development/fe_guide/development_process.md b/doc/development/fe_guide/development_process.md index 905668eef58..f3fdaa3b883 100644 --- a/doc/development/fe_guide/development_process.md +++ b/doc/development/fe_guide/development_process.md @@ -61,17 +61,19 @@ Please use your best judgement when to use it and please contribute new points t --- ### Share your work early + 1. Before writing code, ensure your vision of the architecture is aligned with -GitLab's architecture. + GitLab's architecture. 1. Add a diagram to the issue and ask a frontend architect in the slack channel `#fe_architectural` about it.  1. Don't take more than one week between starting work on a feature and -sharing a Merge Request with a reviewer or a maintainer. + sharing a Merge Request with a reviewer or a maintainer. ### Vue features + 1. Follow the steps in [Vue.js Best Practices](vue.md) 1. Follow the style guide. 1. Only a handful of people are allowed to merge Vue related features. -Reach out to one of Vue experts early in this process. + Reach out to one of Vue experts early in this process. diff --git a/doc/development/fe_guide/droplab/plugins/filter.md b/doc/development/fe_guide/droplab/plugins/filter.md index ddc6a3386c7..1f188c64fe4 100644 --- a/doc/development/fe_guide/droplab/plugins/filter.md +++ b/doc/development/fe_guide/droplab/plugins/filter.md @@ -9,7 +9,7 @@ Add the `Filter` object to the plugins array of a `DropLab.prototype.init` or `D - `Filter` requires a config value for `template`. - `template` should be the key of the objects within your data array that you want to compare -to the user input string, for filtering. + to the user input string, for filtering. ```html <input href="#" id="trigger" data-dropdown-trigger="#list"> diff --git a/doc/development/fe_guide/droplab/plugins/input_setter.md b/doc/development/fe_guide/droplab/plugins/input_setter.md index e229103e462..e4050213869 100644 --- a/doc/development/fe_guide/droplab/plugins/input_setter.md +++ b/doc/development/fe_guide/droplab/plugins/input_setter.md @@ -9,7 +9,7 @@ Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init` - `InputSetter` requires a config value for `input` and `valueAttribute`. - `input` should be the DOM element that you want to manipulate. - `valueAttribute` should be a string that is the name of an attribute on your list items that is used to get the value -to update the `input` element with. + to update the `input` element with. You can also set the `InputSetter` config to an array of objects, which will allow you to update multiple elements. diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md index cb535a8ec5b..3290f29530a 100644 --- a/doc/development/fe_guide/graphql.md +++ b/doc/development/fe_guide/graphql.md @@ -9,7 +9,7 @@ read more about [Feature Flags][feature-flags]. ## Apollo Client To save duplicated clients getting created in different apps, we have a -[default client][defualt-client] that should be used. This setups the +[default client][default-client] that should be used. This setups the Apollo client with the correct URL and also sets the CSRF headers. ## GraphQL Queries diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index 0aba38aca8c..2628e95dbc1 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -5,6 +5,7 @@ ### Realtime Components When writing code for realtime features we have to keep a couple of things in mind: + 1. Do not overload the server with requests. 1. It should feel realtime. @@ -12,16 +13,16 @@ Thus, we must strike a balance between sending requests and the feeling of realt Use the following rules when creating realtime solutions. 1. The server will tell you how much to poll by sending `Poll-Interval` in the header. -Use that as your polling interval. This way it is [easy for system administrators to change the -polling rate](../../administration/polling.md). -A `Poll-Interval: -1` means you should disable polling, and this must be implemented. + Use that as your polling interval. This way it is [easy for system administrators to change the + polling rate](../../administration/polling.md). + A `Poll-Interval: -1` means you should disable polling, and this must be implemented. 1. A response with HTTP status different from 2XX should disable polling as well. 1. Use a common library for polling. 1. Poll on active tabs only. Please use [Visibility](https://github.com/ai/visibilityjs). 1. Use regular polling intervals, do not use backoff polling, or jitter, as the interval will be -controlled by the server. + controlled by the server. 1. The backend code will most likely be using etags. You do not and should not check for status -`304 Not Modified`. The browser will transform it for you. + `304 Not Modified`. The browser will transform it for you. ### Lazy Loading Images diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 1e0529262ad..060cd8baf7f 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -14,9 +14,9 @@ See [our current .eslintrc](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/ #### ESlint 1. **Never** disable eslint rules unless you have a good reason. -You may see a lot of legacy files with `/* eslint-disable some-rule, some-other-rule */` -at the top, but legacy files are a special case. Any time you develop a new feature or -refactor an existing one, you should abide by the eslint rules. + You may see a lot of legacy files with `/* eslint-disable some-rule, some-other-rule */` + at the top, but legacy files are a special case. Any time you develop a new feature or + refactor an existing one, you should abide by the eslint rules. 1. **Never Ever EVER** disable eslint globally for a file @@ -53,7 +53,7 @@ refactor an existing one, you should abide by the eslint rules. 1. [class-methods-use-this][eslint-this] 1. When they are needed _always_ place ESlint directive comment blocks on the first line of a script, -followed by any global declarations, then a blank newline prior to any imports or code. + followed by any global declarations, then a blank newline prior to any imports or code. ```javascript // bad @@ -125,8 +125,8 @@ followed by any global declarations, then a blank newline prior to any imports o ``` 1. Relative paths: when importing a module in the same directory, a child -directory, or an immediate parent directory prefer relative paths. When -importing a module which is two or more levels up, prefer either `~/` or `ee/`. + directory, or an immediate parent directory prefer relative paths. When + importing a module which is two or more levels up, prefer either `~/` or `ee/`. In **app/assets/javascripts/my-feature/subdir**: @@ -163,9 +163,9 @@ importing a module which is two or more levels up, prefer either `~/` or `ee/`. ``` 1. Avoid using IIFE. Although we have a lot of examples of files which wrap their -contents in IIFEs (immediately-invoked function expressions), -this is no longer necessary after the transition from Sprockets to webpack. -Do not use them anymore and feel free to remove them when refactoring legacy code. + contents in IIFEs (immediately-invoked function expressions), + this is no longer necessary after the transition from Sprockets to webpack. + Do not use them anymore and feel free to remove them when refactoring legacy code. 1. Avoid adding to the global namespace. ```javascript @@ -484,8 +484,8 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. ``` 1. Default key should be provided if the prop is not required. -_Note:_ There are some scenarios where we need to check for the existence of the property. -On those a default key should not be provided. + _Note:_ There are some scenarios where we need to check for the existence of the property. + On those a default key should not be provided. ```javascript // good diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 60f322c6e75..3cd70bd63fa 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -223,6 +223,7 @@ need to test the rendered output. [Vue][vue-test] guide's to unit test show us e ## Vue.js Expert Role One should apply to be a Vue.js expert by opening an MR when the Merge Request's they create and review show: + - Deep understanding of Vue and Vuex reactivy - Vue and Vuex code are structured according to both official and our guidelines - Full understanding of testing a Vue and Vuex application |