Wo ziehst du die Grenze zwischen Frontend- und…

Die Grenze liegt auf API-Ebene. Das Backend ist verantwortlich für:

Geschäftslogik
Datenverwaltung (Datenbank, Cache)
Autorisierung und Authentifizierung (wenn nicht in einem separaten Service ausgelagert)
Bereitstellung von Daten und Funktionen über die API (REST, GraphQL usw.)

Das Frontend ist verantwortlich für:

Benutzeroberfläche (HTML, CSS)
Interaktion mit dem Benutzer (JavaScript/Ruby mit Hotwire usw.)
Verbrauch von Daten und Aufruf von Funktionen über die API des Backends
Darstellung der vom Backend empfangenen Daten

Im klassischen Ansatz generiert das Backend HTML-Seiten, das Frontend fügt nur Interaktivität hinzu. Bei SPA (Single Page Application) ist die Grenze klarer, da die Interaktion ausschließlich über die API erfolgt.

Beispiel:

# app/controllers/api/users_controller.rb
# Backend: Verantwortlich für das Abrufen des Benutzers aus der Datenbank und das Formatieren der Daten für das 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: Verantwortlich für das Anfordern von Daten beim Backend und deren Anzeige
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId wird im Frontend ermittelt
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

In hybriden Ansätzen, wie Hotwire, kann ein Teil der Render-Logik an das Backend verschoben werden, aber die Interaktion basiert immer noch auf der Übertragung von Daten oder HTML-Fragments über spezielle Protokolle (z.B. Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Rendert HTML für 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
      # Fehlerbehandlung
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML-Fragment, das per Turbo Stream an das Frontend gesendet wird -->
<div>
  <%= post.body %>
</div>

Grundprinzip: Das Backend stellt Daten und Dienste bereit, das Frontend konsumiert und visualisiert sie für den Nutzer.

Wo ziehst du die Grenze zwischen Frontend- und Backend-Entwicklung?