epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

How to create a modern web page (app?)

Mon Feb 05, 2018 3:45 pm

I remember using NCSA Mosaic and compiling the CERN HTTP server...

I would like to build a few web pages to allow configuration and control of some apps on a Pi.
I can install lighttpd, write an HTML page and a few cgi scripts with emacs. Maybe add a touch of javascript on top.
That would take me a few hours from start to finish.
It'll work, and it will look like crap, too.

I'm interested in something modern that would look good.
I'd prefer not to have to install and configure a web server per se.
System-level access required (like a cgi)
Self-hosted, open-source, free and simple (no mandatory "database", "jQuery"...)
I'm thinking of Go, perhaps Node.js (no PHP, I suppose perl is cold by now)

Anything you can recommend?
Thanks in advance.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

scotty101
Posts: 2987
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 4:21 pm

Two things I've tried in the past.
https://expressjs.com/ - A web framework for node.js
https://pythonhosted.org/Flask-Bootstrap/ The combination of python/flask as the server side and bootstrap as a modern web front end library.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 5:17 pm

scotty101 wrote:
Mon Feb 05, 2018 4:21 pm
Two things I've tried in the past.
https://expressjs.com/ - A web framework for node.js
https://pythonhosted.org/Flask-Bootstrap/ The combination of python/flask as the server side and bootstrap as a modern web front end library.
Very interesting. Thank you!
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 5:56 pm

epoch1970,
It'll work, and it will look like crap, too.
I feel the pain. Been there. Done that.
I'm interested in something modern that would look good.
Making a modern web page that looks good requires an in depth understanding of HTML and CSS. Personally I think it's all a big mess and I'd rather not waste my life thinking about it. To that end I use bootstrap to style things: https://getbootstrap.com/docs/4.0/examples/

Even simply including bootstrap in a page starts to make it look better than the browser defaults.

You can use bootstrap themes to get a style you like. I like the "cyborg" theme. https://bootswatch.com/cyborg/ there are many others.
I'd prefer not to have to install and configure a web server per se.
Well... if you want a web page you need something to answer to HTTP requests from the web browser.

Recently that "something" for me has been node.js.

A handful of lines of code in node.js makes a web server.

The magic part of node.js is that it is very good at juggling requests for web pages whilst at the same time talking to GPIO on you Pi or attached sensors or... well, pretty much anything else you want your program to do.

Don't listen to the Python guys. That is such a harder route.

Where all this becomes an "app" is when you have Javascript in your web page that interacts with your server. In this case using the same language in your server code as your web page code makes the mental effort a lot less.

I suggest looking at the express.js library with node.js to make creating a web server trivally easy.
https://expressjs.com/

Like you I don't want complex libraries and "frameworks" in my web pages or my server. They are all the rage now a days. And the "framework of the month" changes every week! Might be useful if you really need what they provide. Otherwise it's just complexity for nothing.

epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 8:57 pm

Heater wrote:
Mon Feb 05, 2018 5:56 pm
Making a modern web page that looks good requires an in depth understanding of HTML and CSS. Personally I think it's all a big mess and I'd rather not waste my life thinking about it. To that end I use bootstrap to style things: https://getbootstrap.com/docs/4.0/examples/
Thanks! So that's 2 votes for Bootstrap, and 2 votes for node.js/express.

I went to getbootstrap.com. To summarize a long rant I deleted about meaningless divs and classes, "Sass variables", "mixins" and "JavaScript plugins built on jQuery": I feel it's going to be hard...
Why did XML fail to replace HTML/CSS? Ah yeah. XSLT, that was "too hard." My turn, I guess.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 9:47 pm

epoch1970,

Yeah.

Never mind all that nonsense.

My most basic HTML pages using bootstrap look like this:

Code: Select all

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
Nothing in there but including the bootstrap css. Which I normally serve from my own server rather than rely on maxcdn.bootstrapcdn.com.

If you check the bootstrap documentation you see that any javascript is optional:
https://getbootstrap.com/docs/4.0/getti ... roduction/

I will fight like hell to avoid using jQuery.
Why did XML fail to replace HTML/CSS?
No idea. XML is horrible. HTML/CSS is much the same.

What bugs me is that a web page is a potentially a single text file containing a dozen different syntaxes: HTML, CSS, Javascript, SVG, God knows what else. With various escape sequences to get a parser out of one into the other.

And the standards groups that define each of those syntaxes don't seem to talk to each other, so there are all kinds of inconsistencies between them.

If you stand back a couple of yards and look at it you realize that everything that is represented in HTML and CSS could just as easily be represented in Javascript Object Notation (JSON). You are likely to need JS anyway so all that HTML and CSS syntax is redundant!

Meanwhile, creating that on the server can mean the same text is mixed up with PHP and SQL syntaxes. Not to mention various template systems.

No wonder the web is a mess of bugs and a playground for exploits.

OK, rant over.

If we are careful we can avoid all the terrors of the web environment.

epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 10:24 pm

Heater wrote:
Mon Feb 05, 2018 9:47 pm
My most basic HTML pages using bootstrap look like this
Yes, I will keep it simple. A modest use of Bootstrap will be good enough and good for my blood pressure ;)
XML is horrible.
Oh, no. XML is what you want it to be. I will admit writing XSL transforms is sort of a mind-bender.
But the gurus at Bootstrap could have taken care of that by now, and their doc could say things like that:

Code: Select all

<!-- This will be rendered as a super-stylish automagic accordion thing -->
<accordion width="100%" rhythm="fast" version="1234" render-for="IE-4-win">
...
</accordion>

I had a serious brush with DocBook in the past. There were ~400 elements to learn in the dictionary. But at least they made sense.

I guess that's enough on that subject ;) Thanks again to you both.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Dean_dean
Posts: 1
Joined: Thu Aug 02, 2018 1:20 pm

Re: How to create a modern web page (app?)

Thu Aug 02, 2018 1:34 pm

Recently saw this post on Medium: https://eze.tech/blog/web-apps-turn-web ... obile-app/
Really worth reading!

droleary
Posts: 170
Joined: Fri Feb 09, 2018 3:45 am
Location: Minneapolis, MN USA
Contact: Website Skype

Re: How to create a modern web page (app?)

Thu Aug 02, 2018 2:56 pm

epoch1970 wrote:
Mon Feb 05, 2018 3:45 pm
It'll work, and it will look like crap, too.
So what? Let form follow function. Work out how to make it work first, then you can worry about making it look pretty. It's not like you can escape writing that core logic, and then you can simply wrap it inside a web/app framework that has some default CSS/themes that make it look better.

But, really, why even involve a web stack? Too much is getting bogged down these days because everyone seems to want to push everything through that kitchen sink. Create the core control interface using some form of lean middleware (e.g., MQTT), and then hook into that using whatever makes the most sense from a UI perspective.

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Fri Aug 03, 2018 6:14 am

droleary,
But, really, why even involve a web stack?...
Good question. Let's see...

1) Creating a GUI in a browser is easy. One can put up all kind of buttons, text boxes, etc, etc. with very little effort. Yes it might look like crap but it's there and it works.

2) A GUI in a browser is cross platform. Such a GUI can be viewed on any machine that has a browser, which is everything useful now a days.

3) No need to distribute separate builds for all your users platforms: Windows, Mac, Linux, Ios, Android etc, etc.

4) No need for your users to install anything. They just use it. Boom.

5) There is a lot of capability in the browser that can be used easily form all the layout options, fonts, images, sound, video, accelerated 3D graphics etc, etc. Much easier than doing that in a typical GUI tool kit.

6) A half decent and complex web interface can be served up by even the smallest devices now a days. No need for them to have screens and all the resources required for them to great a GUI.

Now, I wonder what you mean by "WEB stack"? Traditionally that implied all that weight of Apache, PHP, SQL, etc, etc. All of which is a big complicated mess.

For me now a days it just means writing a few lines of Javascript for a node.js server and the web pages.

droleary
Posts: 170
Joined: Fri Feb 09, 2018 3:45 am
Location: Minneapolis, MN USA
Contact: Website Skype

Re: How to create a modern web page (app?)

Fri Aug 03, 2018 3:26 pm

Heater wrote:
Fri Aug 03, 2018 6:14 am
droleary,
But, really, why even involve a web stack?...
Good question. Let's see...
You give a lot of generic features (all of which are debatable), but the fundamental question is about what makes sense on a case-by-case basis. Very few people seem to actually sit down and figure out why, for example, the HTTP protocol is the best choice for their API (hint: it often isn't).
1) Creating a GUI in a browser is easy. One can put up all kind of buttons, text boxes, etc, etc. with very little effort. Yes it might look like crap but it's there and it works.
Same is true for most modern GUI builders.
2) A GUI in a browser is cross platform. Such a GUI can be viewed on any machine that has a browser, which is everything useful now a days.
Only so long as the browser supports the features you're using, or the machine supports the browser you're targeting. The solution is only "cross platform" in the sense that you have to appeal to the lowest common denominator.
3) No need to distribute separate builds for all your users platforms: Windows, Mac, Linux, Ios, Android etc, etc.
But a big need for all your users to connect to your server, or to set up an HTTP server running your stack on their local network.
4) No need for your users to install anything. They just use it. Boom.
Again, as with #2, assumes they already have everything they need that's compatible with your solution. If they don't, per #3, I'd rather have the option of using a framework like Qt to create a port for my simple app connecting to a lightweight backend rather than try to get a port of a modern web browser running.
5) There is a lot of capability in the browser that can be used easily form all the layout options, fonts, images, sound, video, accelerated 3D graphics etc, etc. Much easier than doing that in a typical GUI tool kit.
The problem with browsers is that they try to do everything like that. If you don't use most of it, it's all just bloat that makes your solution more cumbersome than it needs to be. The last thing I want is yet another web site that won't load on a RPi 0W.
6) A half decent and complex web interface can be served up by even the smallest devices now a days. No need for them to have screens and all the resources required for them to great a GUI.
You seem to be focusing solely on the view layer, whereas I was mainly talking about the model and controller layers. While tiny devices can most certainly serve up a RESTful interface using web APIs, I still say defaulting to that kind of solution is a mistake when a more lightweight protocol might actually more features that are useful to a particular project (e.g., stateful transactions).
Now, I wonder what you mean by "WEB stack"? Traditionally that implied all that weight of Apache, PHP, SQL, etc, etc. All of which is a big complicated mess.

For me now a days it just means writing a few lines of Javascript for a node.js server and the web pages.
If you think that using Node won't result in the same mess as other web stacks, you have quite a MEAN journey of discovery waiting for you! ;) My point remains that there are a lot of other great solutions out there, and it's a real shame that so much of the industry has become focused only on web development. For the OP's simple requirement of "configuration and control of some apps on a Pi", I see no reason to believe that anything layered on top of HTTP is the right solution.

epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Fri Aug 03, 2018 4:52 pm

I'm back. (In fact I'm still here, I haven't started on this project.)
I'm beginning to wonder about node.js. It looks cute but recently I've had to "npm install" some software and I can't say I was too impressed by the avalanche of stuff that landed on my machine...

Nobody has anything to say about Go?
(Try as I might, I can't write in Python)
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Fri Aug 03, 2018 6:24 pm

epoch1970,

What is it you had to "npm install"?

It is quite possible to get a lot done with node without npm installing anything. The libraries that come with node out of the box are very comprehensive.

I must admit to being lazy sometimes and npm installing something that makes life easier. And yes it can look like an "avalanche of stuff". Mostly I don't worry, that avalanche only takes seconds to install and is only a tiny percentage of my available storage space. A lot less than all the junk that comes in a Raspbian installation out of the box for example.

Go is great. Kind of fell down on performance and ease of getting anything done when I checked it out some years ago. But maybe things have moved on since then.

Python is to be avoided like the plague.

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Sun Aug 05, 2018 12:09 pm

droleary,
You give a lot of generic features (all of which are debatable),...
"debatable"? I can demonstrate the truth of all my 6 points above if you like.

Admittedly some of those features are not necessarily unique the a browsed interface so we can debate that...

1) Yes, creating a GUI in modern GUI builders can be easy too. My experience of these recently is limited to qtcreator and Lazarus and there I would say they are still not as easy as a web interface.

2) Yes a web interface requires the browser feature support. I don't see that as a problem. 99% of the devices that people use, from phones to tabs to PCs, running Linux, Windows, OSX, Android, iOS, etc are quite up to date and on a par in their feature support.

3) There is no big need for users to connect to any special server or set up an HTTP server. Pretty much any program in any language can be equipped with a built in web server by use of the many HTTP libraries and modules available now a days. On the other hand one can build applications using things like Electron that support the web interface without a server. Microsoft's Visual Studio Code IDE is an excellent example of this.

4) Yes I assume they [users] already have everything they need that's compatible with my solution. Guess what? They do. See list of platforms in 2) above.

5) Yes, the problem with browsers is that they do everything like that and if I don't use it it feels like bloat that makes things cumbersome. Again, that is not a problem, suitable browsers are installed on every device under everyone's nose already. There is nothing bloaty or cumbersome added to my application. It's great to be able to use all those features when necessary.

I bet even a Pi Zero will cope with the typical interface I create.

6) Yes, I'm focusing on the view layer. How to get those buttons, dialogs, images, etc onto a screen and user input back to an application. Beyond that it's up to you. Making interactions stateful over HTTP is not rocket science.

I do agree that other protocols can be preferred for other tasks. For reasons of efficiency, simplicity or useful features.
If you think that using Node won't result in the same mess as other web stacks, you have quite a MEAN journey of discovery waiting for you
Ha! No. Now you have changed the subject from building a GUI to web stacks, including a database, a web server framework and a particular JS GUI framework. MEAN can also include build systems, packaging systems, language translators, testing frame works, etc. See the whole mess here: http://mean.io/

Personally I try to avoid all of that as much as possible. Most of it is not required for small hobby projects. Most of it I loath anyway.

MEAN = MongoDB, Express, Angular, node. Well:

If I'm going to use a database at all I'd like it to be ACID. My current favorite is CockroachDB, an SQL database that is distributed and fault tolerant. Also runs on a Pi cluster nicely.

Angular is a gross, complex, monster that makes thing orders of magnitude harder to build and understand than using plain JS. I'm all for vanilla javascript: http://vanilla-js.com/ I will use React sometimes as it is small and fast and focused on one job.

Express is not really required a lot of the time. But it's easy to use, can be very helpful and does not get in the way.

Node is great of course. Has most of the features on needs to get jobs done even without installing any modules.

Yes, there are other great solutions out there. Please indicate one that checks all the points of my list of web interface features.

droleary
Posts: 170
Joined: Fri Feb 09, 2018 3:45 am
Location: Minneapolis, MN USA
Contact: Website Skype

Re: How to create a modern web page (app?)

Sun Aug 05, 2018 3:35 pm

Heater wrote:
Sun Aug 05, 2018 12:09 pm
droleary,
You give a lot of generic features (all of which are debatable),...
"debatable"? I can demonstrate the truth of all my 6 points above if you like.
The problem isn't their "truth", it's that they're one-sided. It's easy to point out only the positive things you see when you argue in favor of something. It's better for everyone to do a more complete analysis before picking a solution.
1) Yes, creating a GUI in modern GUI builders can be easy too. My experience of these recently is limited to qtcreator and Lazarus and there I would say they are still not as easy as a web interface.
Again, it's not just about the view layer. There is no such thing as a singular "web interface" GUI. What you have is an HTML resource that transacts with an HTTP server in some fashion. How easy either of those are to create depends greatly on your choice of web stack (or the choice to not use one).
6) Yes, I'm focusing on the view layer. How to get those buttons, dialogs, images, etc onto a screen and user input back to an application. Beyond that it's up to you. Making interactions stateful over HTTP is not rocket science.
Uh, that's actually the controller layer. Again, the real issue is what really needs to be done. If it can be better accomplished by something other than HTTP, I say it's a good idea to see what other tools are out there to get the job done.
If you think that using Node won't result in the same mess as other web stacks, you have quite a MEAN journey of discovery waiting for you
Ha! No. Now you have changed the subject from building a GUI to web stacks, including a database, a web server framework and a particular JS GUI framework. MEAN can also include build systems, packaging systems, language translators, testing frame works, etc. See the whole mess here: http://mean.io/

Personally I try to avoid all of that as much as possible. Most of it is not required for small hobby projects. Most of it I loath anyway.
That's the way the web works these days, though: you have to expend effort to avoid the bloat. You pretty much can't separate "building a GUI" from an underlying web stack unless you plan on coding all your HTML by hand. I eagerly await the alternative "truth" that either you can offer or the OP can develop that doesn't involve a lot of extra libraries to make the web GUI work.
Yes, there are other great solutions out there. Please indicate one that checks all the points of my list of web interface features.
I'm not interested in mindless bullet point lists. I want to solve problems. Other than saying they want a web page, I see nothing in the OP's description that actually requires one or even tips the scales in favor of one. There are many ways to set up the code that models "configuration and control of some apps on a Pi". There are many ways to control them other than a web API. There are many ways to access those controllers other than an HTML interface. My point remains that the root problem still needs to be specified and solved. To jump straight to "use a web GUI" as a default solution is just bad advice.

epoch1970
Posts: 1840
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Tue Aug 07, 2018 12:30 pm

droleary wrote:
Sun Aug 05, 2018 3:35 pm
There are many ways to set up the code that models "configuration and control of some apps on a Pi". There are many ways to control them other than a web API. There are many ways to access those controllers other than an HTML interface. My point remains that the root problem still needs to be specified and solved. To jump straight to "use a web GUI" as a default solution is just bad advice.
I started by requesting a way of making a web gui that wouldn't suck.
Why a web GUI? Because (most) people know how to use a web browser, no install needed, nothing to learn.
The contraption will be used for setup/status feedback. In other words and from the point of view of end users, it is a nuisance they would well do without.
What needs to be controlled? I'm not entirely clear on that, but since the device is a headless Pi 3 the usual initial chicken-and-the-egg network setup step is part of it.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

droleary
Posts: 170
Joined: Fri Feb 09, 2018 3:45 am
Location: Minneapolis, MN USA
Contact: Website Skype

Re: How to create a modern web page (app?)

Tue Aug 07, 2018 2:56 pm

epoch1970 wrote:
Tue Aug 07, 2018 12:30 pm
I started by requesting a way of making a web gui that wouldn't suck.
Why a web GUI? Because (most) people know how to use a web browser, no install needed, nothing to learn.
And the answer, HTML + CSS, has been given, but it's useless to spend any time on the view layer until you've figured out a workable solution to the actual problem at hand. Anything can be given a web GUI, to whatever degree of non-suckage you wish, depending on how much work you want to put into it yourself. There are even platforms like Adafruit IO that you could leverage, which offers a web on top of MQTT. What's going to work best for you is pure guesswork until you get more specific on what you want to do.
What needs to be controlled? I'm not entirely clear on that, but since the device is a headless Pi 3 the usual initial chicken-and-the-egg network setup step is part of it.
I'd be surprised if there weren't already a solution to that out there (e.g., have the RPi configured to act as an AP by default so that a user can connect and give it the "real" network settings). If it has a web interface, odds are still pretty good that it's going to be built on a particular web stack, and that's what you're going to need to get working in full despite only a fraction of the code being needed to do the actual network setup. I'm simply advocating for a more lightweight solution, but if that doesn't interest you, so be it.

Heater
Posts: 9478
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Sun Aug 12, 2018 10:33 am

droleary,
Uh, that's actually the controller layer.
.
Not according to the basic definition of Model, View, Controller (MVC). See for example: https://en.wikipedia.org/wiki/Model%E2% ... controller https://developer.mozilla.org/en-US/doc ... chitecture

Of course MVC is one of those ideas that has been extended and adapted in all manner of ways over time. So it'all a bit wooly.
Again, the real issue is what really needs to be done. If it can be better accomplished by something other than HTTP, I say it's a good idea to see what other tools are out there to get the job done.
I do agree. Analyse the problem requirements first. The select a solution. A user interface solution can range from a LED and a push button to a 3D animated data presentation.

Where I differ is in your notion that a browser/web solution is to be put last in the list of options and is to be avoided at all cost.

droleary
Posts: 170
Joined: Fri Feb 09, 2018 3:45 am
Location: Minneapolis, MN USA
Contact: Website Skype

Re: How to create a modern web page (app?)

Sun Aug 12, 2018 2:17 pm

Heater wrote:
Sun Aug 12, 2018 10:33 am
Where I differ is in your notion that a browser/web solution is to be put last in the list of options and is to be avoided at all cost.
I never even implied that. My "notion" is simply that the web should not be the first/default choice when it comes to developing software solutions. That's it.

Return to “General programming discussion”

Who is online

Users browsing this forum: No registered users and 5 guests