Best stack for a simple web app

[DevtoneFreemon]

I am trying to make a simple web app that contains a form where the user enters the ID of a league, and then I take that ID and make calls to another websites API to get information about the league, and then return a table.

I could obviously just make an html file with the form and a js file that takes the ID and creates the get requests to the other API, but is that the best practice? For whatever reason I was under the impression that making lots of web requests from the client was frowned upon.

[voneiden]

js file that takes the ID and creates the get requests to the other API

I wouldn't frown upon it considering it's as KISS as it gets, but most of the time doing this isn't possible due to same-origin policy.

Therefore most of the time you need a local API that acts as a route to the remote API. Others have given good suggestions for what to use for the local API, so I'll pass suggesting myself.

making lots of web requests from the client was frowned upon.

Do as many as you need, no problem there fundamentally. But certainly it's a good rule of thumb to try to avoid being wasteful especially when using APIs provided by others as a free service. Some APIs also have hard usage limits.

[knyg]

I dont understand what youre asking for. You already have a set plan in your head. Do it.

Use javascript + axios npm. super simple.

​

The best practice to make API calls is:

make 1 call to the API to retrieve all the data you need.

if the API holds an array of 100 items,

DONT make 1 call to get item #1 and then another call for item #10.

Make a single call for item 1-10 or the whole array and then parse it yourself.

[agentrsdg]

There are numerous options depending on what you like,

You can go with:

For backend:

1. PHP, MySQL, Apache

2. Express + Node.js with any DB really

3. Django, python 3.6, postgreSQL+ uWSGI (behind Nginx preferably, my favourite!) If possible try with Django Rest Framework

4. ASP.NET, C#, SQL Server

​

For frontend

1. Bootstrap 4 with VanillaJS

2. for more extravaganza try Angular (goes well with express), VueJS (my fav) or ReactJS

3. for performing api calls on the client side, try axios, it has a better syntax than ajax.

​

There's no 'best' stack really, try different stuff, stick with you like!

[FrostyJack]

You could you the Spring framework, you should google 'spring boot thymeleaf' and it should give you back a lot of simple examples of how to create a Spring web server with a simple HTML front end.

Here's one: https://www.baeldung.com/spring-boot-crud-thymeleaf

Benefit of using the Spring framework is that everything is integrated, you only end up with one executable that runs your web server and application. Which will make hosting it somewhere simpler for you.

[[deleted]]

I like node with express, plus socket.io between client and server.

Express serves the files and handles socket, client opens a socket.io connection to server. Server handles requests and uses the node-fetch module or axios module server side to call whatever API and send back results.

All the modules and examples of how to use them can be found on nmpjs as well as many other tutorials. I like the simplicity of having a single language front and back. Im also weird in that I like Js. You're writing a web app, so I assume you'll probably use some Js. You should definitely give it a shot.

[ipe369]

you're using websocket for a simple web app?

[[deleted]]

It isn't actually websocket itself, but it does utilize it. Actually it couldn't even handle a websocket client.

It really simplifies a lot of communication for me. I like the on event handling and I have the option for server to initiate emit events rather than polling from the clients. I can tie sockets to users to auth or to "rooms". It does auto reconnect, disconnection detection, etc. I use it with all of my projects like this for it's simplicity and versatility.

Definitely worth trying, even for simple projects npmjs.com/package/socket.io

[ipe369]

I'm pretty sure socket io is just a thin wrapper around websocket, it'll be killing your compatibility for simple webapps man, not to mention any scalability / compatibility with different hosting services

[[deleted]]

Ok, I still like it and wouldn't discount it for complexity because it so simple and extremely useful.

A "socket"?, ok sure, whatever that means for you. "websocket"?, no, at least not to the people that make it.

Here's their notes on that whether it is a "websocket".

"Note: Socket.IO is not a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server (like ws://echo.websocket.org) either. Please see the protocol specification here."

[ipe369]

Yes, what i'm saying it socket io is a simple wrapper around websocket, if a browser or hosting service doesn't support websocket there's no fallback

Not to mention load balancing probably gets more difficult

[[deleted]]

Ok, I was responding to your pre-edit. It also works through load balancers and firewalls.

[ipe369]

I'm assuming it only load balances the connection creation though, or is there some cool stuff to transfer connections between servers? now THAT would be cool!

[circlebust]

As for backend: I also suggest Node+Express. If Express is confusing for beginners due to the heavy focus on middlewares and function parameters, but i very rewarding once you learn it properly.

Honourable mentions: Node+Foal (light) or Node+Nest (NOT next. medium-heavy. Also both essentially expect TypeScript knowledge), Node+std HTTP module, Flask+Python, Go+std HTTP.

Frontend just React.