¿Cansado de React? Svelte 5 reduce el código a la mitad y duplica el rendimiento (tutorial completo)

Por qué volví a aprender un framework nuevo

Abrí la documentación oficial de Svelte con rechazo. Cada pocos años sale un framework que dice «esta vez es distinto», y a menudo es lo mismo con otro nombre. El proyecto en React funcionaba bien, ¿para qué complicarse?

El primer ejemplo de código me dejó helado. Un contador: en React necesitas useState, setCount y recordar no mutar el state directamente. ¿Y Svelte? let count = $state(0) y luego count++. ¿Eso es todo?

Esa sensación de «menos es más» me tuvo tres horas seguidas con el tutorial. No por complejidad, sino por lo contrario: por lo simple que es. Si también tienes «fatiga de frameworks», en este artículo hablamos de la mentalidad de optimización en tiempo de compilación detrás de Svelte 5, algo que cambió cómo entiendo los frameworks frontend.

¿Qué es Svelte? La esencia de un framework de compilación

Primero una analogía para entender compilación frente a runtime:

React es como pedir comida a domicilio: cada entrega trae cubiertos, servilletas, caja y bolsa de plástico. Eso (Virtual DOM, algoritmo de reconciliación) va en el paquete en runtime, lo uses o no. Resultado: un paquete base de React de 42 KB aunque solo escribas «Hello World».

Svelte es como cocinar en casa: preparas los ingredientes (escribes el código), cocinas (compilas) y en la mesa solo hay el plato (JS nativo), sin lastre extra. El bundle final puede quedar en 1,6 KB.

Suena exagerado, pero lo he medido. La misma app Todo en React y en Svelte:

La comparación más clara es la carga inicial. En red 3G (sí, muchos usuarios siguen en 3G):

300 ms no parecen mucho, pero en la home de un e-commerce o un sitio de noticias pueden significar 5-10 % más de rebote.

¿Qué trae Svelte 5 frente a Svelte 4? Lo central es el sistema Runes, una API de reactividad nueva. El bundle baja otro 15-30 % y el código se lee mejor.

Pero no reescribas tu proyecto React todavía. Svelte no sustituye a React: son filosofías distintas. React dice «ecosistema y flexibilidad para todo»; Svelte dice «rendimiento y simplicidad en una cosa bien hecha». La elección depende del escenario.

Runes en profundidad: la magia del compilador

Lo más importante de Svelte 5 son los Runes. El nombre suena a videojuego, pero al usarlos la experiencia es muy fluida.

Alibaba Cloud - Opción preferida para desarrolladores, 15 % de descuento exclusivo en Lighthouse

Obtener 15% dto. →Anuncio

$state: por fin sin setters

Primero React:

// Enfoque React: siempre el setter
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // y cuidado con las trampas de closure
}

Y Svelte 5:

// Enfoque Svelte 5: como JS nativo
let count = $state(0)
function increment() {
  count++ // así de simple; el compilador gestiona la reactividad
}

La primera vez con $state busqué el setter; no hace falta. Detrás, el compilador analiza el código en build e inserta rastreo de dependencias y lógica de actualización.

En proyectos reales mi código bajó un 30-40 %. Sobre todo en formularios: adiós a montones de handleXXXChange.

$derived: dependencias automáticas, adiós arrays manuales

Si has usado useMemo, conoces el sufrimiento del array de dependencias. ¿Olvidas una? El componente no se actualiza. ¿Pones de más? Recalcula sin parar.

$derived en Svelte no te obliga a eso:

// React: dependencias manuales
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Svelte 5: el compilador rastrea solo
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

Muy útil en formularios complejos. Hice un sistema de presupuestos con una docena de campos; en React el array de dependencias ocupaba dos líneas y había que vigilar no olvidar ningún campo. En Svelte, el compilador lo resuelve.

En corto: tú escribes la lógica; la reactividad la lleva el compilador.

$effect: efectos secundarios con elegancia

useEffect es de lo más difícil de los Hooks de React: dependencias, cleanup, momento de ejecución… Los principiantes se lían.

$effect en Svelte es más directo:

// React: hay que devolver cleanup
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe() // no olvides limpiar
  }
}, [/* otra vez el array de dependencias */])
// Svelte 5: el compilador limpia solo
$effect(() => {
  const subscription = someAPI.subscribe()
  // al desmontar el componente se limpia sin return manual
})

En proyectos reales uso $effect para polling de API, WebSocket y sincronización con almacenamiento local. Lo mejor: menos miedo a fugas de memoria; el compilador garantiza el cleanup.

$props: props con tipos seguros

Puede parecer menor, pero al escribir se nota:

// Enfoque React
function TodoItem({ todo, onToggle }) {
  // PropTypes o TypeScript a mano
}
// Svelte 5: desestructuras $props
<script>
  let { todo, onToggle } = $props()
  // TypeScript integrado
</script>

El cambio es pequeño, pero fluye mejor. El soporte TypeScript es oficial, sin configuración extra.

Svelte vs React/Vue: no es guerra, es elección

A estas alturas quizá preguntes: ¿debería cambiar a Svelte?

Que esto no se convierta en cruzada. He visto proyectos elegantes en jQuery y código horrible en React. El framework es herramienta; importan el equipo y el proyecto.

Curva de aprendizaje

Svelte: HTML + CSS + JS, más cerca del estándar web. Formé a un recién graduado con el tutorial oficial; en dos días escribía componentes solo.

Railway - Plataforma de despliegue moderna, sin ops complejas, en producción en minutos

Empezar ahora →Anuncio

React: JSX, reglas de Hooks, inmutabilidad, reconciliación… Entenderlo de verdad lleva 1-2 semanas intensas. Y siguen los artículos «XX trucos de React que no conocías».

Vue: en el medio. Plantillas más intuitivas que JSX, pero con sus conceptos (directivas, computed, watch, etc.).

Rendimiento

Hay que ser honestos: en proyectos pequeños la diferencia no se nota. En un Todo, el usuario no distingue React de Svelte.

Sí se nota en estos escenarios:

1. Listas enormes: catálogos de e-commerce, chat en tiempo real. Con 10 000 registros, Svelte mantiene 58 FPS y React 45 FPS.
2. Actualizaciones frecuentes de estado: dashboards en vivo, cotizaciones. La actualización directa de Svelte es más rápida que el diff del Virtual DOM.
3. Red móvil débil: bundle pequeño gana.

Los datos vienen de benchmarks de frameworks JS de 2025 en entornos estandarizados; en tu proyecto conviene medir tú mismo.

Ecosistema: maduro frente a ligero

Sin rodeos: el ecosistema de Svelte no iguala al de React.

• Descargas semanales en npm: Svelte 500 000 vs React 20 millones
• Preguntas en Stack Overflow: Svelte 12 000 vs React 500 000
• Librerías de terceros: React tiene cientos; Svelte quizá decenas

No todo es malo. La comunidad es pequeña pero activa. En Discord una pregunta puede ser respondida por Rich Harris. Eso en React no pasa.

La cadena de herramientas es moderna: Vite nativo, SvelteKit full stack, TypeScript integrado. Sin montones de loaders de Webpack.

¿Cuándo elegir Svelte?

Una matriz sencilla:

Si el equipo ya vive en React, no cambies salvo un dolor de rendimiento claro. Proyecto nuevo, equipo pequeño o ganas de probar algo nuevo: Svelte encaja muy bien.

Práctica en 30 minutos: una app Todo con Svelte 5

Basta de teoría. Vamos a escribir un Todo desde cero y sentir el poder de Runes.

Estructura del proyecto

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // componente de un Todo
│   ├── App.svelte           // aplicación principal
│   └── main.js              // entrada
└── package.json

Código principal: App.svelte

<script>
  // El encanto de Runes: conciso y potente
  let todos = $state([])
  let input = $state('')
  // $derived rastrea todos sin dependencias manuales
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  // Añadir Todo: como JS normal
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = '' // actualización reactiva, la UI se refresca sola
    }
  }
  // Cambiar estado completado
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done // modificación directa
    }
  }
  // Eliminar Todo
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<!-- Plantilla Svelte: HTML, no JSX -->
<div class="app">
  <h1>Mis tareas pendientes</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="Añadir nueva tarea..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>Añadir</button>
  </div>
  <!-- ¿Cuántas quedan? $derived actualiza solo -->
  <p class="stats">
    Quedan {remaining} tareas por completar
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<!-- Estilos scoped por defecto, sin contaminar global -->
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

Subcomponente: TodoItem.svelte

<script>
  // Desestructurar $props: datos del padre
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    Eliminar
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  /* class:done es azúcar sintáctico de Svelte */
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

Ejecución

npm create vite@latest svelte-todo -- --template svelte
cd svelte-todo
npm install
npm run dev

Visita http://localhost:5173 y tendrás un Todo funcional.

Puntos clave

Este mini proyecto muestra varias ventajas de Svelte:

1. Reactividad natural: sin setState ni dispatch; cambian los datos y la UI se actualiza.
2. Sin librería de estado global: sin Redux ni Context, pero claro en proyectos medianos.
3. Estilos aislados: CSS a nivel de componente por defecto.
4. Build minúsculo: npm run build y verás unos 5 KB.

Trampa que caí la primera vez: en Svelte 4, tras todos.push() había que reasignar para actualizar. En Svelte 5, push directo. Diferencia importante frente a Svelte 4.

No te engañe la simplicidad: en proyectos grandes hay que diseñar arquitectura. Pero en Svelte puedes centrarte en la lógica de negocio, no en la ceremonia del estado.

Vultr - Servidor cloud NVMe de alto rendimiento, 32 ubicaciones globales, despliegue Docker con un clic

Ver precios →Anuncio

Ecosistema, comunidad y futuro

Estado del ecosistema

Aunque no iguala a React, lo esencial está:

• SvelteKit: framework full stack oficial, equivalente a Next.js. SSR, SSG, rutas API.
• Librerías de componentes: Svelte Material UI, Carbon Components, Skeleton UI, etc.
• Toolchain: Vite nativo, Prettier, plugins de ESLint.
• Adopción real: herramientas internas de Spotify, panel de Square, gráficos del New York Times, proyectos internos de Apple.

La comunidad es más pequeña que la de React, pero muy activa. En Discord ves a Rich Harris y al core debatiendo y escuchando feedback. Los frameworks grandes no dan esa cercanía.

Recursos de aprendizaje

• Tutorial oficial: interactivo; una pasada y entiendes el 80 %.
• Discord de Svelte: respuestas rápidas y de calidad.
• Ejemplos en GitHub: el repo oficial tiene muchos casos prácticos.
• Recursos en chino: en Juejin y Zhihu ya hay artículos de calidad (referencia del autor original).

Tendencias

Mi lectura: Svelte no será mainstream, pero sí una opción importante.

El foso del ecosistema de React es muy profundo; las empresas no cambian a la ligera. Svelte tiene hueco en:

1. Proyectos sensibles al rendimiento: UI de juegos, dashboards en tiempo real, apps móviles.
2. Equipos pequeños y desarrollo rápido: startups, proyectos personales, herramientas internas.
3. Educación: la simplicidad lo hace buen framework para empezar en frontend.

Svelte 5 ya está validado; el soporte TypeScript mejora. Se puede usar en producción.

Aprender Svelte no suma mucho al CV, pero amplía cómo piensas. Tras ver la optimización en compilación, al volver a React entiendes mejor el rendimiento.

Resumen: merece la pena probarlo

Tras todo esto, el mensaje es uno: Svelte merece un fin de semana para conocerlo.

No para reescribir todos tus proyectos, sino para:

1. Este fin de semana, 2 horas con el tutorial oficial: interactivo y entretenido.
2. Reescribir un mini proyecto en Svelte: calculadora, clima o lo que ya hayas hecho.
3. No lo impongas al equipo de golpe: úsalo tú, confirma el encaje y luego habla con el equipo.

Los frameworks cambian cada año y todos dicen ser «revolucionarios». Lo que vale la pena son las ideas detrás. La optimización en compilación, APIs concisas y obsesión por el rendimiento de Svelte aplican en cualquier stack.

Última verdad: la tecnología sirve al producto, no al revés. Lo que React resuelve, Svelte probablemente también. La elección depende del equipo, el escenario y tu intuición.

Si te importa el rendimiento, si estás harto de boilerplate o solo quieres probar algo nuevo, abre https://svelte.dev/tutorial y sigue el tutorial.

Son 2 horas, como el precio de un delivery. Y quizá descubres una herramienta que encaja contigo.