Lightweight rapid development Web UI

[PaulCa]

Hi guys,

tldr; I need recommendations for lightweight web frameworks for a home automation front end.

I'll start by saying I'm a professional software engineer for some 15 years. It's been a while since I was in a project working on a Web UI or GUI and even then it would have been full enterprise stack stuff. So I'm definitely behind the times and I don't need that level of enterprise for my current needs.

I am designing and implementing a home automation system. Some details in previous posts here, but I also cross link this thread of my ramblings (if you are interested) in the design the heating controller. https://www.automatedhome.co.uk/vbulletin/showthread.php?5951-Hi!-DIY-Home-automation-system-build

What I need is a lightweight, easy to get up and running, easy adaptable, hackable, open source web ui framework.

Requirements are mostly data display in easy to read large text displays and arrays of controls for switching things on/off, changing target temps, profiles, modes, heating on/off etc. Pulling graphs in from Cacti etc.

Security obviously becomes an issue when these are to be accessed remotely, but for now I'm willing to just firewall it and SSH tunnel with my phone to get port 80 access. It would be nice if the web ui framework included decent OAuth security and was well maintained.

 

[Deleted member 77746]

That's an easy answer.... bootstrap!

Current version: v4.3.1
https://getbootstrap.com/

 

[AHarvey]

bootstrap is great for front end design, and I know I've seen templats for dashboards.

One option we use at work on locally hosted servers is Elasticsearch and Kibana. It's great when it comes to data and dashboards and it's opensource. I've no idea what the footprint is though as I'm a frontend user.

 

[PaulCa]

Thanks, but,

Bootstrap if far too low level it's just a wrapper around JQuery for styling Twitter. I don't even think it has a REST api call in it (maybe with JQuery you can do an HTTP GET). Normally a web UI framework will "use" bootstrap, but using bootstrap and JQuery is a bit too low level although... I could end up there.

ElasticSearch is a MASSIVE scale data search engine for storing data, indexes to it and performing searches on it. Not sure about Kibana but elastic search footprint is huge, though you can get small scale embedded versions of it inside webapps. All you need to know is it's Java based, so minimum of 4Gb to run "Hello World" these day.

Friend in work has suggested: https://aurelia.io/home

 

[planty]

If it was me I would be choosing Vue.Js - you can use something like Vuetify or Bulma which would help with with the actual UI design - they have plenty of UI components like bootstrap which should help.

 

[AHarvey]

Thanks, but,

Bootstrap if far too low level it's just a wrapper around JQuery for styling Twitter. I don't even think it has a REST api call in it (maybe with JQuery you can do an HTTP GET). Normally a web UI framework will "use" bootstrap, but using bootstrap and JQuery is a bit too low level although... I could end up there.

ElasticSearch is a MASSIVE scale data search engine for storing data, indexes to it and performing searches on it. Not sure about Kibana but elastic search footprint is huge, though you can get small scale embedded versions of it inside webapps. All you need to know is it's Java based, so minimum of 4Gb to run "Hello World" these day.

Friend in work has suggested: https://aurelia.io/home

What about one of the python based web solutions, flask, django etc?

 

[PaulCa]

What about one of the python based web solutions, flask, django etc?

I will have to explore this. There are quite a few things that would be much easier if I did it in the same process. In my system most components are distributed. I am afraid to put GUIs (vai REST or whatever) on them I will need to wrap their data layers in network micro-services which, while not a big deal is just extra work.

The fear I have with these frameworks is they tend to stipulate that you create a "Flask application", rather than just call to them as a service. That could be too intrusive, but I'll have a play.

 

[PaulCa]

Flask looks quite interesting with it's REST extension.

The thing that concerns me is that it's run with your script as an argument to flask. So my __main__ method will not be called and cannot run. I would need to flaskify this and out of pure irritation I might not want to do that. Too many people write application frameworks with the blind sighted belief that their framework is all people need and that everyone will just port their full application over. What exactly is wrong with calling into Flask like:

flask.app.update() or something?

 

[mid_gen]

Had to do web frontend a couple years ago for some tools.

Used Angular and Bootstrap, was pretty simple to get up and running connecting to REST services.

No doubt being JavaScript this is all uncool and not used anymore though in favour of more daftly named toolkits

 

[visibleman]

Friend in work has suggested: https://aurelia.io/home

If you're looking at JS frameworks like Aurelia, then it's worth considering Vue, React, Angular, Meteor (although it's a bit more than just a JS front framework), Ember (quite like this if you're dealing with OAuth), Polymer etc.
And you could also throw NodeJS into the mix with any of the above if you really want.

Bootstrap if far too low level it's just a wrapper around JQuery for styling Twitter.

It's a bit more than this