Monday, February 7, 2022

The structure of the interaction between the backend and frontend

Client (Single Page) Applications

AJAX allows you to load data without refreshing the page. It is most used in frameworks such as Angular and Ember. Once built, such applications are sent to the browser and any subsequent rendering is done on the client side (in the browser).

This frontend communicates with the backend via HTTP using JSON or XML responses.


Universal/Isomorphic Applications

Some libraries and frameworks, such as React and Ember, allow you to run applications on both the server and the client.

In this case, the application uses both AJAX and server-rendered HTML to communicate the front-end with the back-end.

Which architectures determine interaction of backend and frontend


Server applications

In this case, HTTP requests are sent directly to the application server, and the server responds with an HTML page.


Between receiving a request and a response, the server usually looks up information in the database on request and embeds it in a template (ERB, Blade, EJS, Handlebars).


When a page is loaded in a browser, HTML determines what will be shown, CSS determines how it will look, and JS determines any special interactions.


Communication using AJAX

Another type of architecture uses AJAX (Asynchronous JavaScript and XML) for communication. This means that the JavaScript loaded in the browser sends an HTTP request (XHR, XML HTTP Request) from within the page and (historically) receives an XML response. You can now also use the JSON format for responses.


This means that your server must have an endpoint that responds to requests with JSON or XML code. Two examples of protocols used for this are REST and SOAP.

The structure of the interaction between the backend and frontend

Client (Single Page) Applications AJAX allows you to load data without refreshing the page. It is most used in frameworks such as Angular an...