Как frontend и backend взаимодействуют между собой?

Ответ

Frontend (клиентская часть, например, браузер или мобильное приложение) и Backend (серверная часть) взаимодействуют по сети, обмениваясь данными через API (Application Programming Interface).

Основные способы взаимодействия:

  1. REST API (Representational State Transfer)

    • Принцип: Самый популярный подход. Взаимодействие строится вокруг ресурсов (например, /users, /products) с использованием стандартных методов HTTP:
      • GET: получение данных.
      • POST: создание новых данных.
      • PUT/PATCH: обновление данных.
      • DELETE: удаление данных.
    • Формат данных: Чаще всего используется JSON.
    • Пример: Frontend запрашивает список пользователей, отправив GET-запрос на http://api.example.com/users. Backend обрабатывает запрос, извлекает данные из базы данных и возвращает их в виде JSON-массива.
  2. GraphQL

    • Принцип: Более гибкая альтернатива REST. Frontend отправляет один запрос, в котором точно указывает, какие поля и связанные данные ему нужны. Это решает проблему избыточной (over-fetching) или недостаточной (under-fetching) выборки данных.
    • Пример: Вместо нескольких REST-запросов для получения пользователя и его заказов, Frontend делает один GraphQL-запрос, где сразу просит user с полем name и вложенным списком orders с полями id и status.
  3. WebSockets

    • Принцип: Устанавливает постоянное двустороннее соединение между клиентом и сервером. Идеально подходит для приложений реального времени.
    • Применение: Чаты, онлайн-игры, биржевые котировки, живые уведомления.
  4. gRPC (Google Remote Procedure Call)

    • Принцип: Высокопроизводительная система для вызова удаленных процедур. Использует Protocol Buffers для сериализации данных, что эффективнее JSON. Работает поверх HTTP/2.
    • Применение: В основном для связи между микросервисами внутри системы, где важна скорость и низкая задержка.

Пример простого REST API на Go:

// main.go
package main

import (
    "encoding/json"
    "log"
    "net/http"
)

type User struct {
    ID   int    `json:"id"`
    Name string `json:"name"`
}

func usersHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodGet {
        users := []User{{ID: 1, Name: "John Doe"}, {ID: 2, Name: "Jane Doe"}}
        w.Header().Set("Content-Type", "application/json")
        if err := json.NewEncoder(w).Encode(users); err != nil {
            http.Error(w, "Failed to encode users", http.StatusInternalServerError)
        }
    }
}

func main() {
    http.HandleFunc("/api/users", usersHandler)
    log.Println("Server is running on :8080")
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatal(err)
    }
}

Для безопасности этого взаимодействия используются CORS (для контроля доступа из разных источников), JWT-токены (для аутентификации и авторизации) и обязательная валидация всех входящих данных на стороне бэкенда.