Upgrade to latest Vue and Framework7

[ThaDaVos]

The problem

It's actually a re-open of an existing issue as it was closed due being stale: #1069

Your suggestion

Check if we can do the upgrade - I am happy to look into this to get Openhab's MainUI up to date.

Your environment

Additional information

[florian-h05]

Hello @ThaDaVos,

thanks for picking this up.
Since Vue 2.x is going to reach EOL, we should IMO upgrade to Vue 3.x.

So: Any help with upgrading is highly appreciated.
I guess it is much work since there is a number of breaking changes both in Vue and Framework7, and in addition our dependencies also need to be compatible with Vue 3.

@gyhs WDYT?

[ThaDaVos]

It will mostly be a single-day-a-week effort I can put in, because of work, but at least it will be worked on!

I will focus on the org.openhab.ui - this way I can also learn a bit how it works and maybe look into my feature request for supporting custom widgets and also look into the reactivity from the back-end too - as there's a lot which may be improved there too to make it lighter and easier to work with

[florian-h05]

It will mostly be a single-day-a-week effort I can put in, because of work, but at least it will be worked on!

Sounds great!

MainUI is inside the org.openhab.ui bundle in the web folder, the Java parts of that bundle shouldn’t really matter.
Backend is the openHAB REST API & SSE event stream provided by openHAB Core (https://github.com/openhab/openhab-core) by the org.openhab.core.io.* bundles.

I would recommend to focus on getting MainUI starting with Vue 3 and latest Framework7 first, then check that all features relying on dependencies still work/upgrade the dependencies.

I think working on the backend the same time could be quite overwhelming, and if your UI PR does not only contain the upgrade, but also changes to backend calls etc., it will get bigger and bigger and therefore more difficult to review.
So splitting upgrade and improvements would help.

[ThaDaVos]

I will start with the pure upgrade first - saw there are tests or at least a framework for it - so will check that out first

A question though, why was there chosen for SSE and not Websockets? Just curious
Or maybe even Web gRPC 🤣

[florian-h05]

A question though, why was there chosen for SSE and not Websockets?

I don‘t know, that was before my time as maintainer (and even as contributor).
But given that openhab/openhab-core#3345 (SSE log endpoint) was closed in favour of openhab/openhab-core#3859 (WebSocket log endpoint) and the addition of an event WebSocket in openhab/openhab-core#2891, I would say the goal is to switch to WebSockets in MainUI or add least add WebSocket support and keep SSE as an alternative.

[ThaDaVos]

Ah good to know - when I have time I'll go through the code (created a fork) and sum up what to do in a pull request so we can keep track and verify it's the correct steps

[florian-h05]

As the MainUI code needs to be changed anyway when switching from SSE to WebSocket, it could probably be done in a way where the MainUI code itself does not know about the implementation details of the event connection, i.e. whether it is SSE or WebSocket (or probably something different in the future?), this only matter for the implementation of that event connection. In the Java world I would say create an Interface for the event stream and then have two implementations, one for WebSockets and one for SSE.
That would be really nice IMO, but is nothing to take care of now.

[ThaDaVos]

As the MainUI code needs to be changed anyway when switching from SSE to WebSocket, it could probably be done in a way where the MainUI code itself does not know about the implementation details of the event connection, i.e. whether it is SSE or WebSocket (or probably something different in the future?), this only matter for the implementation of that event connection. In the Java world I would say create an Interface for the event stream and then have two implementations, one for WebSockets and one for SSE. That would be really nice IMO, but is nothing to take care of now.

That was I thinking too - as I probably have to rewrite stuff to be more Vue 3 - I could also take a small detour and check that out - but first I'll check what components are used and how stuff is done - then I can write up a detailed list of steps and tasks to undertake

[ThaDaVos]

Quick question, maybe I missed it - but is there a contribution guide?

[florian-h05]

Yes, there is:

• https://www.openhab.org/docs/developer/contributing.html for general stuff like sign-off etc.
• https://github.com/openhab/openhab-webui/blob/main/bundles/org.openhab.ui/CONTRIBUTING.md explicitely for MainUI, this takes care of the more technical aspects

[ThaDaVos]

Is it within scope of this to also move to the latest recommended build stack for Vue? So move from webpack to Vite?
n.v.m. that - I will first do a straight up upgrade - migration to different buildstack should be done after that

[J-N-K]

If you find something missing in the web socket part on server-side, feel free to tag me.

[GiviMAD]

I just saw these, I have upgraded webpack in these PR #2267

[ThaDaVos]

I just saw these, I have upgraded webpack in these PR #2267

Oh that's great! Will take it into consideration @GiviMAD

[florian-h05]

@ThaDaVos FYI: I have merged #2267, so Main UI is now using webpack 5.

[jimtng]

I have about 2-3 weeks experience in Javascript / Vue / Framework7, but I'd be happy to help. I have a lot of free time.

[ThaDaVos]

I am first working on indexing all the needed changes and steps to be made - when I've done that, I can may be split off some work - finally getting some time again, so will be picking it up again soon, first of merging the above mentioned PR and then continue indexing the changes - will create a PR with a check list

[florian-h05]

@ThaDaVos FYI I upgraded to the latest Vue 2.7.x version and upgraded most dependencies to their latest version compatible with Vue 2.7.x.

[ThaDaVos]

@florian-h05 thank you! Due to work I haven't been able to work on it, so this helps a lot!

[florian-h05]

Yeah, this removes some of the burden of upgrading to Vue 3 because most dependencies are now very close to their Vue 3 compatible versions, but I fear it still is a lot of work.

[ThaDaVos]

Yeah, the first step I would have done the same, first upgrade to last minor versions and then go major by major - hope I'll get time soon as I already have experience with Vue 2 to Vue 3 upgrades