Update Frontend doc with new standards and tools
With the recent changes we are missing some helpers/rules/best practices/styleguide in out Frontend docs, this issue keeps track of all:
Webpack
-
- Use import foo from 'bar'
andexport default
instead ofrequire()
and instead of assigning to global namespace -
- No need to use .es6
anymore -
- No need for IIFE anymore -
- How to handle relative paths: ~
vs../../
vs create an alias for each main folder
Vue
-
v-on
versus@
syntax - the latest -
v-bind
versus:
- the latest -
"
versus'
in templates - the first -
data
should be a function -
declare props as an object {} -
order of the methods of a component, example of airbnb for react - https://github.com/airbnb/javascript/tree/master/react#ordering -
declare a component as a plain object -
<component></component>
versus<component/>
-
How to import components - https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9855/diffs#note_25231856
CSS
-
Don't use IDs -
Reuse color variables, don't add new ones unless it's super necessary -
Try not to use !important
Common/General
-
No data mutation -
Prefer pure functions -
No constructor side-effects -
Use of babel-polyfill, specifically with commonjs https://github.com/zloirock/core-js#commonjs -
How to parse strings into numbers, I've seen in our code base 3 ways of doing this: +string
,Number(string)
,parseInt(string, 10)
- we should choose one
@gl-frontend Feel free to add things to this issue and to check the ones that are already documented!