Waar trek je de grens tussen frontend- en…

De grens ligt op API-niveau. De backend is verantwoordelijk voor:

Bedrijfslogica
Gegevensbeheer (database, cache)
Autorisatie en authenticatie (indien niet in een aparte service)
Het leveren van gegevens en functies via API (REST, GraphQL, etc.)

Het frontend is verantwoordelijk voor:

Gebruikersinterface (HTML, CSS)
Interactie met de gebruiker (JavaScript/Ruby met Hotwire/etc.)
Het consumeren van gegevens en het aanroepen van functies via de API van de backend
Het presenteren van gegevens die van de backend zijn ontvangen

In de klassieke aanpak genereert de backend HTML-pagina's, en voegt het frontend alleen interactiviteit toe. In SPA (Single Page Application) is de grens duidelijker, omdat de interactie uitsluitend via API plaatsvindt.

Voorbeeld:

# app/controllers/api/users_controller.rb
# Backend: Verantwoordelijk voor het ophalen van de gebruiker uit de database en het formatteren van gegevens voor het 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: Verantwoordelijk voor het aanvragen van gegevens bij de backend en het weergeven ervan
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId wordt op frontend verkregen
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

In hybride benaderingen, zoals Hotwire, kan een deel van de renderlogica naar de backend worden verschoven, maar de interactie blijft gebaseerd op het overdragen van gegevens of HTML-fragmenten via specifieke protocollen (bijvoorbeeld Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Renders HTML voor 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
      # Foutafhandeling
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML-fragment dat via Turbo Stream naar de frontend wordt gestuurd -->
<div>
  <%= post.body %>
</div>

Het fundamentele principe: de backend levert gegevens en services, de frontend consumeert en visualiseert ze voor de gebruiker.

Waar trek je de grens tussen frontend- en backend-ontwikkeling?