How is client-server communication organized when using js frameworks?

Question

backbone.js

Hello! I have been wondering for a long time - how is the development of a one page application in the real world? I have several ideas about projects, I would like to practice backbone and laravel in conjunction, but I don’t quite understand how best to organize client-server communication.
The biggest question I ask myself all the time is how to render views? In my understanding, we create a controller on the route, which simply gives json with data for collections .
I would like to hear advice not only on this subject, but also in general about your techniques for approaching such projects. Thank you!

Answer 1

how to render views?

On the client side, of course, that's the whole point of a SPA.

In my understanding, we create a controller on the route, which simply gives json with data for collections.

In addition to displaying data, they still need to be manipulated. Start by creating a rest-api.

Answer 2

At the moment, communication most often happens through xmlHttpRequest.
The trello you mentioned runs on a websocket.
Or did you mean the concept of reactions to client changes / the arrival of new data from the server?
Then the application requires two-way connectivity (i.e. the client pulls the server and the client server), then the webSocket and similar event models. Or an update based on timers and simple ajax - but this is justified in a very small number of situations.
If the application does not use the client's reaction to changing data on the server, then you do not need to constantly maintain an active connection, and simple ajax is used. Received an answer - updated the model - generated a request - received an answer - and so on in a circle.

Answer 3

In principle, you are right, the server will give json data, as an exception, there may be html forms. On the client, you will need to track clicks on links and trigger backbone routes, for example:

$('a:not([data-default])').on('click', function(e) {
        e.preventDefault();

        // код упрощен для понимания, необходимо проверить, не находимся ли мы на текущем роуте
        // или существует ли вообще такой роут 
        router.navigate(link.pathname);
});

In the router, you can create a model and request data from the server, then render your page. I recommend paying attention to the marionettejs.com/ library. It adds useful components like Marionette.Behavior, CompositeView, regions, UI element binding, which will help if you still need to pass html.