Kur tu zīmē frontenda un backenda izstrādes robežu…

Robeža notiek API līmenī. Backend ir atbildīgs par:

Biznesa loģiku
Datu pārvaldību (datu bāze, kešatmiņa)
Atļaujām un autentifikāciju (ja nav atdalīta atsevišķā pakalpojumā)
Datu un funkciju nodrošināšanu caur API (REST, GraphQL utt.)

Frontend ir atbildīgs par:

Lietotāja saskarni (HTML, CSS)
Sadarbību ar lietotāju (JavaScript/Ruby ar Hotwire utt.)
Datu izmantošanu un funkciju izsaukšanu caur API
Saņemto datu attēlošanu

Klasiskajā pieejā, backend ģenerē HTML lapas, frontend tikai pievieno interaktivitāti. SPA (Single Page Application) gadījumā, robeža ir skaidrāka, jo sadarbība notiek tikai caur API.

Piemērs:

# app/controllers/api/users_controller.rb
# Backend: Atbild par lietotāja iegūšanu no datu bāzes un datu formatēšanu
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: Atbild par datu pieprasīšanu un to attēlošanu
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId tiek iegūts no frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hibrīdpieejās, piemēram, Hotwire, daļa renderēšanas loģikas var tikt pārvietota uz backend, bet sadarbība joprojām balstās uz datu vai HTML fragmentu nodošanu caur specifiskiem protokoliem (piemēram, Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: HTML renderēšana 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
      # Kļūdu apstrāde
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML fragments, kas tiek nosūtīti uz frontend caur Turbo Stream -->
<div>
  <%= post.body %>
</div>

Galvenais princips: backend nodrošina datus un pakalpojumus, frontend tos izmanto un vizualizē lietotājam.

Kur tu zīmē frontenda un backenda izstrādes robežu?