Upgrade to latest Vue and Framework7

ThaDaVos commented 7 months ago

The problem

It's actually a re-open of an existing issue as it was closed due being stale: https://github.com/openhab/openhab-webui/issues/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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 https://github.com/openhab/openhab-core/pull/3345 (SSE log endpoint) was closed in favour of https://github.com/openhab/openhab-core/pull/3859 (WebSocket log endpoint) and the addition of an event WebSocket in https://github.com/openhab/openhab-core/pull/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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

florian-h05 commented 6 months ago

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 commented 5 months ago

~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 commented 5 months ago

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

GiviMAD commented 5 months ago

I just saw these, I have upgraded webpack in these PR https://github.com/openhab/openhab-webui/pull/2267

ThaDaVos commented 5 months ago

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

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

florian-h05 commented 4 months ago

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

jimtng commented 3 months ago

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 commented 3 months ago

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 commented 2 months ago

@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 commented 2 months ago

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

florian-h05 commented 2 months ago

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 commented 2 months ago

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

florian-h05 commented 1 week ago

@ThaDaVos Any updates on your work?

ThaDaVos commented 3 days ago

@florian-h05 - slow progress - as I had some really busy days - I hope to be able to give an update within the next two weeks as my schedule is finally clearing up and I finally get some time to tinker with it

florian-h05 commented 3 days ago

Thanks for the update, sounds good 👍

openhab / openhab-webui