Πού περνάς τα σύνορα μεταξύ ανάπτυξης frontend και…

Το όριο βρίσκεται στο επίπεδο του API. Το backend είναι υπεύθυνο για:

Επιχειρηματική λογική
Διαχείριση δεδομένων (βάση δεδομένων, cache)
Εξουσιοδότηση και αυθεντικοποίηση (αν δεν είναι διαχωρισμένο σε ξεχωριστή υπηρεσία)
Παροχή δεδομένων και λειτουργιών μέσω API (REST, GraphQL κ.λπ.)

Το frontend είναι υπεύθυνο για:

Διεπαφή χρήστη (HTML, CSS)
Αλληλεπίδραση με τον χρήστη (JavaScript/Ruby με Hotwire κ.λπ.)
Κατανάλωση δεδομένων και κλήση λειτουργιών μέσω του API του backend
Παρουσίαση δεδομένων που λαμβάνονται από το backend

Στην κλασική προσέγγιση, το backend δημιουργεί σελίδες HTML, και το frontend απλώς προσθέτει διαδραστικότητα. Στο SPA (Single Page Application), τα όρια είναι πιο σαφή, καθώς η αλληλεπίδραση γίνεται αποκλειστικά μέσω API.

Παράδειγμα:

# app/controllers/api/users_controller.rb
# Backend: Υπεύθυνο για την ανάκτηση του χρήστη από τη βάση δεδομένων και τη μορφοποίηση των δεδομένων για το 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: Υπεύθυνο για το αίτημα δεδομένων από το backend και την εμφάνισή τους
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId λαμβάνεται στο frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Σε υβριδικές προσεγγίσεις, όπως το Hotwire, μέρος της λογικής απόδοσης μπορεί να μεταφερθεί στο backend, αλλά η αλληλεπίδραση βασίζεται ακόμα στη μεταφορά δεδομένων ή τμημάτων HTML μέσω συγκεκριμένων πρωτοκόλλων (π.χ., Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Απόδοση HTML για 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
      # Διαχείριση σφαλμάτων
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- Τμήμα HTML που αποστέλλεται στο frontend μέσω Turbo Stream -->
<div>
  <%= post.body %>
</div>

Βασική αρχή: το backend παρέχει δεδομένα και υπηρεσίες, το frontend τα καταναλώνει και τα οπτικοποιεί για τον χρήστη.

Πού περνάς τα σύνορα μεταξύ ανάπτυξης frontend και backend;