Vueify all the things
In our Vue guide we have the following restrictions to using Vue:
When to use Vue.js
We recommend using Vue for more complex features. Here are some guidelines for when to use Vue.js:
- If you are starting a new feature or refactoring an old one that highly interacts with the DOM;
- For real time data updates;
- If you are creating a component that will be reused elsewhere;
When not to use Vue.js
We don't want to refactor all GitLab frontend code into Vue.js, here are some guidelines for when not to use Vue.js:
- Adding or changing static information;
- Features that highly depend on jQuery will be hard to work with Vue.js;
- Features without reactive data;
I would like to suggest, we drop the When not to use Vue.js
and make using Vue a requirement for all new things that involve DOM at all. That way we could get rid of a code base that consists to one half of HAML + plain JavaScript and the other half of Vue.
Advantages of not mixing HAML+JavaScript and Vue:
- more components can be reused (HAML cannot be embedded in Vue templates)
- reduced initial DOM and therefore faster loading time (before Vue components are mounted)
- less Vue instances (currently multiple per page may be necessary)
- easier data transfer to child components through props (currently
data-*
attributes are necessary which only support String values) - significantly reduced discussions about whether something should be implemented in Vue (we can invest that time better)
Some things that make sense to keep in HAML:
- empty states
- navigation
- ...?
To be clear on this: I'm not saying we should refactor all of GitLab to Vue in a given amount of time but we should not block components from being converted to Vue.