Commit c7b3ba83 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Jacob Schatz

Adds vue js example application and documentation

parent 381e3484
...@@ -25,6 +25,59 @@ Working with our frontend assets requires Node (v4.3 or greater) and Yarn ...@@ -25,6 +25,59 @@ Working with our frontend assets requires Node (v4.3 or greater) and Yarn
For our currently-supported browsers, see our [requirements][requirements]. For our currently-supported browsers, see our [requirements][requirements].
---
## Development Process
When you are assigned an issue please follow the next steps:
### Divide a big feature into small Merge Requests
1. Big Merge Request are painful to review. In order to make this process easier we
must break a big feature into smaller ones and create a Merge Request for each step.
1. First step is to create a branch from `master`, let's call it `new-feature`. This branch
will be the recipient of all the smaller Merge Requests. Only this one will be merged to master.
1. Don't do any work on this one, let's keep it synced with master.
1. Create a new branch from `new-feature`, let's call it `new-feature-step-1`. We advise you
to clearly identify which step the branch represents.
1. Do the first part of the modifications in this branch. The target branch of this Merge Request
should be `new-feature`.
1. Once `new-feature-step-1` gets merged into `new-feature` we can continue our work. Create a new
branch from `new-feature`, let's call it `new-feature-step-2` and repeat the process done before.
```shell
* master
|\
| * new-feature
| |\
| | * new-feature-step-1
| |\
| | * new-feature-step-2
| |\
| | * new-feature-step-3
```
**Tips**
- Make sure `new-feature` branch is always synced with `master`: merge master frequently.
- Do the same for the feature branch you have opened. This can be accomplished by merging `master` into `new-feature` and `new-feature` into `new-feature-step-*`
- Avoid rewriting history.
### Share your work early
1. Before writing code guarantee your vision of the architecture is aligned with
GitLab's architecture.
1. Add a diagram to the issue and ask a Frontend Architecture about it.
![Diagram of Issue Boards Architecture](img/boards_diagram.png)
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.
### 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 @jschatz, @iamphill, @fatihacet or @filipa early in this process.
--- ---
## [Architecture](architecture.md) ## [Architecture](architecture.md)
......
...@@ -58,7 +58,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. ...@@ -58,7 +58,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
import Bar from './bar'; import Bar from './bar';
``` ```
- **Never** disable the `no-undef` rule. Declare globals with `/* global Foo */` instead. - **Never** disable the `no-undef` rule. Declare globals with `/* global Foo */` instead.
- When declaring multiple globals, always use one `/* global [name] */` line per variable. - When declaring multiple globals, always use one `/* global [name] */` line per variable.
...@@ -183,6 +183,19 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. ...@@ -183,6 +183,19 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
parseInt('10', 10); parseInt('10', 10);
``` ```
#### CSS classes used for JavaScript
- If the class is being used in Javascript it needs to be prepend with `js-`
```html
// bad
<button class="add-user">
Add User
</button>
// good
<button class="js-add-user">
Add User
</button>
```
### Vue.js ### Vue.js
...@@ -200,6 +213,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. ...@@ -200,6 +213,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
#### Naming #### Naming
- **Extensions**: Use `.vue` extension for Vue components. - **Extensions**: Use `.vue` extension for Vue components.
- **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances:
```javascript ```javascript
// bad // bad
import cardBoard from 'cardBoard'; import cardBoard from 'cardBoard';
...@@ -217,6 +231,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. ...@@ -217,6 +231,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
cardBoard: CardBoard cardBoard: CardBoard
}; };
``` ```
- **Props Naming:** - **Props Naming:**
- Avoid using DOM component prop names. - Avoid using DOM component prop names.
- Use kebab-case instead of camelCase to provide props in templates. - Use kebab-case instead of camelCase to provide props in templates.
...@@ -243,12 +258,18 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. ...@@ -243,12 +258,18 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
<component v-if="bar" <component v-if="bar"
param="baz" /> param="baz" />
<button class="btn">Click me</button>
// good // good
<component <component
v-if="bar" v-if="bar"
param="baz" param="baz"
/> />
<button class="btn">
Click me
</button>
// if props fit in one line then keep it on the same line // if props fit in one line then keep it on the same line
<component bar="bar" /> <component bar="bar" />
``` ```
......
...@@ -26,6 +26,10 @@ browser and you will not have access to certain APIs, such as ...@@ -26,6 +26,10 @@ browser and you will not have access to certain APIs, such as
[`Notification`](https://developer.mozilla.org/en-US/docs/Web/API/notification), [`Notification`](https://developer.mozilla.org/en-US/docs/Web/API/notification),
which will have to be stubbed. which will have to be stubbed.
### Writing tests
### Vue.js unit tests
See this [section][vue-test].
### Running frontend tests ### Running frontend tests
`rake karma` runs the frontend-only (JavaScript) tests. `rake karma` runs the frontend-only (JavaScript) tests.
...@@ -134,3 +138,4 @@ Scenario: Developer can approve merge request ...@@ -134,3 +138,4 @@ Scenario: Developer can approve merge request
[jasmine-focus]: https://jasmine.github.io/2.5/focused_specs.html [jasmine-focus]: https://jasmine.github.io/2.5/focused_specs.html
[jasmine-jquery]: https://github.com/velesin/jasmine-jquery [jasmine-jquery]: https://github.com/velesin/jasmine-jquery
[karma]: http://karma-runner.github.io/ [karma]: http://karma-runner.github.io/
[vue-test]:https://docs.gitlab.com/ce/development/fe_guide/vue.html#testing-vue-components
This diff is collapsed.
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