Unde trasezi granița dintre dezvoltarea frontend și…

Granița are loc la nivelul API-ului. Backend-ul răspunde pentru:

Logica de afaceri
Gestionarea datelor (bază de date, cache)
Autorizare și autentificare (dacă nu este externalizată într-un serviciu separat)
Furnizarea datelor și funcțiilor prin API (REST, GraphQL etc.)

Frontend-ul răspunde pentru:

Interfața utilizatorului (HTML, CSS)
Interacțiunea cu utilizatorul (JavaScript/Ruby cu Hotwire/etc.)
Consumarea datelor și apelarea funcțiilor prin API-ul backend-ului
Prezentarea datelor primite de la backend

În abordarea clasică, backend-ul generează pagini HTML, iar frontend-ul doar adaugă interactivitate. În SPA (Single Page Application), granița este mai clară, deoarece interacțiunea are loc exclusiv prin API.

Exemplu:

# app/controllers/api/users_controller.rb
# Backend: Se ocupă cu obținerea utilizatorului din baza de date și formatarea datelor pentru frontend
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: Se ocupă cu solicitarea datelor de la backend și afișarea lor
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId obținut pe frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

În abordările hibride, precum Hotwire, o parte din logica de randare poate fi mutată pe backend, dar interacțiunea se bazează în continuare pe transmiterea de date sau fragmente HTML prin protocoale specifice (de exemplu, Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Randează HTML pentru 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
      # Tratarea erorilor
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- Fragment HTML trimis către frontend prin Turbo Stream -->
<div>
  <%= post.body %>
</div>

Principiul de bază: backend-ul furnizează date și servicii, frontend-ul le consumă și le vizualizează pentru utilizator.

Unde trasezi granița dintre dezvoltarea frontend și backend?