Къде поставяш границата между фронтенд и бекенд…

Границата е на ниво API. Backend отговаря за:

Бизнес логика
Управление на данни (база данни, кеш)
Авторизация и автентикация (ако не е отделен като отделен сервис)
Предоставяне на данни и функции чрез API (REST, GraphQL и др.)

Frontend отговаря за:

Потребителски интерфейс (HTML, CSS)
Взаимодействие с потребителя (JavaScript/Ruby с Hotwire и др.)
Консумиране на данни и извикване на функции чрез API на бекенда
Представяне на данните, получени от бекенда

В класическия подход, бекендът генерира HTML страници, а фронтендът само добавя интерактивност. В SPA (Single Page Application) границата е по-ясна, тъй като взаимодействието става изключително чрез API.

Пример:

# app/controllers/api/users_controller.rb
# Бекенд: Отговаря за получаване на потребителя от базата данни и форматиране на данните за фронтенда
class Api::UsersController < ApplicationController
  def show
    user = User.find(params[:id])
    render json: user.as_json(only: [:id, :name, :email])
  end
end

// app/javascript/packs/user_profile.js
// Фронтенд: Отговаря за заявка на данни към бекенда и тяхното показване
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId се получава на фронтенда
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

В хибридните подходи, като Hotwire, част от логиката за рендериране може да бъде прехвърлена към бекенда, но взаимодействието все още се основава на предаване на данни или HTML фрагменти чрез специфични протоколи (например Turbo Streams).

# app/controllers/posts_controller.rb
# Бекенд: Рендерира HTML за Turbo Stream
class PostsController < ApplicationController
  def create
    @post = Post.new(post_params)
    if @post.save
      render turbo_stream: turbo_stream.append(:posts, partial: 'posts/post', locals: { post: @post })
    else
      # Обработка на грешки
    end
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end

<!-- _post.html.erb -->
<!-- HTML фрагмент, който се изпраща към фронтенда чрез Turbo Stream -->
<div>
  <%= post.body %>
</div>

Основният принцип: бекендът предоставя данни и услуги, фронтендът ги консумира и визуализира за потребителя.

Къде поставяш границата между фронтенд и бекенд разработка?