Kus sa joonistad piiri frontend- ja backend-arenduse…

Piir on API tasandil. Back-end vastutab:

Äritegevuse loogika
Andmete haldamine (andmebaas, vahemälu)
Luba ja autentimine (kui see ei ole eraldi teenus)
Andmete ja funktsioonide pakkumine API kaudu (REST, GraphQL jne)

Front-end vastutab:

Kasutajaliidese (HTML, CSS)
Koostoime kasutajaga (JavaScript/Ruby koos Hotwire jne)
Andmete kasutamise ja funktsioonide kutsumise kaudu API
Saadud andmete esitamise

Klassikalises lähenemises genereerib back-end HTML-lehed, front-end lisab vaid interaktiivsust. SPA (Single Page Application) puhul on piir selgem, kuna koostoime toimub ainult API kaudu.

Näide:

# app/controllers/api/users_controller.rb
# Back-end: vastutab kasutaja saamise ja andmete vormindamise eest
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
// Front-end: vastutab andmete pärimise ja kuvamise eest
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId saadakse front-endilt
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Hübriidlähenemistes, nagu Hotwire, osa renderdamislogikast võib liikuda back-endi, kuid koostoime põhineb andmete või HTML fragmentide edastamisel spetsiaalsete protokollide kaudu (näiteks Turbo Streams).

# app/controllers/posts_controller.rb
# Back-end: HTML renderdamine Turbo Stream jaoks
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
      # Vigade töötlemine
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- HTML fragment, mis saadetakse front-endile Turbo Stream kaudu -->
<div>
  <%= post.body %>
</div>

Põhiprintsiip: back-end pakub andmeid ja teenuseid, front-end kasutab neid ning visualiseerib kasutajale.

Kus sa joonistad piiri frontend- ja backend-arenduse vahel?