Дар кадом ҷой ҳудуди байни таҳияи фронтенд ва бэкенд…

Ҳудуд дар сатҳи API мегузарад. Бекенд масъул аст барои:

Мантиқи бизнес
Идоракунии маълумот (асосӣ, кеш)
Иҷозат ва тасдиқ (агар дар хидмати алоҳида набошанд)
Таҳия ва пешниҳоди маълумот ва функсияҳо тавассути API (REST, GraphQL ва ғайра)

Фронтенд масъул аст барои:

Интерфейси корбар (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>

Принсипи асосӣ: бекенд маълумот ва хидматҳоро пешниҳод мекунад, фронтенд онҳоро истифода мебарад ва барои корбар визуализатсия мекунад.

Дар кадом ҷой ҳудуди байни таҳияи фронтенд ва бэкенд мекашӣ?