4 Reasons to Separate Web APP UI and API

Unless your web application is 100% client code, you should separate the front and back ends. People often fall into the trap that they shouldn't spend time developing a separate API and client application because it often requires a lot of tweaking, or they think their application is too small and they don't No separation is required.

This kind of application is what I call an all-in-one application. In this kind of application, your business logic and user interface are one entity running on the server. However, there are many benefits to having a web application with independent front-end and back-end.

1. Modularization

One of the benefits of dividing the application into separate front-end and back-end applications is modularity. Because application logic is completely separated from the user interface, your web application may already have a rudimentary modular structure. Modularity helps in many ways, including testing, readability, and maintainability.

2. Reusability

Using a single API, your application logic can be reused by many applications. This means you can create a mobile app that uses the API, or use the API in a completely separate app, or allow others to access the API (free or paid).

3. Content Delivery

Since the client application is a completely independent entity, you can deal with advanced static file serving techniques, while in applications that need to render the UI server-side, These technologies are not available. For example, it is now possible to put entire client applications in cache using NGINX and a few simple rules.

4. Responsiveness

One of the biggest pitfalls of “all-in-one” server-side applications is the aspect of feedback user responsiveness. In server-side applications, the user clicks a button to obtain data. The most common process is described as follows:

1. The user clicks a button to obtain data
2. The browser sends a message to the server Send a request
3. The server queries the database
4. The application performs logical processing on the data
5. The application presents the data in the presentation layer
6. The server returns the response to the user
7. The user will see feedback after waiting for the page to load
8. With a separate client application, you can take advantage of many feedback mechanisms, such as using a loader or a progress bar. Once your request returns (e.g. via an AJAX call), you can update your display.

5. Version control

Yes, I added a 5. With separate API and UI projects, you no longer need to update or deploy two applications at the same time. If a critical issue arises in the newly deployed UI, you can roll it back without worrying about affecting the performance-improving adjustments you made in the API project.

What are the advantages of an overall architecture?

This separated architecture has many advantages. However, there are some benefits to using a monolithic architecture. For example, if your application is included in a project, you can complete development work faster. It's no secret that there is a lot more coding involved with the separate UI and API (but many frameworks make this easier). There are also some security benefits. For example, you don't actually expose the API at all. There are ways to protect an API, but it's better not to expose it. If you think there are other benefits, you can talk about it by leaving a comment and let's discuss it.

Conclusion

For many software developers, this seems to be a normal choice. However, some people, either because they are unfamiliar with the concept or simply lazy, simply do not adopt this architecture. In terms of the overall architecture, there are many examples that may not use this structure but are also very successful. However, what I see more is that separating API and UI will bring a lot of benefits in the future. It is recommended that developers who have not yet tried this concept give it a try and feel for themselves the benefits of front-end and back-end separation.

The above is the detailed content of 4 Reasons to Separate Web APP UI and API. For more information, please follow other related articles on the PHP Chinese website!