Kde táhneš hranici mezi frontendovým a backendovým…

Hranice je na úrovni API. Backend je zodpovědný za:

Obchodní logiku
Správu dat (databáze, cache)
Autorizaci a autentizaci (pokud není oddělená služba)
Poskytování dat a funkcí přes API (REST, GraphQL atd.)

Frontend je zodpovědný za:

Uživatelské rozhraní (HTML, CSS)
Interakci s uživatelem (JavaScript/Ruby s Hotwire atd.)
Spotřebu dat a volání funkcí přes API backendu
Zobrazení dat přijatých od backendu

V klasickém přístupu backend generuje HTML stránky, frontend je pouze doplňuje o interaktivitu. V SPA (Single Page Application) je hranice jasnější, protože interakce probíhá výhradně přes API.

Příklad:

# app/controllers/api/users_controller.rb
# Backend: Odpovídá za získání uživatele z databáze a formátování dat pro 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: Odpovídá za požadavek dat od backendu a jejich zobrazení
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId získané na frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

V hybridních přístupech, jako je Hotwire, může být část renderovací logiky přesunuta na backend, ale interakce je stále založena na přenosu dat nebo fragmentů HTML přes specifické protokoly (například Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Renderování HTML pro 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
      # Zpracování chyb
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- Fragment HTML odesílaný na frontend přes Turbo Stream -->
<div>
  <%= post.body %>
</div>

Základní princip: backend poskytuje data a služby, frontend je spotřebovává a vizualizuje pro uživatele.

Kde táhneš hranici mezi frontendovým a backendovým vývojem?