From 5cb48d36860eb26ecbb2dfc70682afa431093f07 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann <winnie@gitlab.com> Date: Thu, 12 Jul 2018 12:10:53 +0000 Subject: [PATCH] Remove old service architecture from Vue docs --- doc/development/fe_guide/img/vue_arch.png | Bin 9848 -> 0 bytes doc/development/fe_guide/vue.md | 239 +--------------------- 2 files changed, 11 insertions(+), 228 deletions(-) delete mode 100644 doc/development/fe_guide/img/vue_arch.png diff --git a/doc/development/fe_guide/img/vue_arch.png b/doc/development/fe_guide/img/vue_arch.png deleted file mode 100644 index a67706c7c1e5dce1491e92c576f95d6d8911f4ec..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9848 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 diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 219b98ac696..f6cbd11042c 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -2,27 +2,24 @@ To get started with Vue, read through [their documentation][vue-docs]. -## Vue architecture +## Examples -All new features built with Vue.js must follow a [Flux architecture][flux]. -The main goal we are trying to achieve is to have only one data flow and only one data entry. -In order to achieve this goal, you can either use [vuex](#vuex) or use the [store pattern][state-management], explained below: +What is described in the following sections can be found in these examples: -Each Vue bundle needs a Store - where we keep all the data -, a Service - that we use to communicate with the server - and a main Vue component. +- web ide: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/ide/stores +- security products: https://gitlab.com/gitlab-org/gitlab-ee/tree/master/ee/app/assets/javascripts/vue_shared/security_reports +- registry: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/registry/stores -Think of the Main Vue Component as the entry point of your application. This is the only smart -component that should exist in each Vue feature. -This component is responsible for: -1. Calling the Service to get data from the server -1. Calling the Store to store the data received -1. Mounting all the other components +## Vue architecture -![Vue Architecture](img/vue_arch.png) +All new features built with Vue.js must follow a [Flux architecture][flux]. +The main goal we are trying to achieve is to have only one data flow and only one data entry. +In order to achieve this goal we use [vuex](#vuex). You can also read about this architecture in vue docs about [state management][state-management] and about [one way data flow][one-way-data-flow]. -### Components, Stores and Services +### Components and Store In some features implemented with Vue.js, like the [issue board][issue-boards] or [environments table][environments-table] @@ -33,10 +30,8 @@ new_feature ├── components │ └── component.vue │ └── ... -├── stores +├── store │ └── new_feature_store.js -├── services # only when not using vuex -│ └── new_feature_service.js ├── index.js ``` _For consistency purposes, we recommend you to follow the same structure._ @@ -125,217 +120,6 @@ You can read more about components in Vue.js site, [Component System][component- #### Vuex Check this [page](vuex.md) for more details. -#### Flux like state management -The Store is a class that allows us to manage the state in a single -source of truth. It is not aware of the service or the components. - -The concept we are trying to follow is better explained by Vue documentation -itself, please read this guide: [State Management][state-management] - -### A folder for the Service - -**If you are using Vuex you won't need this step** - -The Service is a class used only to communicate with the server. -It does not store or manipulate any data. It is not aware of the store or the components. -We use [axios][axios] to communicate with the server. -Refer to [axios](axios.md) for more details. - -Axios instance should only be imported in the service file. - -```javascript -import axios from '~/lib/utils/axios_utils'; -``` - -### End Result - -The following example shows an application: - -```javascript -// store.js -export default class Store { - - /** - * This is where we will iniatialize the state of our data. - * Usually in a small SPA you don't need any options when starting the store. - * In that case you do need guarantee it's an Object and it's documented. - * - * @param {Object} options - */ - constructor(options) { - this.options = options; - - // Create a state object to handle all our data in the same place - this.todos = []; - } - - setTodos(todos = []) { - this.todos = todos; - } - - addTodo(todo) { - this.todos.push(todo); - } - - removeTodo(todoID) { - const state = this.todos; - - const newState = state.filter((element) => {element.id !== todoID}); - - this.todos = newState; - } -} - -// service.js -import axios from '~/lib/utils/axios_utils' - -export default class Service { - constructor(options) { - this.todos = axios.create({ - baseURL: endpoint.todosEndpoint - }); - - } - - getTodos() { - return this.todos.get(); - } - - addTodo(todo) { - return this.todos.put(todo); - } -} -// todo_component.vue -<script> -export default { - props: { - data: { - type: Object, - required: true, - }, - }, -}; -</script> -<template> - <div> - <h1> - Title: {{data.title}} - </h1> - <p> - {{data.text}} - </p> - </div> -</template> - -// todos_main_component.vue -<script> -import Store from 'store'; -import Service from 'service'; -import TodoComponent from 'todoComponent'; -export default { - components: { - todo: TodoComponent, - }, - /** - * Although most data belongs in the store, each component it's own state. - * We want to show a loading spinner while we are fetching the todos, this state belong - * in the component. - * - * We need to access the store methods through all methods of our component. - * We need to access the state of our store. - */ - data() { - const store = new Store(); - - return { - isLoading: false, - store: store, - todos: store.todos, - }; - }, - - created() { - this.service = new Service('/todos'); - - this.getTodos(); - }, - - methods: { - getTodos() { - this.isLoading = true; - - this.service - .getTodos() - .then(response => { - this.store.setTodos(response); - this.isLoading = false; - }) - .catch(() => { - this.isLoading = false; - // Show an error - }); - }, - - addTodo(event) { - this.service - .addTodo({ - title: 'New entry', - text: `You clicked on ${event.target.tagName}`, - }) - .then(response => { - this.store.addTodo(response); - }) - .catch(() => { - // Show an error - }); - }, - }, -}; -</script> -<template> - <div class="container"> - <div v-if="isLoading"> - <i - class="fa fa-spin fa-spinner" - aria-hidden="true" /> - </div> - - <div - v-if="!isLoading" - class="js-todo-list"> - <template v-for='todo in todos'> - <todo :data="todo" /> - </template> - - <button - @click="addTodo" - class="js-add-todo"> - Add Todo - </button> - </div> - <div> -</template> - -// index.js -import todoComponent from 'todos_main_component.vue'; - -new Vue({ - el: '.js-todo-app', - components: { - todoComponent, - }, - render: createElement => createElement('todo-component' { - props: { - someProp: [], - } - }), -}); - -``` - -The [issue boards service][issue-boards-service] -is a good example of this pattern. - ## Style guide Please refer to the Vue section of our [style guide](style_guide_js.md#vue-js) @@ -446,6 +230,5 @@ need to test the rendered output. [Vue][vue-test] guide's to unit test show us e [state-management]: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch [one-way-data-flow]: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow [vue-test]: https://vuejs.org/v2/guide/unit-testing.html -[issue-boards-service]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/boards/services/board_service.js.es6 [flux]: https://facebook.github.io/flux [axios]: https://github.com/axios/axios -- 2.30.9