Qué es Svelte y por qué compila
Comprenda el enfoque de Svelte basado en el compilador y sus diferencias con React y Vue
Qué es Svelte y por qué compila es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Le damos la bienvenida a Svelte
Svelte es un framework de UI centrado en el compilador. A diferencia de React o Vue, Svelte realiza la mayor parte de su trabajo en el momento de compilación, no durante la ejecución.
Sin DOM virtual
React compara un DOM virtual durante la ejecución. En cambio, Svelte compila sus componentes en JavaScript estándar altamente optimizado que actualiza el DOM directamente.
Se envía menos código
Como Svelte envía código compilado, normalmente se envía menos JavaScript al navegador. El tamaño de los paquetes es diminuto.
Formato de los archivos de componentes
Un componente de Svelte se encuentra en un archivo .svelte que contiene tres secciones opcionales: script, marcado y estilos.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Reactividad mediante asignaciones
En Svelte, basta con asignar un valor nuevo a una variable para activar una actualización de la UI. No existe ninguna llamada a setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Componentes de un solo archivo
El marcado, la lógica y los estilos con ámbito viven juntos en un solo archivo. Esta colocación conjunta facilita comprender y refactorizar los componentes.
Estilos con ámbito de forma predeterminada
Cualquier <style> que escriba se limita únicamente al componente. Ya no tendrá conflictos de CSS entre páginas.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Ventajas de rendimiento
Como no existe sobrecarga de un framework durante la ejecución, las aplicaciones de Svelte tienden a ser más rápidas que aplicaciones equivalentes de React o Vue en dispositivos de gama baja.
SvelteKit, el metaframework
SvelteKit se basa en Svelte y añade enrutamiento, SSR y carga de datos. La mayoría de las aplicaciones de Svelte en producción utilizan SvelteKit.
Cuándo destaca Svelte
Svelte es ideal para sitios de marketing, paneles, aplicaciones adaptadas a dispositivos móviles y cualquier entorno en el que importen el tamaño del paquete y la experiencia del desarrollador (DX).
Resumen de la comparación
React, Vue y Angular incluyen un entorno de ejecución; Svelte lo elimina mediante la compilación. El resultado son paquetes más pequeños y modelos mentales más sencillos.
Comprobación rápida
Compruebe lo que ha aprendido.
Resumen
Ahora sabe que Svelte compila los componentes, envía menos JS, utiliza estilos con ámbito y proporciona la base de SvelteKit para crear aplicaciones completas. A continuación: cree su primer proyecto.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Qué es Svelte y por qué compila» es gratis?
Sí — el texto completo de «Qué es Svelte y por qué compila» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Qué es Svelte y por qué compila»?
Comprenda el enfoque de Svelte basado en el compilador y sus diferencias con React y Vue Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Qué es Svelte y por qué compila»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Qué es Svelte y por qué compila
- Creación de un proyecto con npm create svelte
- Estructura del proyecto: src, routes y static
- El servidor de desarrollo y el reemplazo de módulos en caliente