Фронтенд жана бэкенд иштеп чыгуу ортосунда чекти…

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 -->
<!-- Turbo Stream аркылуу фронтендге жөнөтүлгөн HTML фрагмент -->
<div>
  <%= post.body %>
</div>

Негизги принцип: бекенд маалымат жана кызматтарды камсыз кылат, фронтенд аларды колдонот жана колдонуучу үчүн визуалдаштырат.

Фронтенд жана бэкенд иштеп чыгуу ортосунда чекти кайда саласың?