Sobes.tech
Middle

Frontend va backend rivojlanishi o'rtasida chiziqni qayerda chizasiz?

sobes.tech AI

AIdan javob

Chegara API darajasida bo'ladi. Backend quyidaglar uchun javobgardir:

  • Biznes mantiqi
  • Ma'lumotlarni boshqarish (ma'lumotlar bazasi, kech)
  • Ruxsat berish va autentifikatsiya (agar alohida xizmatga chiqarilmagan bo'lsa)
  • API (REST, GraphQL va boshqalar) orqali ma'lumotlar va funksiyalarni taqdim etish

Frontend quyidagilar uchun javobgardir:

  • Foydalanuvchi interfeysi (HTML, CSS)
  • Foydalanuvchi bilan o'zaro aloqalar (JavaScript/Ruby bilan Hotwire/etc.)
  • Backend API orqali ma'lumotlarni iste'mol qilish va funksiyalarni chaqirish
  • Backenddan olingan ma'lumotlarni taqdim etish

An'anaviy yondashuvda, backend HTML sahifalarini ishlab chiqaradi, frontend faqat interaktivlik qo'shadi. SPA (Single Page Application) da chegaralar aniqroq, chunki o'zaro aloqalar faqat API orqali amalga oshiriladi.

Misol:

# app/controllers/api/users_controller.rb
# Backend: Foydalanuvchini ma'lumotlar bazasidan olish va frontend uchun formatlash
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
// Frontend: Ma'lumotlarni backenddan so'rash va ko'rsatish
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId frontendda olinadi
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hibrid yondashuvlarda, Hotwire kabi, render qilishning bir qismi backendga o'tkazilishi mumkin, ammo o'zaro aloqalar ma'lumotlar yoki HTML fragmentlarini maxsus protokollar (masalan, Turbo Streams) orqali uzatish bilan amalga oshiriladi.

# app/controllers/posts_controller.rb
# Backend: Turbo Stream uchun HTML render qilish
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
      # Xatolarni boshqarish
    end
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end
<!-- _post.html.erb -->
<!-- Turbo Stream orqali frontendga yuboriladigan HTML fragment -->
<div>
  <%= post.body %>
</div>

Asosiy tamoyil: backend ma'lumotlar va xizmatlarni taqdim etadi, frontend esa ularni iste'mol qiladi va foydalanuvchiga ko'rsatadi.