Changes after reviewdocument-how-to-vue

1 files changed, 30 insertions, 24 deletions

diff --git a/doc/development/frontend.md b/doc/development/frontend.md
index 6aa7e65c188..4ee213e6141 100644
--- a/doc/development/frontend.md
+++ b/doc/development/frontend.md
@@ -28,11 +28,17 @@ To get started with Vue, read through [their documentation][vue-docs].
 
 In some features implemented with Vue.js, like the [issue board](https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/boards) or [environments table](https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/environments) you can find a clear separation of concerns:
 
-- A `*_bundle.js` file
-- A folder for Components
-- A folder for the Store
-- A folder for the Service
-
+```
+new_feature
+├── components
+│   └── component.js.es6
+│   └── ...
+├── store
+│  └── new_feature_store.js.es6
+├── service
+│  └── new_feature_service.js.es6
+├── new_feature_bundle.js.es6
+```
 _For consistency purposes, we recommend you to follow the same structure._
 
 Let's look into each of them:
@@ -58,7 +64,7 @@ You can read more about components in Vue.js site, [Component System](https://v1
 
 The Store is a simple object that allows us to manage the state in a single source of truth.
 
-The concept we are trying to follow is better explained by Vue documentation it self, please read this guide carefully: [State Management](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)
+The concept we are trying to follow is better explained by Vue documentation itself, please read this guide: [State Management](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)
 
 **A folder for the Service**
 
@@ -242,8 +248,8 @@ As long as the fixtures don't change, `rake teaspoon:tests` is sufficient
 
 If you need to debug your tests and/or application code while they're
 running, navigate to [localhost:3000/teaspoon](http://localhost:3000/teaspoon)
-in your browser, open DevTools, and run tests for individual files by clicking 
-on them. This is also much faster than setting up and running tests from the 
+in your browser, open DevTools, and run tests for individual files by clicking
+on them. This is also much faster than setting up and running tests from the
 command line.
 
 Please note: Not all of the frontend fixtures are generated. Some are still static
@@ -343,15 +349,15 @@ For our currently-supported browsers, see our [requirements][requirements].
 
 ### Spec errors due to use of ES6 features in `.js` files
 
-If you see very generic JavaScript errors (e.g. `jQuery is undefined`) being 
-thrown in Teaspoon, Spinach, or Rspec tests but can't reproduce them manually, 
-you may have included `ES6`-style JavaScript in files that don't have the 
-`.js.es6` file extension. Either use ES5-friendly JavaScript or rename the file 
-you're working in (`git mv <file.js> <file.js.es6>`). 
+If you see very generic JavaScript errors (e.g. `jQuery is undefined`) being
+thrown in Teaspoon, Spinach, or Rspec tests but can't reproduce them manually,
+you may have included `ES6`-style JavaScript in files that don't have the
+`.js.es6` file extension. Either use ES5-friendly JavaScript or rename the file
+you're working in (`git mv <file.js> <file.js.es6>`).
 
 ### Spec errors due to use of unsupported JavaScript
 
-Similar errors will be thrown if you're using JavaScript features not yet 
+Similar errors will be thrown if you're using JavaScript features not yet
 supported by our test runner's version of webkit, whether or not you've updated
 the file extension. Examples of unsupported JavaScript features are:
 
@@ -366,20 +372,20 @@ the file extension. Examples of unsupported JavaScript features are:
 - Symbol/Symbol.iterator
 - Spread
 
-Until these are polyfilled or transpiled appropriately, they should not be used. 
-Please update this list with additional unsupported features or when any of 
+Until these are polyfilled or transpiled appropriately, they should not be used.
+Please update this list with additional unsupported features or when any of
 these are made usable.
 
 ### Spec errors due to JavaScript not enabled
 
-If, as a result of a change you've made, a feature now depends on JavaScript to 
+If, as a result of a change you've made, a feature now depends on JavaScript to
 run correctly, you need to make sure a JavaScript web driver is enabled when
-specs are run. If you don't you'll see vague error messages from the spec 
-runner, and an explosion of vague console errors in the HTML snapshot. 
+specs are run. If you don't you'll see vague error messages from the spec
+runner, and an explosion of vague console errors in the HTML snapshot.
 
-To enable a JavaScript driver in an `rspec` test, add `js: true` to the 
-individual spec or the context block containing multiple specs that need 
-JavaScript enabled: 
+To enable a JavaScript driver in an `rspec` test, add `js: true` to the
+individual spec or the context block containing multiple specs that need
+JavaScript enabled:
 
 ```ruby
 
@@ -398,8 +404,8 @@ describe "Admin::AbuseReports", js: true do
 end
 ```
 
-In Spinach, the JavaScript driver is enabled differently. In the `*.feature` 
-file for the failing spec, add the `@javascript` flag above the Scenario: 
+In Spinach, the JavaScript driver is enabled differently. In the `*.feature`
+file for the failing spec, add the `@javascript` flag above the Scenario:
 
 ```
 @javascript