¿Dónde trazas la línea entre el desarrollo frontend y…

La frontera se encuentra en el nivel de la API. El backend se encarga de:

Lógica de negocio
Gestión de datos (base de datos, caché)
Autorización y autenticación (si no se externaliza en un servicio separado)
Proporcionar datos y funciones a través de la API (REST, GraphQL, etc.)

El frontend se encarga de:

La interfaz de usuario (HTML, CSS)
La interacción con el usuario (JavaScript/Ruby con Hotwire/etc.)
Consumir datos y llamar a funciones a través de la API del backend
La presentación de datos recibidos del backend

En el enfoque clásico, el backend genera páginas HTML, y el frontend solo añade interactividad. En SPA (Single Page Application), la frontera es más clara, ya que la interacción ocurre exclusivamente a través de la API.

Ejemplo:

# app/controllers/api/users_controller.rb
# Backend: Encargado de obtener el usuario de la base de datos y formatear los datos para el 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: Encargado de solicitar datos al backend y mostrarlos
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId obtenido en el frontend
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

En enfoques híbridos, como Hotwire, parte de la lógica de renderizado puede desplazarse al backend, pero la interacción sigue basándose en la transferencia de datos o fragmentos HTML a través de protocolos específicos (por ejemplo, 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
      # Manejo de errores
    end
  end

  private

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

<!-- _post.html.erb -->
<!-- Fragmento HTML enviado al frontend a través de Turbo Stream -->
<div>
  <%= post.body %>
</div>

Principio fundamental: el backend proporciona datos y servicios, y el frontend los consume y visualiza para el usuario.

¿Dónde trazas la línea entre el desarrollo frontend y backend?