Onde traças a fronteira entre o desenvolvimento…

A fronteira ocorre ao nível da API. O backend é responsável por:

Lógica de negócio
Gestão de dados (base de dados, cache)
Autorização e autenticação (se não estiver externalizado num serviço separado)
Fornecimento de dados e funções através da API (REST, GraphQL, etc.)

O frontend é responsável por:

Interface do utilizador (HTML, CSS)
Interação com o utilizador (JavaScript/Ruby com Hotwire/etc.)
Consumir dados e chamar funções através da API do backend
Apresentar os dados recebidos do backend

Na abordagem clássica, o backend gera páginas HTML, e o frontend apenas adiciona interatividade. Em SPA (Single Page Application), a fronteira é mais clara, pois a interação ocorre exclusivamente através da API.

Exemplo:

# app/controllers/api/users_controller.rb
# Backend: Responsável por obter o utilizador da base de dados e formatar os dados para o 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: Responsável por solicitar dados ao backend e exibi-los
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId obtido no frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Em abordagens híbridas, como Hotwire, parte da lógica de renderização pode ser deslocada para o backend, mas a interação continua a ser baseada na transferência de dados ou fragmentos HTML através de protocolos específicos (por exemplo, Turbo Streams).

# app/controllers/posts_controller.rb
# Backend: Renderiza HTML para 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
      # Tratamento de erros
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- Fragmento HTML enviado ao frontend via Turbo Stream -->
<div>
  <%= post.body %>
</div>

Princípio fundamental: o backend fornece dados e serviços, o frontend consome-os e os visualiza para o utilizador.

Onde traças a fronteira entre o desenvolvimento frontend e backend?