Svelte es un framework Frontend para hacer aplicaciones web, orientado a componentes. Lo bueno de Svelte es que tiene una sintaxis muy sencilla de aprender, pero que a la vez es muy potente para hacer aplicaciones grandes y con buen rendimiento.
Antes de empezar a hacer cosas con Svelte, y sobre todo si estás empezando en el mundo del desarrollo web, te recomiendo que aprendas lo básico de HTML, CSS y Javascript, ya que son los 3 lenguajes que más se usan dentro de Svelte.
No hace falta que entiendas cosas avanzadas de cada lenguaje, es suficiente con saber lo básico de cada uno, recuerda que nunca se deja de aprender y que siempre quedarán cosas por aprender de cada lenguaje.
Lo siguiente que recomiendo si estás empezando es que aprendas a montar tu Entorno de desarrollo para frontend, en concreto para Svelte recomiendo trabajar con el Vscode 🚧 y su extensión para trabajar con ficheros .svelte
En los artículos de Por qué mola tanto Svelte y Qué cosas no me gustan de Svelte puedes ver un poco sus props y sus contras, para que decidas mejor si quieres aprender este framework
Primeros pasos
Si quieres ponerte a hacer cosas puedes empezar con la Crear proyectos Svelte, como spoiler te puedo decir que vamos a trabajar con Vite 🚧, un empaquetador moderno sucesor de Webpack 🚧 y Rollup 🚧.
Ya te adelanto que Svelte está basado en componentes, es decir, piezas de una web que están aisladas en términos de código y estilos con el resto de elementos de la web, lo que permite reutilizarlos en varios sitios de la misma, son como los ladrillos del desarrollo web.
Lo siguiente es Crear un componente en Svelte donde veremos su estructura básica, incluidas las variables y su representación en la página web.
También te puedes pasar por el Sistema de templating de Svelte en el que aprenderemos a crear estructuras HTML condicionales y loops para poder repetir elementos en base a variables del componente.
Otro aspecto importante es la Reactividad de variables con Svelte 🚧, ya que tiene una sintaxis bastante única para poder definir variables que dependen unas de las otras. Svelte detecta los cambios y renderiza la vista sin que tengas que hacer nada.
Mediante los Props de Svelte 🚧 y los Eventos en Svelte 🚧 vas a poder comunicar componentes entre sí, además de poder configurarlos con parámetros definidos por ti para poder tener componentes genéricos reutilizables.
Como todo framework frontend, Svelte también tiene un sistema de Ciclo de vida de Svelte 🚧, es decir, ejecución de código cuando el componente carga o cuando el componente se destruye.
Por último puedes echar un ojo a los Slots en Svelte 🚧, que permiten poder pasar contenido HTML desde un componente padre a uno hijo.