Sobes.tech
Middle

Kde ťaháš hranicu medzi frontend a backend vývojom?

sobes.tech AI

Odpoveď od AI

Hranica prechádza na úrovni API. Backend je zodpovedný za:

  • Obchodnú logiku
  • Riadenie údajov (databáza, cache)
  • Autorizáciu a autentifikáciu (ak nie sú oddelené do samostatnej služby)
  • Poskytovanie údajov a funkcií cez API (REST, GraphQL atď.)

Frontend je zodpovedný za:

  • Používateľské rozhranie (HTML, CSS)
  • Interakciu s používateľom (JavaScript/Ruby s Hotwire atď.)
  • Spotrebu údajov a volanie funkcií cez API backendu
  • Predstavenie údajov získaných od backendu

V klasickom prístupe backend generuje HTML stránky, frontend ich iba pridáva interaktivitu. V SPA (Single Page Application) je hranica jasnejšia, pretože interakcia prebieha výlučne cez API.

Príklad:

# app/controllers/api/users_controller.rb
# Backend: Zodpovedá za získanie používateľa z databázy a formátovanie údajov pre 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: Zodpovedá za požiadavku údajov od backendu a ich zobrazenie
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId sa získava na fronte
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

V hybridných prístupoch, ako je Hotwire, časť logiky renderovania môže byť presunutá na backend, ale interakcia sa stále stavia na prenose údajov alebo fragmentov HTML cez špecifické protokoly (napr. Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Renderuje HTML pre 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
      # Spracovanie chýb
    end
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end
<!-- _post.html.erb -->
<!-- Fragment HTML, ktorý sa odosiela na frontend cez Turbo Stream -->
<div>
  <%= post.body %>
</div>

Hlavný princíp: backend poskytuje údaje a služby, frontend ich využíva a vizualizuje pre používateľa.