Kur nubrėži ribą tarp frontend ir backend kūrimo…

Ribojasi vyksta API lygyje. Backend atsakingas už:

Verslo logiką
Duomenų valdymą (duomenų bazė, talpykla)
Leidimus ir autentifikaciją (jei nėra atskirame serveryje)
Duomenų ir funkcijų teikimą per API (REST, GraphQL ir kt.)

Frontend atsakingas už:

Vartotojo sąsają (HTML, CSS)
Sąveiką su vartotoju (JavaScript/Ruby su Hotwire ir kt.)
Duomenų naudojimą ir funkcijų kvietimą per API
Gauto duomenų pateikimą

Klasikiniu būdu, backend generuoja HTML puslapius, frontend tik prideda interaktyvumą. SPA (Single Page Application) atveju, riba yra aiškesnė, nes sąveika vyksta tik per API.

Pavyzdys:

# app/controllers/api/users_controller.rb
# Backend: Atsakingas už vartotojo gavimą iš duomenų bazės ir duomenų formatavimą
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: Atsakingas už duomenų užklausą ir jų rodymą
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId gaunamas iš frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hibridiniuose būduose, kaip Hotwire, dalis renderinimo logikos gali būti perkeliama į backend, tačiau sąveika vis dar statoma ant duomenų ar HTML fragmentų perdavimo per specifinius protokolus (pvz., Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: HTML renderinimas 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
      # klaidų apdorojimas
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML fragmentas, kuris siunčiamas į frontend per Turbo Stream -->
<div>
  <%= post.body %>
</div>

Pagrindinis principas: backend teikia duomenis ir paslaugas, frontend juos naudoja ir vizualizuoja vartotojui.

Kur nubrėži ribą tarp frontend ir backend kūrimo?