diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-10 22:48:09 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-03-10 22:48:09 +0300 |
commit | e8d525d07c30329d7cbe7b418296d0d9b9a391c0 (patch) | |
tree | 37871ecb02468e272f308d275c36e6e3acc2e238 /doc/development/frontend.md | |
parent | c4ba6ea684052ff555e8683c23be5b25bf5abd11 (diff) |
Adds best practices regarding context and vue to documentation
Diffstat (limited to 'doc/development/frontend.md')
-rw-r--r-- | doc/development/frontend.md | 33 |
1 files changed, 32 insertions, 1 deletions
diff --git a/doc/development/frontend.md b/doc/development/frontend.md index d646de7c54a..d540dce5729 100644 --- a/doc/development/frontend.md +++ b/doc/development/frontend.md @@ -66,6 +66,8 @@ Let's look into each of them: This is the index file of your new feature. This is where the root Vue instance of the new feature should be. +The Store and the Service should be loaded in this file and provided as a prop to the main component. + Don't forget to follow [these steps.][page_specific_javascript] **A folder for Components** @@ -86,7 +88,7 @@ You can read more about components in Vue.js site, [Component System][component- **A folder for the Store** -The Store is a simple object that allows us to manage the state in a single +The Store is a class 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 @@ -332,6 +334,34 @@ gl.MyThing = MyThing; ``` +### Manipulating the DOM in a JS Class + +When writing a class that needs to manipulate the DOM guarantee a container option is provided. +This is useful when we need that class to be instantiated more than once in the same page. + +Bad: +``` +class Foo { + constructor() { + document.querySelector('.bar'); + } +} + +new Foo(); +``` + +Good: +``` +class Foo { + constructor(opts) { + document.querySelector(opts.container); + } +} + +new Foo({ container: '.my-element' }); +``` +You can find an example of the above in this [class][container-class-example]; + ## Supported browsers For our currently-supported browsers, see our [requirements][requirements]. @@ -457,3 +487,4 @@ Scenario: Developer can approve merge request [eslintrc]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc [team-page]: https://about.gitlab.com/team [vue-section]: https://docs.gitlab.com/ce/development/frontend.html#how-to-build-a-new-feature-with-vue-js +[container-class-example]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/mini_pipeline_graph_dropdown.js |