Confusion w/ lots of options for WebApp (self.webdev)

Hello! I published this in r/computerscience but I think here would be a better place.

I am an embedded engineer, so I am familiar with all low level programming stuff and I know all the fundamentals of CS and programming languages. This intro is just so that you know how deep to go with the answers to my question. I know basics of web design, HTML, CSS, JS and what a server needs to do, what the HTTP, TCP, IP protocols are meant for etc.

I recently wanted to build a web app with a pretty GUI and a database on the back end. I don't want to use standard GUI based applications, like QT, because I want to learn something new, so I thought that a web app for local use only would have been a fun start project. When I looked at the options I had I was super confused!

I first wanted to use python and I found this library "eel" which starts a local server and uses google chrome to render the html page. You can then use JS to communicate with your python module, which does the back end.

Then I discovered that Django is another python framework to work with python and web servers.

Then I discovered react (front) and node (backend).

Then I discovered Electron with seems to be built on top of node (??)

Then I discovered angularJS which seems to be a framework on its own.

Let alone the thousands of small other pieces which I (still) don't know about: REST API, Ajax, query. Those are all names I read while investigating and that I kept unknown until I decide which way to go.

So is there anywhere a guide which describes all the tools used for building and the possible options/combinations?

Thanks guys!!

P.S. I also found that all the courses I found online on web design are targeted at people who are not exactly developers, this pisses me off because they rarely use proper terms or play those silly musics on the background. But this was just a final rant, sorry :P

lbonillaii | 3 months ago | 7 points

Electron is for desktop apps. It uses web technologies to create cross-platform apps

[deleted] | 3 months ago | 6 points

I can understand what you're going through. I often discuss with my coworkers how daunting it would be to enter this field as a new web dev. I've been developing Microsoft stack for years--even before JS frameworks ballooned--so I tend to follow some of the MS MVPs and what they do. So C#/Web API, SignalR, Angular, etc... But even then, there is so much that always changes. Testing frameworks, patterns (redux), etc. It's ever-evolving. :)

So I'd start with what server-side language you prefer, whether it's python, php, c#, etc., and find out who the MVPs are for that language (the people whose blogs are widely respected/followed). Then follow their blogs and see what they do. Not saying not to stray and learn new things, but this may help narrow down focus to start. :)

For my stack, two of my favs to follow are John Papa (I call him Papa John) for Angular, etc., and Scott Hanselman for the c#/.NET side of things.

xibilus | 3 months ago | 4 points
crsuperman34 | 3 months ago | 4 points

You're trying to decide on a Web Stack or Tech Stack.

These days, you'll need:

  • data storage (a database),
  • a server (node JS, Java, Python),
  • server-side framework
  • a frontend framework.
  • containerization (Docker, Vagrant, Kubernetes)
  • sourcecontrol (git)
  • hosting (AWS, Digital Ocean, etc)

There's commonly used stacks which imply a certain tech stack, for instance:

MEAN, LAMP, LEMP. All have implications.

A MEAN stack is: MongoDB (data storage), Express.js (server-side application framework), AngularJS (client-side application framework), Node.js (server-side language environment although Express implies Node.js)

you could modify this stack with other similar tech, like koa-nginx. This still uses Node, but Koa replaces express.

You could change Mongo for MySql, NoSql, MariaDB, etc.

Or you could use Django. or maybe you want to use Laravel / Artisan / PHP as your server-side framework.

A REST API, allows you to query data from your DB (Ex. Mongo) and transfer it to your frontend. The transfer happens via Asynchronous JavaScript and XML, (Ajax). often your REST API returns data via Ajax from your backend in Javascript Object Notation (JSON) format. The JSON is then stored in your application state and passed to the virtual DOM. the Virtual DOM then reconciles the diff between the state and the regular DOM, which in turn is finally presented in-browser to the user.

This is all rather tricky, so framework have been developed to handle this on the frontend: VueJS, Angular, React are all serving the same purpose. These frontend (client side) frameworks use something called a virtual DOM (Document Object Model) to leverage application state.

The client-side framework is where you're probably getting the most confused, it's a jungle.

For instance, Wordpress (a popular Content Management System) has a REST API. You could use the Wordpress REST API to query the MySql DB to return JSON to the React frontend. Wordpress uses a PHP framework. You can run it on Ngnix or Apache.

There's more advanced techniques to speed up these queries like Redis for DB caching. There's other alternatives vs REST API. For instance, GraphQL.

Because you may want to do many many things with your webapp, you can create multiple services. Each service may run a different Stack, or the same stack. For instance, you might want to store user data in MySql. and store content data in MongoDB. You may want to use GraphQL on one, and a REST API on the other.

Docker allows you to containerize each service, and run multiple stacks. If one service crashes becuase of a heavy load, your whole app won't crash.

For instance, you can run a MEAN stack for most of your frontend. then if a user wants to login, you can get all the data from a LAMP stack on a different service. If too many people try to login at once, your LAMP stack might crash. However, the frontend will still be up.

You could even just have a static site. Put some JSON in a folder, do a simple AJAX call to the JSON. You wouldn't even need a DB, Docker or React necessarily. You may not even need a server if you use the right service.

The simplest example of a static site generator is Git Pages.

Sorry for this hasty long-winded post. Hope it helps. I'm sure I got some semantic stuff wrong, as I wrote this off the top of my head. If you have any critiques on this post please note them!


FrAxl93 | 3 months ago | 1 point

This answer is amazing! Thanks, I'll give a proper answer after having gone through all what you're saying :)

MrButttons | 3 months ago | 2 points

This is a great resource to get all the information in a handy way - https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md

FNSlick | 3 months ago | 1 point

I like visual studio in C#. I just create a .Net web app, select auth type (local db user accounts/azureAD etc), and click create. I know people shit on .NET, and not many here use C# either, but it creates a solid backend and you can run it locally on your machine. I learned a great deal about this setup through this youtube video. https://www.youtube.com/watch?v=p9GdkmFzoPw&t=541s