სად გიწერთ საზღვარს ფრონტენდ და ბექენდ განვითარების შორის?

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>

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