Domoticz: Upgrade to Angular 7+

[gaeljw]

Hello,

This is not really an issue, more a general question: do you plan to upgrade the web UI code to Angular? If someone comes up with a Domotic UI built with Angular, will you accept the merge request?

I believe that AngularJS is kind of deprecated and using Angular could have a lot of benefits from a developer point of view.
But of course, this is a big change and will require a lot of time.

I hope to have some time to work on it in the coming months.

My only concern is preserving the look'n'feel: by refactoring the code, it will probably be hard to keep the current design as I know JS/HTML/CSS are currently really tied up.
Do you think it's worth it keeping the current look'n'feel or you don't really mind?

Regards,

[stas-demydiuk]

@gaeljw I would love the upgrade, just take into account that there is still a lot of non-angular jQuery stuff

[gizmocuz]

@gaeljw ,
Besides Angular7, someone already tried to change the complete layout of domoticz (sort of) before, and i would not mind this as long as its discussed first.
Gui changes are always a matter of taste.
I like the current taste... and it taste good !

The previous change did not make it as it was not done via git(hub), and that's an absolute must.

We can open a channel on Slack for some discussion.

I don't see why we can't keep the current look/feel using Angular 4 or higher

But i'm open for anything !

[gaeljw]

Hello @gizmocuz ,

What I mean is that the work will probably be easier if we start from scratch with Angular/Typescript stack and then try to make it look like the current design. I don't believe it's a good idea to start from the current files (CSS/JS) and try to migrate them to Angular.
We can keep the current look'n'feel but I think we cannot reproduce it pixel to pixel perfectly, or at least it would take a way higher time to do. Note that it's only my assumption, and maybe writing the first page and/or the global layout will show us that it's not that hard to keep the current design :)

Basically, what I would do is something like that:

• Init Angular 7 app and make sure it integrates well with the current global Domoticz build process (I didn't look at it yet, I will surely because it's the very first step)
  
  
  
  • Note for me: don't forget appcache, offline stuff..
  
  
• Migrate the layout with global look'n'feel
• Migrate each page one by one. I believe a lot of pages will share common components. Except maybe the admin part.

As this is a big change, maybe a slack channel could indeed be good to discuss whenever something come up. I didn't know there is already a Domoticz slack ?
We could even regularly have some "demo" to check the progress and be sure everyone agrees with the work.

I think I could start looking at all this by the end of the year, maybe digging a bit on the prerequisiste before :) I'll let you know.

[gizmocuz]

Sound like a great plan !! Could you contact me on the forum (gizmocuz) so i can send you a invite for the slack channel ?

[gaeljw]

@gizmocuz Just created my account (gaeljw), it seems I can't send private message until I have some posts on the forum. Can you send one to me ?

[gizmocuz]

@gaeljw , Thanks!! i just send you an invite/mail

[boschr]

Sounds like a - really - good idea.

Yesterday i updated Domoticz to the latests Beta and now it's all broken. I see a lot of javascript errors in the console. Mostly about missing ("not defined") jquery (i was shocked: version 1.12?). Whole UI is gone so i cannot see/do anything in the UI! Any idea to fix this?

In my opinion it's not necessary to (fully) commit to the current graphical user interface. It's (a bit) outdated (from a developers perspective). I think it's an good idea to maintain - as far as possible - the functional user interface. But also here there are (a lot) improvements possible through new insights ;) (especially for the forms).

[sweetpants]

@boschr as far as i know there is nothing changed to the GUI yet. I'm on latest Beta too and have no issues at all.

[boschr]

@sweetpants i guess it's all about this:

Refused to execute script from 'http://*:8084/js/jquery-1.12.0.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

But there is nothing at js/jquery-1.12.0.min.js. It says: "Domoticz offline".

Edit: it's only in Chrome (version 70) after an "Empty cache and hard reload". In Firefox it's still working.

[gaeljw]

FYI, we are working on this Angular7+ migration. Next news in few weeks... :)

[gorfo66]

Good luck !
I think this will be a great improvement. I saw in some tuto that Domoticz was slower than some competitor and this is probably partially linked to the AngularJS stack which is not known as really fast.

Migration of all the jQuery plugin may by the way be a big big challenge.

[landaisbenj]

Hello. Thanks for the work. Can i take this opportunity to ask for a improvement of uniformity on "id" and "class" for item on all tab ? Dom's item have 4 different way to manage them (dashcontent item, light/utility content item, scene content item and weather and temp content item)... And if we want to make our own design it's pretty hard (but i know, it's doable).
Maybe suppress all row.divider, make them grid. Suppress all clearfix and if item on all tab can be: #main-view > #tabwidget > .item and item not a table but just all div we can easily manage them with flex...

[gaeljw]

@landaisbenj You're totally right but I think that is the next step.

To ease the migration process which is already not an easy step and the potential issues we will have once the migration is done, I want to keep the code the most similar to what we have now.
Even if some piece of code are really ugly or whatever, I want to keep them for now.

The cleanup must be done after we have successfully migrated to Angular 7+ and we are confident that there is no regression.

For the same reason, I'm keeping some very specific jQuery piece of code (for the dialog for instance) that will someday after be replaced with a proper Angular plugin/lib.

[landaisbenj]

Ok thanks. It's just for back up my idea.. in my view i should try to separate engine of other; keep all function for hardware and device, and make another code for design who can be modified anytime alone. But i'm not coder :( So good luck and take your time :+1: it's already a great job.

[boschr]

Any progress on this? I like to follow potential updates, but there's no feature branch visible.

[gaeljw]

@boschr Still in progress, I have to admit it's taking longer than I expected.

I'm on the Administration pages, everything else should be done.

Branch is in my fork: https://github.com/gaeljw/domoticz/commits/feature/migrate-to-angular

For now I have duplicated the folder www (current AngularJS) to www2 (Angular7+) to ease my work but there will some cleanup once everything is migrated of course.

[devrosx]

any updates? I look forward to this patch

[gaeljw]

Ongoing.. I started the pages will all configuration tabs to setup Domoticz but I have to admit with holidays and summer, it's gonna take few more months..

[boschr]

I saw your last commit was a few days ago. Which means there is still progress :) and that makes me smile. I'm curious about the progress your expectations on it.

[gaeljw]

Yeah, not going as fast as I would like but definitively going to the right direction. I think there is something like 5/6 pages left to do.
Then we will need a good period of testing I guess :)

[devrosx]

hello, can i test it somehow allready? you branch looks almost ready

[gaeljw]

Hello @devrosx, I had not a lot of time lately but yeah it's almost ready.
You can already have a look to it if you are able to locally run NPM.
Clone my branch and have a look to https://github.com/gaeljw/domoticz/tree/feature/migrate-to-angular/www-src, you should find everything you need.
Please feel free to make nay comment.