Merge branch 'master' into 'sentiment-analysis'sentiment-analysis

# Conflicts:
#   app/assets/javascripts/notes/components/comment_form.vue

2 files changed, 18 insertions, 4 deletions

diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md
index 14ac1133cc0..98e43931a02 100644
--- a/doc/development/fe_guide/performance.md
+++ b/doc/development/fe_guide/performance.md
@@ -36,6 +36,15 @@ If you are asynchronously adding content which contains lazy images then you nee
 `gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. 
 But in general it should be handled automatically through a `MutationObserver` in the lazy loading function.
 
+### Animations
+
+Only animate `opacity` & `transform` properties. Other properties (such as `top`, `left`, `margin`, and `padding`) all cause
+Layout to be recalculated, which is much more expensive. For details on this, see "Styles that Affect Layout" in
+[High Performance Animations][high-perf-animations].
+
+If you _do_ need to change layout (e.g. a sidebar that pushes main content over), prefer [FLIP][flip] to change expensive
+properties once, and handle the actual animation with transforms.
+
 ## Reducing Asset Footprint
 
 ### Page-specific JavaScript
@@ -87,6 +96,7 @@ General tips:
 - Compress and minify assets wherever possible (For CSS/JS, Sprockets and webpack do this for us).
 - If some functionality can reasonably be achieved without adding extra libraries, avoid them.
 - Use page-specific JavaScript as described above to dynamically load libraries that are only needed on certain pages.
+- [High Performance Animations][high-perf-animations]
 
 -------
 
@@ -105,3 +115,5 @@ General tips:
 [d3]: https://d3js.org/
 [chartjs]: http://www.chartjs.org/
 [page-specific-js-example]: https://gitlab.com/gitlab-org/gitlab-ce/blob/13bb9ed77f405c5f6ee4fdbc964ecf635c9a223f/app/views/projects/graphs/_head.html.haml#L6-8
+[high-perf-animations]: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
+[flip]: https://aerotwist.com/blog/flip-your-animations/
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index 6c93c29124d..093a3ca4407 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -507,13 +507,15 @@ This is the entry point for our store. You can use the following as a guide:
 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
-import * as mutations from './mutations';
+import * as getters from './getters';
+import mutations from './mutations';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   actions,
   getters,
+  mutations,
   state: {
     users: [],
   },
@@ -525,7 +527,7 @@ _Note:_ If the state of the application is too complex, an individual file for t
 An action commits a mutatation. In this file, we will write the actions that will call the respective mutation:
 
 ```javascript
-  import * as types from './mutation-types'
+  import * as types from './mutation_types';
 
   export const addUser = ({ commit }, user) => {
     commit(types.ADD_USER, user);
@@ -575,7 +577,8 @@ import { mapGetters } from 'vuex';
 The only way to actually change state in a Vuex store is by committing a mutation.
 
 ```javascript
-  import * as types from './mutation-types'
+  import * as types from './mutation_types';
+
   export default {
     [types.ADD_USER](state, user) {
       state.users.push(user);
@@ -684,4 +687,3 @@ describe('component', () => {
 [vuex-testing]: https://vuex.vuejs.org/en/testing.html
 [axios]: https://github.com/axios/axios
 [axios-interceptors]: https://github.com/axios/axios#interceptors
-