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.