summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacob Schatz <jschatz@gitlab.com>2017-08-10 16:30:37 +0000
committerJacob Schatz <jschatz@gitlab.com>2017-08-10 16:30:37 +0000
commit2a8d720c19cbf1a276a69c28abb43b6e58a75bac (patch)
tree13c5ca1b9bb5fc06eec739439a9f93ac6d93dd36
parent4aa6abf4533012e8b6e79c7ed1d4efc46405d785 (diff)
downloadgitlab-ce-update-vue-docs.tar.gz
Update style_guide_js.md based on feedback from @filpa and @iamphill.update-vue-docs
-rw-r--r--doc/development/fe_guide/style_guide_js.md19
1 files changed, 9 insertions, 10 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md
index a1c2425be50..fc987b446c2 100644
--- a/doc/development/fe_guide/style_guide_js.md
+++ b/doc/development/fe_guide/style_guide_js.md
@@ -514,23 +514,22 @@ A forEach will cause side effects, it will be mutating the array being iterated.
### The Javascript/Vue Accord
The goal of this accord is to make sure we are all on the same page.
-1. When writing Vue, you may not use jQuery in your application. You may query the DOM 1 time while bootstrapping your application to grab data attributes using `dataset`. Using jQuery with Vue can be useful, however it is impossible to come up with a specific rule of proper usage within Vue.
- 1. You may use a jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html).
+1. When writing Vue, you may not use jQuery in your application, except for specific situations which will be listed here. Using jQuery with Vue can be useful, however it is impossible to come up with a specific rule of proper usage within Vue.
+ 1. You may use an external jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html).
+ 2. You may use jQuery to listen for jQuery events that are external to your application. You should not be dispatching jQuery events in your Vue application.
-1. You may have a temporary but immediate need to create technical debt by writing code that does not follow our standards, to be refactored later. You may do this as long as:
- 1. The technical debt is handled in the next release by you with a higher priority than your next month deliverables.
+1. You may query the DOM 1 time, while bootstrapping your application to grab data attributes using `dataset`.
- 1. You write the tests for that code before hand and those tests will not need to be rewritten. e.g. jQuery tests rewritten to Vue tests.
+1. You may query the `window` object 1 time, while bootstrapping your application for application specific data (e.g. `scrollTo` is ok to access anytime). Do this access during the bootstrapping of your application.
+
+1. You may have a temporary but immediate need to create technical debt by writing code that does not follow our standards, to be refactored later. Maintainers need to be ok with the tech debt in the first place. An issue should be created for that tech debt to evaluate it further and discuss. In the coming months you should fix that tech debt, with it's priority to be determined by maintainers.
+
+1. When creating tech debt you must write the tests for that code before hand and those tests may not be rewritten. e.g. jQuery tests rewritten to Vue tests.
1. You may choose to use VueX as a centralized state management. If you choose not to use VueX, you must use the *store pattern* which can be found in the [Vue.js documentation](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch).
1. Once you have chosen a centralized state management solution you must use it for your entire application. i.e. Don't mix and match your state management solutions.
-1. When giving feedback about code, reserve strong negative feedback for when it's absolutely accurate. Using phrases like "poorly written", "this code is a mess",
-and other similar phrases should be used when code is truly poorly written,
-not when you disagree with the implementation. When you give this feedback make sure it is accompanied with suggestions on how
-to fix the code. Make sure you point out what part of the code is wrong.
-
## SCSS
- [SCSS](style_guide_scss.md)