Hol húzod meg a határt a frontend- és…

A határ az API szinten van. A backend felelős:

Üzleti logika
Adatkezelés (adatbázis, cache)
Engedélyezés és hitelesítés (ha nem külön szolgáltatásban van kihelyezve)
Adatok és funkciók szolgáltatása API-n keresztül (REST, GraphQL stb.)

A frontend felelős:

Felhasználói felület (HTML, CSS)
Interakció a felhasználóval (JavaScript/Ruby Hotwire stb. segítségével)
Adatok fogyasztása és funkciók hívása az API-n keresztül
A backend-től kapott adatok megjelenítése

A klasszikus megközelítésben a backend generálja az HTML oldalakat, a frontend csak interaktivitást ad hozzá. SPA (Single Page Application) esetén a határvonal egyértelműbb, mivel az interakció kizárólag API-n keresztül történik.

Példa:

# app/controllers/api/users_controller.rb
# Backend: Feladata a felhasználó lekérése az adatbázisból és az adatok formázása a frontend számára
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: Feladata az adatok kérés a backend-től és azok megjelenítése
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId a frontend-ről származik
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hibrid megközelítésekben, mint például a Hotwire, a renderelés egy része a backendre kerülhet, de az interakció továbbra is adat- vagy HTML-fragmentumok átadásán alapul, speciális protokollokon keresztül (pl. Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: HTML renderelése Turbo Stream-hez
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
      # Hibakezelés
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML fragment, amit Turbo Stream-en keresztül küld a frontendnek -->
<div>
  <%= post.body %>
</div>

Alapvető elv: a backend szolgáltat adatokat és szolgáltatásokat, a frontend fogyasztja és vizualizálja azokat a felhasználó számára.

Hol húzod meg a határt a frontend- és backend-fejlesztés között?