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.