Location>code7788 >text

What is Full-stack Separation (FSS), think about it and understand it wrong!

Popularity：984 ℃/2024-10-20 00:23:04

Front-end and back-end separation applicationsrefers to the application of thefront end(user interface and interaction logic) andback-end(business logic, data processing, server response) is split into independent modules, each communicating through the API. The purpose of this architectural design is to improve development efficiency, scalability and flexibility, so that the front-end and back-end can be developed, deployed and maintained independently.

First, the traditional front-end and back-end coupling application vs front-end and back-end separation application

  1. Traditional coupled front-end and back-end applications

    • specificities: Front-end and back-end code are tightly coupled, usually server-side rendered page applications. Front-end pages (HTML, CSS, JavaScript) are mixed with back-end code (e.g., Java, PHP, Python, etc.), and the server-side is responsible for processing requests, generating HTML, and sending it to the client.
    • drawbacks：
      • Inefficient development: Front-end development and back-end development often depend on each other and cannot work in complete parallel.
      • hard reuse: The page rendering logic is coupled with the back-end logic and it is not easy to reuse the back-end logic to other clients (e.g. mobile).
      • Poor scalability: As the complexity of front- and back-end logic increases, code maintenance and extension becomes more difficult.

  2. Front-end and back-end separation applications

    • specificities: Front-end and back-end communication through a standardized API, the front-end developed by a separate team or personnel, mainly responsible for the interface display and user interaction, the back-end focus on business logic, data processing and provide API services. Front-end and back-end can be developed, tested and deployed independently.
    • vantage：
      • independent development: Front-end and back-end development can work in parallel, front-end and back-end decoupled through the definition of the API, the front-end developers only need to call the API provided by the back-end, and do not care about the details of the back-end implementation.
      • Flexibility and scalability: Back-end services can provide unified API services for multiple front-ends (e.g., Web, mobile apps, applets, etc.), and the front and back ends can be extended independently of each other.
      • Better user experience: Front-ends can build richer interactive experiences, such as single-page applications (SPAs) using frameworks such as React, Vue, Angular, etc., which make the page partially refreshed and provide smoother user interactions.

II. Core elements of front-end and back-end separation

  1. front end

    • remit: The front-end is primarily responsible for user interface (UI) presentation and user interaction logic. It is an application that runs in the user's browser and utilizes technologies such as HTML, CSS, and JavaScript to create pages and interact with the user.
    • front-end technology stack: Mainstream front-end frameworks include React, Angular, etc., and usually use build tools such as Webpack to package the code into static resources.
    • Typical implementation: Send API requests (e.g., RESTful API or GraphQL requests) to the back-end through the browser, get the data and update the page, the front-end itself can be hosted on a CDN or static resource server.

  2. back-end

    • remit: The backend is mainly responsible for handling business logic, data storage, authentication and authorization, load balancing, etc. It is usually written in Java, Python, Go, and other backend languages. It is usually written by Java, Python, Go and other back-end languages, providing front-end-oriented API interface.
    • back-end technology stack: Common technologies used in the back-end include Spring Boot (Java), Django (Python), Express (), etc., which use the HTTP protocol to provide data to the front-end.
    • Typical implementation: The backend processes requests from the frontend by exposing a RESTful API, GraphQL, or WebSocket service and returns the processed data to the frontend.

  3. API Interface

    • remit: API is a communication bridge between front-end and back-end. The front-end gets or submits data to the back-end through HTTP requests, and the back-end responds by returning data in JSON, XML or other formats.
    • API Type：
      • RESTful API: A resource-oriented architectural style based on the HTTP protocol, using HTTP methods (GET, POST, PUT, DELETE, etc.) for operations.
      • GraphQL: A more flexible query language that allows the front-end to query specific data fields on demand.
      • WebSocket: A protocol for real-time bi-directional communication, suitable for real-time update application scenarios, such as online chat, real-time push, etc.

III. Working principle of front and rear end separation

  1. user request：

    • A user accesses a front-end page (e.g., a React application) in a browser, and static resources are loaded into the user's browser via a static resource server such as a CDN or Nginx.
    • Front-end applications make API requests to the back-end based on user actions such as clicking a button or submitting a form. The URL of the request is usually the backend's RESTful API.

  2. Back-end processing of requests：

    • The back-end application receives the API request and processes the business logic. For example, querying the database, verifying user permissions, performing calculations, and so on.
    • Once the processing is complete, the backend returns the data (usually in JSON format) as a response to the frontend.

  3. Front-end receives data and updates the view：

    • The front-end application receives the data returned from the back-end and uses it to update the content of the page. For example, displaying user information, refreshing the product list, etc.
    • Since the front-end uses a single-page application (SPA), the page can be partially refreshed for a better user experience and a more responsive page.

IV. Typical architecture for front-end and back-end separation

  1. three layer architecture (OSI): Front-end and back-end separation applications typically utilize the following three-tier architecture:

    • front end layer: Responsible for user interfaces and interactions, usually web applications consisting of static pages, JavaScript, and CSS that run in the client browser.
    • back-end layer: Responsible for handling business logic and managing the flow of data, it is usually a provider of services such as RESTful APIs, GraphQL, WebSocket, and so on.
    • data layer: Responsible for data storage, usually a database (e.g. MySQL, PostgreSQL, MongoDB, etc.) or a caching system (e.g. Redis, etc.).

  2. Microservices architecture (optional)：

    • In more complex applications, the backend can use a microservices architecture to split different functional modules (e.g., user management, order management, payment services, etc.) into multiple microservices.
    • The front-end can call the API Gateway, the back-end API Gateway will distribute the request to the various microservices, and then return the results to the front-end after processing.

V. Advantages of front-end and back-end separation

  1. Development Efficiency Improvement：

    • Front-end and back-end can be developed in parallel, the back-end focuses on providing APIs, the front-end is responsible for interface development, and no longer need to frequently wait for the other side to complete a certain function in order to continue to work.
    • With API documentation (e.g. Swagger) the front-end can be developed and tested based on the interface protocol, even if the back-end service is not yet complete.

  2. Flexible technology selection：

    • Front-end and back-end separation allows the front-end and back-end to use different technology stacks. For example, the frontend can use React or Vue, while the backend can use Java, or Python.

  3. Stand-alone deployment and expansion：

    • Front-end and back-end can be deployed and scaled independently. The front-end can accelerate the loading of resources through CDNs, while the back-end can improve API performance through load balancing and microservice architecture.
    • When business scales, the front-end doesn't have to worry about the technical implementation of the back-end, and the back-end can be independently maintained and optimized.

  4. Enhancing the user experience：

    • The front-end can build rich interactive applications based on Single Page Application (SPA) technology, which reduces the overall refresh of the page and improves the user experience.

VI. Challenges of front-end and back-end separation

  1. cross-domain issue：

    • Since the front-end and back-end may be deployed under different domains, requests initiated by the front-end will encounter cross-domain restrictions from the browser (CORS issue). A CORS policy needs to be configured on the backend to allow cross-domain access.

  2. Data synchronization and status management：

    • In single-page applications, state management on the front-end becomes complex, and the front-end needs to use state management tools (such as Redux or Vuex) to manage global state and API data.

  3. performance optimization：

    • You need to optimize the front-end performance by means of reasonable caching, lazy loading, code splitting, etc. to avoid too large resource files affecting the loading speed.
    • The back-end APIs also need to be optimized for load balancing, database indexing, etc. to ensure responsiveness.

Front-end and back-end separation application** greatly improves development efficiency and flexibility by decoupling front-end and back-end development, deployment, operation and maintenance. The front-end focuses on user interface and interaction, the back-end focuses on business logic and data processing, and both sides communicate through standardized APIs.

<Previous Next>