How to properly separate backend and frontend in complex web applications?

Question

Backend

How to properly separate backend and frontend in complex web applications?
For example, a complex application is being developed using django, symfony, or other frameworks. For the frontend, for example, angularJS is used. Interaction should be completely separate should it be? For example using the REST API? Or in views to connect Angular for each application? I'm interested in making independent applications as much as possible, and how front-end developers develop views independently of back-end developers in production when developing complex projects.

Answer 1

SPA is a full-fledged self-sufficient application, and therefore putting this stuff into a separate repository is quite a normal solution. An analogy is the development of mobile applications and the backend to it. It will be at least inconvenient to conduct such development in one repository.
And if everything is clear with mobile applications, then with the frontend they can be muddied. For example, you want to make the login page just in Symfony/Django, and then redirect to SPA after the authentication token is received.
again, I don’t see any problems in this case, keep everything in different repositories and use the frontend as a dependency to the backend (so that the already built frontend application is connected).
or even more interesting. Some kind of data preload. For example, we may want to inline some data into html that the backend generates. So that this data is available to the client even before the angular is loaded. In this case, again, we can generate an entry point using a ready-made html template supplied to us from the frontend and use some twig / jninja to inline json into the page body:

function data() {
    return {{data | json}};
}

But these are very rare cases.

Answer 2

It is important to understand what kind of project is being considered. If this is really an application that is suitable for SPA, then advice with a completely independent development, in separate repos - is suitable.
If the project is content-based and there will be a part available to search engines, anonymous and all that - everything is more complicated and faster, with a strong desire to use angular, you will have to do a lot of SPA. And selectively.
The thing is that with the development of the project, when questions arise about search engines, speed and all that, it turns out that angular is completely unsuitable for this. Things like prerender solve the problem only in the simplest cases and require non-trivial approaches and other crap when developing the functionality. Here we are talking about redirects, 404, the ability to put meta tags, noindex and all that.
People may claim that both 404 and 301/302 prerender supports, but the effort that all of this adds up to is 100 times greater than what is required with the standard approach, when html renders the backend.
Those. angular and the like are only useful when applied correctly.
The question did not mention the specifics of the project, therefore, perhaps my words are out of place, but - warned - armed.
Thank you.

Answer 3

You just make a RESTful API on the back, and use anything as a client: SPA, native, mobile, etc.
That is, never link: logic, data exchange and their presentation.
Design - in the same way, based on what data and how it should look on the client and what "levers" to provide users.

Answer 4

1 approach - 2 repositories, one for the frontend, the other for the backend.
2 approach - front inside the backend project. The only thing that will happen is that there will be commits for both parts in one repository, but I can’t say that this is a big problem, after all, filtering, indexing commits for certain parts, etc. I worked like that, I can not say that it was not convenient. You just have the opportunity to raise the entire project at once. Otherwise, you need to configure routing, etc.