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