Making JavaScript frontend for API Server, reduced server load?

[silentmelodies]

I've had in idea the other day. For example, instead of using a lot of <?php ?> and embedding the info into the html server-side, could we just embed a single JSON string into the HTML with <?php ?> and have nothing else, and then let the client process the embedding, with Angular for example?

I've noticed Instagram's website does a similar thing with React:

 

Pros:

• Cleaner HTML Code
• Making a barrier between the view and the controller/model (having a php file for processing, a Controller/Model, and handle the View client side with JavaScript and a framework, for ex. Angular or React)
• Reduced server load

Cons:

• More load on client

Any more pros or cons to this?

 

[vorticalbox]

I done a few projects where I echoed database results into js variables to process them client side. A con might be that mixing langues can get confusing. I have an code mistake in my php that caused the javascript to use an empty variable. took ages to find the problem as the PHP didn't actually throw anything

[silentmelodies]

4 minutes ago, vorticalbox said:

I done a few projects where I echoed database results into js variables to process them client side. A con might be that mixing langues can get confusing. I have an code mistake in my php that caused the javascript to use an empty variable. took ages to find the problem as the PHP didn't actually throw anything

Hmm. Yeah debugging could be a pain. But performance should be amazing.

[vorticalbox]

2 minutes ago, silentmelodies said:

Hmm. Yeah debugging could be a pain. But performance should be amazing.

that's what i went for on my study project in university this year. Remember that stuff for processing logins should always be done server side as should session checks and the like.

 

If you dont need data real time you could also dump php results into json using a cron job and then use js to parse the data.

[msvelev]

You should apply the MVC pattern and use JS to make calls to the backend where it will return the data that you need and you'll keep it in the model of the JS. Then you just apply modifications to it as you need and bind it to the view. Depending on the application, if you don't have a lot of processing and analytics that needs to be executed on the raw data, you can offload this to the client side. If you have complex logic that needs to be executed, you should keep it on the server side.