decide on implementation

[surchs]

We want to be as consistent with our tooling as we can. So far, there is only one other frontend tool, and that is built with Vue2 using Nuxt. We should have a quick chat on the choices for the implementation.

Decided:

• it'll be a vue app
• we'll use cypress for testing

To be decided:

• vue2 or vue3
• nuxt or plain vue?

If we go with vue3/Nuxt3, then I believe the only widely adopted and ready to go component library would be vuetify - and so far we have been using vue-bootstrap.

WDYT @rmanaem and @jarmoza

[rmanaem]

I'm not well versed in the differences between Vue2 and Vue3. I recall @surchs mentioning something about some of the tools used in annotation-tool not being available for Vue3 yet, one of them being vue-bootstrap not sure if there are others.
I also haven't used nuxt yet so not quite sure of all the benefits that come from using it.

[surchs]

My view is:

• vue3 would be nice because this is a new and lightweight tool, and we need to gain experience with the new framework. But there are likely downsides:
  • lack of experience (e.g. different store implementation, composition api...)
  • possible changes to testing
  • our current component library doesn't support it and we would have to use a different one -> what are the downsides of that
• nuxt has a couple of conviences (auto-registered components, auto-routing, opinionated project structure) but is otherwise probably overkill for this. I would still use it here, to keep things consistent across repos

I think if vue-bootstrap isn't available / doesn't catch up (and it probably won't anytime soon), the best alternative is vuetify. But I am not sure how opinionated that is (e.g. if it really is just a plugin or more of a framework itself). We could probably get around the whole problem by using something like https://tailwindcss.com/ but that won't be very approachable - particularly not for external contributors.

So the safe bet is: use Vue2 + Nuxt and keep it the same as the annotator. The futureproof bet requires some exploration (e.g. vuetify) before we can make a decision.

[jarmoza]

@surchs I'd need to take a bit of time to read into the latest status of these libraries. I can take some time today to do that.

So far it seems remaining with our current stack is the most expedient option. Although, it may be simpler to just try out/move to vuetify instead of also Nuxt 3 at the same time.

Will report back here.

[jarmoza]

@surchs and @rmanaem

After reading up, here's the current state of things regarding a possible transition to Vue3/Nuxt3. To be clear, we are currently using Nuxt for Vue2 with a version of Bootstrap4 (c/o BootstrapVue by Illya Klymov).

Nuxt3 has just released its first stable release as of November 16, 2022.

As per this discussion here on Illya's repo, Illya had faced slowdown due to the war in Ukraine but has since moved and is continuing to work in his spare time on its full transition to "3" - meaning for Vue3 with Bootstrap 5. Granted war makes things continuously unstable.

However, as mentioned in that thread there is a parallel project (which may be merged as some point) by Carlos Bonadeo called BootstrapVue3. As seen in this parity page between it and the original BootstrapVue, this alternate library is almost all the way complete. And on top of that it has Nuxt compatibility built into it already.

And our other GUI package, vue-select, has an upgrade path for Vue3 as well.

So although we can transition to Vuetify, it seems like the most seamless will be to move to Nuxt3 and adopt this new BootstrapVue3.

[jarmoza]

Also @surchs and @rmanaem

To help understand % compatibility between our current annotation tool and BootstrapVue3 (or Vuetify), here is a list I compiled of all the BootstrapVue components currently in use in the annotation tool.

button
card
card-body
card-header
card-text
col
collapse
container
form
form-input
form-select
input-group
list-group
list-group-item
nav-item
navbar
navbar-brand
navbar-nav
navbar-toggle
row
table
tabs
tab

[surchs]

Thanks a lot @jarmoza! That's super helpful. I think for the annotator we can take our time and watch the ecosystem. But for this project here we have to make a decision. A quick look at the docs for https://cdmoro.github.io/bootstrap-vue-3/components/ looks pretty promising, but overall the library is in alpha. Do you think starting out directly with BootstrapVue3 is really feasible?

And if not, does it make more sense to make this into another vue2 project for now, or to instead use a different, vue3 ready component library and start with vue3/Nuxt3?

[jarmoza]

@surchs Yes, I did see that warning about the alpha/early stage of things but the parity page seems to speak otherwise. So I do think it's feasible.

That said, the absolute quickest and safest thing to do would be to implement the query interface via Nuxt/BootstrapVue. Unless there's a desire to learn a new component library or some feature missing from BootstrapVue, moving a Vue2 version of the query interface over to Nuxt3/BootstrapVue3 will be less painful.

[rmanaem]

Thanks for looking into this @jarmoza!
I think it makes more sense to start the project with Vue2 and look into moving to Vue3 at some point in the future. Hopefully, by then BootstrapVue has caught up.

[surchs]

OK, thanks a lot. I think that's a pretty clear answer to this issue. I would leave it up to @rmanaem to make a pick.

edit: aha, there is the answer. I agree with that view!