Ön uç ve arka uç geliştirme arasında sınırı nerede…

Sınır, API seviyesinde gerçekleşir. Backend şunlardan sorumludur:

İş mantığı
Veri yönetimi (veritabanı, önbellek)
Yetkilendirme ve kimlik doğrulama (ayrı bir hizmette değilse)
API (REST, GraphQL vb.) aracılığıyla veri ve fonksiyonlar sağlama

Frontend ise:

Kullanıcı arayüzü (HTML, CSS)
Kullanıcıyla etkileşim (JavaScript/Ruby ile Hotwire/etc.)
API üzerinden veri tüketme ve fonksiyon çağrısı
Backend'ten alınan verilerin gösterimi

Klasik yaklaşımlarda, backend HTML sayfaları üretir, frontend sadece etkileşimi ekler. SPA (Single Page Application) ile sınır daha belirgindir, çünkü etkileşim tamamen API üzerinden gerçekleşir.

Örnek:

# app/controllers/api/users_controller.rb
# Backend: Kullanıcıyı veritabanından alıp frontend için biçimlendirme
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: Backend'ten veri isteği yapıp gösterme
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId frontend'den alınır
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hibrit yaklaşımlarda, Hotwire gibi, render mantığının bir kısmı backend'e kaydırılabilir, ancak etkileşim yine belirli protokoller (örneğin Turbo Streams) aracılığıyla veri veya HTML parçacıklarının iletimiyle kurulur.

# app/controllers/posts_controller.rb
# Backend: Turbo Stream için HTML render etme
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
      # Hata işleme
    end
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end

<!-- _post.html.erb -->
<!-- Turbo Stream aracılığıyla frontend'e gönderilen HTML parçası -->
<div>
  <%= post.body %>
</div>

Temel prensip: Backend veri ve servisleri sağlar, frontend bunları tüketir ve kullanıcıya gösterir.

Ön uç ve arka uç geliştirme arasında sınırı nerede çiziyorsunuz?