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.

Edited by Inactive Account