Concepto clave

Planificar una aplicación full-stack en SvelteKit es como diseñar la arquitectura de un edificio antes de construir. No puedes empezar a colocar ladrillos sin planos estructurales. En el desarrollo web, esta planificación se traduce en definir la estructura de rutas, los componentes reutilizables, y la gestión de estado entre cliente y servidor.

Imagina que tu app de tareas es una oficina virtual. Las rutas son las diferentes salas (lista de tareas, detalles, configuración), los componentes son los muebles modulares (tarjetas de tarea, formularios), y Server Actions son los mensajeros que llevan información entre la recepción (cliente) y los archivos (base de datos). Una buena planificación evita que tu "oficina" se convierta en un caos donde nadie encuentra nada.

Cómo funciona en la práctica

Vamos a estructurar nuestra app de tareas en tiempo real paso a paso. Primero, define las rutas principales basadas en funcionalidades: una página para ver todas las tareas, otra para crear/editar, y una para ajustes. En SvelteKit, esto se traduce en carpetas dentro de src/routes.

Antes de codificar, dibuja un diagrama simple:

/ - Página principal con lista de tareas
/tarea/[id] - Detalle de tarea individual
/nueva - Formulario para crear tareas
/api - Endpoints para Server Actions (opcional, ya que SvelteKit 2+ integra actions en rutas)

Luego, identifica componentes compartidos: TaskCard.svelte para mostrar cada tarea, TaskForm.svelte para formularios, y Notification.svelte para alertas en tiempo real. Finalmente, decide dónde vivirán los datos: +page.server.js para cargar tareas iniciales, y Server Actions en +page.server.js o archivos separados para mutaciones.

Codigo en accion

Veamos cómo se estructura un archivo de ruta con Server Actions. Primero, la versión básica sin planificación:

// src/routes/+page.server.js - ANTES (desorganizado)
export const load = async () => {
  // Cargar tareas de la base de datos
  const tasks = await db.tasks.findMany();
  return { tasks };
};

export const actions = {
  create: async ({ request }) => {
    const data = await request.formData();
    // Lógica para crear tarea
    await db.tasks.create({ data });
  },
  update: async ({ request }) => {
    // Lógica para actualizar
  }
  // Más acciones mezcladas
};

Ahora, después de planificar con separación de responsabilidades:

// src/routes/+page.server.js - DESPUÉS (estructurado)
export const load = async () => {
  const tasks = await getTasks(); // Función separada en lib/server/tasks.js
  return { tasks };
};

export const actions = {
  create: async ({ request }) => {
    return await createTask(request); // Delegar a función modular
  },
  update: async ({ request }) => {
    return await updateTask(request);
  }
};

// lib/server/tasks.js - Funciones reutilizables
export async function getTasks() {
  return await db.tasks.findMany({ orderBy: { createdAt: 'desc' } });
}

export async function createTask(request) {
  const data = await request.formData();
  const title = data.get('title');
  if (!title) throw new Error('Título requerido');
  return await db.tasks.create({ data: { title, completed: false } });
}

Errores comunes

Mezclar lógica de cliente y servidor en un mismo archivo: Esto ralentiza la app y dificulta el mantenimiento. Solución: Usa +page.server.js solo para Server Actions y carga de datos, y +page.svelte para la UI.
No definir tipos para los datos de tareas: Sin TypeScript o esquemas, los errores aparecen en tiempo de ejecución. Solución: Crea un tipo Task en src/lib/types.ts con propiedades como id, title, completed.
Olvidar la gestión de estado en tiempo real: Si usas Server Actions sin actualizar la UI, los cambios no se reflejan. Solución: Implementa invalidación de datos con invalidate() de SvelteKit o usa stores reactivos.
Sobrecargar una sola ruta con múltiples acciones: Hace el código difícil de leer. Solución: Separa acciones en módulos, como mostramos en el ejemplo de código.
Ignorar la seguridad en Server Actions: Exponer datos sensibles. Solución: Valida siempre los inputs, usa autenticación con hooks, y sanitiza datos.

Checklist de dominio

He definido al menos 3 rutas principales para la app de tareas en src/routes.
He creado componentes reutilizables (ej., TaskCard) en src/lib/components.
He separado la lógica de negocio en funciones modulares en src/lib/server.
He implementado Server Actions para crear y actualizar tareas con validación.
He configurado tipos TypeScript para los datos de tareas.
He planificado la actualización en tiempo real usando stores o invalidación.
He probado la estructura con un prototipo funcional que carga y muestra tareas.

Estructura inicial de la app de tareas

Sigue estos pasos para crear la base de tu app de tareas en SvelteKit:

Crea un nuevo proyecto SvelteKit usando npm create svelte@latest my-task-app y selecciona opciones básicas con TypeScript.
Dentro de src/routes, crea las siguientes carpetas y archivos para definir rutas:
- +page.svelte y +page.server.js en la raíz (página principal)
- tarea/[id]/+page.svelte para detalles
- nueva/+page.svelte para crear tareas
En src/lib, crea:
- components/TaskCard.svelte con un diseño simple que muestre título y estado
- server/tasks.js con funciones getTasks y createTask (usa un array en memoria por ahora)
- types.ts con un tipo Task que tenga id: string, title: string, completed: boolean
En src/routes/+page.server.js, implementa load para cargar tareas desde getTasks y un Server Action create que use createTask.
En src/routes/+page.svelte, muestra las tareas usando TaskCard y un formulario para añadir nuevas.
Verifica que puedas añadir y ver tareas en la UI.

Pistas

Usa import { tasks } from '$lib/server/tasks.js' para simular una base de datos con un array.
En Server Actions, retorna un objeto con { success: true } para manejar estados en la UI.
Si tienes errores de tipo, revisa que estás importando correctamente el tipo Task en los componentes.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Planifica y estructura tu app de tareas