¿Qué es Svelte y para qué sirve?

Dentro del panorama de desarrollo frontend desde hace tiempo destaca Svelte, un framework pensado para desarrollar interfaces de usuario que se compilan en componentes optimizados para ejecutarse en el contexto del navegador. Además de un alto rendimiento nos ofrece una excelente experiencia de desarrollo, lo que ha hecho que crezca rápidamente su comunidad. En este post te vamos a explicar cómo funciona esta herramienta y cómo dar los primeros pasos para usarla en tus proyectos frontend.

¿Qué es Svelte?

Svelte es un framework JavaScript para el desarrollo frontend. Está pensado principalmente para construir interfaces de usuario pero, igual que ocurre con otras herramientas como React, lo podemos usar en la práctica para el desarrollo de aplicaciones completas.

La principal diferencia de Svelte con otras bibliotecas como React o Vue es que no usa el  virtual DOM, sino que realiza su trabajo de optimización en tiempo de compilación. Esto quiere decir que los componentes en Svelte se tienen que convertir en código Javascript plano» antes de que se ejecuten en un proyecto en producción. Con este paso de compilación se consigue que su ejecución sea más rápida, evitando la sobrecarga de funcionalidades de la biblioteca.

Características principales de Svelte

Svelte es un framework ligero y fácil de usar que permite integrarse de manera natural con otros lenguajes frontend como HTML, CSS y el propio JavaScript. Algunas de sus características más importantes son las siguientes:

Compilación en tiempo de construcción

La característica más determinante de Svelte es que se transpila durante el proceso de llevar a producción los proyectos. Este paso permite convertir el código de componentes o aplicaciones desarrolladas con Svelte en JavaScript puro y optimizado.

Ausencia de virtual DOM

Svelte no necesita de apoyarse en ingeniería no estándar como el «virtual DOM» para poder funcionar de manera optimizada. Como hemos dicho antes, en vez de aplicar toda esa ingeniería se compila el código para que los componentes de centren lo que realmente necesitan, atacando al DOM de forma directa.

Código más ligero y optimizado

Gracias a la compilación los componentes consiguen ser más ligeros, manteniendo un buen rendimiento en producción. Esto es bueno porque el peso de las aplicaciones se reduce y también porque atacando al DOM directamente consigue mejor rendimiento.

Reactividad simple y directa

En la etapa de desarrollo Svelte ofrece todas las ventajas de las librerías reactivas. De este modo, asignando simples propiedades se actualizará el DOM automáticamente. Esto hace que el código sea más fácil de crear y de mantener, mejorando la experiencia de los desarrolladores.

Compatibilidad con JavaScript, HTML y CSS nativo

Por supuesto, aparte de todo lo que te ofrece Svelte puedes aplicar todos tus conocimientos de HTML, CSS y JavaScript, por lo que la curva de aprendizaje es sencilla si conoces estas tecnologías o si estás aplicando Svelte en proyectos tradicionales.

Ventajas de usar Svelte

Son muchos los desarrolladores que han confiado en Svelte como aliado para crear sus proyectos frontend. Estos son algunos de los motivos más importantes de esta creciente comunidad.

Mejor rendimiento y velocidad de carga

Gracias a la compilación, no necesitan el virtual DOM y el código de las interfaces y aplicaciones está más optimizado. Con ello conseguimos más velocidad de carga y rapidez de ejecución.

Curva de aprendizaje sencilla

Para quien ya conoce los lenguajes HTML, CSS y JavaScript es bastante sencillo comenzar con Svelte, por lo que la mayoría de desarrolladores frontend se sienten cómodos al usar esta tecnología.

Menor consumo de recursos

Como los componentes están compilados requieren menor base de código para funcionar, lo que implica un menor consumo de recursos, haciendo que los dispositivos con hardware limitado lo ejecuten muy bien. Al mismo tiempo facilita el uso de las aplicaciones con conexiones lentas.

Menos dependencias externas

Svelte es una librería ligera que no incorpora nada más de lo que los componentes necesitan para funcionar. Esta ausencia de dependencias externas reduce la carga de los proyectos.

Casos de uso de Svelte

Esta librería está pensada para desarrollar interfaces de usuario pero en la práctica es aplicable a muchos tipos de proyectos:

Desarrollo de aplicaciones web ligeras

Puedes usar Svelte para desarrollar aplicaciones web con resultados óptimos en lo que respecta a la rapidez y la velocidad de carga.

Proyectos con necesidad de alto rendimiento

Gracias a la compilación, Svelte consigue un alto rendimiento de las aplicaciones, por lo que podemos usarla para desarrollar proyectos donde la rapidez de respuesta sea primordial.

Aplicaciones móviles mediante Svelte Native

Además, existe un proyecto paralelo llamado Svelte Native que nos permite crear aplicaciones móviles usando las mismas herramientas y costumbres de desarrollo que venimos aplicando en el desarrollo frontend con este framework, Por ello, el conocimiento de esta librerías te puede servir también para crear proyectos de apps instalables en los stores de aplicaciones de iOS o Android.

Prototipado rápido y desarrollo ágil

Gracias a la rápida experiencia de desarrollo que tenemos con Svelte es posible usar el framework para crear prototipos de aplicaciones. De este modo podemos validar de manera rápida ideas de negocio o funcionalidades.

Diferencias entre Svelte y otros frameworks

Seguro que te preguntarás ¿Qué hace diferente a Svelte con otros frameworks o bibliotecas frontend populares?

Svelte vs. React

React es una biblioteca similar, ya que permite desarrollar interfaces y aplicaciones. Sin embargo React utiliza el virtual DOM, lo que lo hace más pesada y menos performante que los componentes Svelte ya compilados. De todos modos, hay que reconocer que a día de hoy React tiene una comunidad bastante mayor, por lo que es más sencillo encontrar cursos y tutoriales.

Svelte vs. Vue

Igual que React, Vue usa el virtual DOM. Por tanto, lo mismo que hemos comentado antes es aplicable a Vue. Vue de todos modos es muy interesante porque ofrece un ecosistema de herramientas un poco mayor, ya que es una tecnología más madura.

Svelte vs. Angular

Svelte tiene la ventaja de ser mucho más fácil de aprender que Angular, ofreciendo una sencillez que es muy apreciada por los desarrolladores. A la vez, Svelte una vez compilado consigue ser más ágil que un proyecto con Angular. Sin embargo, Angular tiene la ventaja de ser un framework mucho más completo y robusto, con una arquitectura muy avanzada, lo que lo hace ideal para aplicaciones grandes.

Instalación y primeros pasos con Svelte

Ahora que ya tienes una idea bastante completa sobre las características y ventajas de Svelte vamos a pasar a una parte más práctica, repasando todo lo que debes saber para comenzar con Svelte.

Requisitos previos (Node.js y npm)

Lo único que necesitas para comenzar a usar Svelte es NodeJS. Puedes instalarlo y con el mismo proceso de instalación tendrás también npm, que es el gestor de dependencias. Para conseguir Node puedes acceder a la página oficial de la plataforma.

Crear un proyecto con Svelte usando degit

Podríamos comenzar un proyecto con Svelte usando cualquier editor, creando cada uno de los archivos necesarios desde cero. Sin embargo es más habitual utilizar una plantilla de inicio de proyecto.

Para ello utilizaremos una herramienta llamada degit que nos permite clonar repositorios git sin descargarnos toda la progresión de commits. La plantilla se ofrece por el propio equipo de Svelte.

npx degit sveltejs/template nombre-proyecto

Luego nos metemos en la carpeta del proyecto y lanzamos el comando npm para instalar las dependencias y arrancar el servidor de desarrollo.

cd nombre-proyecto
npm install
npm run dev

Estructura básica de un proyecto Svelte

Los proyectos de Svelte incluyen los archivos típicos de los desarrollos frontend que ya conocerás, como el package.json. Además verás varias carpetas que incluyen:

• src donde está el código fuente de tu aplicación.
• public donde se colocan los archivos estáticos
• scripts: en esta carpeta encontrarás un script para configurar TypeScript, si lo deseas usar.

A su vez, dentro de src encontrarás un archivo llamado main.js que hace de punto de arranque de la aplicación y otro archivo llamado App.svelte que es tu primer componente, raíz de la aplicación.

Ejecutar y probar una aplicación Svelte

Dentro de los scripts que hay en el package.json verás uno que sirve para arrancar la aplicación en modo desarrollo:

npm run dev

Con esto, tendrás en funcionamiento el servidor de desarrollo en local, que te servirá para ver lo que estás creando y ejecutar tu app para probarla a medida que modificas los archivos del proyecto, con el típico live reload.

Integración de Svelte con otras herramientas

Al desarrollar con Svente podemos usar algunas herramientas como TypeScript y otras muchas del ecosistema propio de desarrollo frontend.

Svelte y TypeScript

Svelte se integra muy bien con el lenguaje TypeScript para conseguir un desarrollo más robusto. Como hemos dicho antes, la plantilla que nos hemos descargado tiene la posibilidad de instalar el soporte para el lenguaje con solamente ejecutar el archivo de la carpeta script:

node scripts/setupTypeScript.js

Uso de Svelte con API REST y GraphQL

Con Svelte podemos desarrollar aplicaciones que usan servicios web como APIs REST y, por supuesto, GraphQL.

Para consumir API REST puedes usar directamente fetch, pero también otras librerías como Axios. Si usas GraphQL lo ideal es apoyarse en otras herramientas como Apollo Client.

Integración con herramientas de testing y bundlers

Puedes desarrollar los test automáticos para tus aplicaciones con cualquier framework de testing disponible en JavaScript, y los más populares actualmente serían Jest, Vitest o Cypress.

Además, puede integrarse con otras herramientas comúnmente utilizadas en proyectos frontend como Vite, Rollup o Webpack.

Desventajas de Svelte

Aparte de todas las ventajas que hemos comentado de Svelte también existen algunas desventajas que, para ser justos, podríamos señalar.

Comunidad más pequeña que otros frameworks

Al ser una herramienta más moderna todavía tiene una comunidad menor de desarrolladores. Eso no es necesariamente malo pero sí que es verdad que puede resultar más complicado encontrar ayudas en Internet como vídeos o manuales, así como soluciones a problemas frecuentes.

Menor cantidad de librerías y componentes preconstruidos

También el ecosistema de herramientas es menor comparativamente a otras bibliotecas más maduras como React o Vue. De todos modos, no podemos olvidar que cuando estamos desarrollando en Svelte también tenemos a nuestra disposición el ecosistema de herramientas JavaScript.

Menor soporte empresarial en comparación con React o Angular

Por último, cabe decir que Svelte es un framework guiado por la comunidad, que no cuenta con el respaldo de grandes empresas que sí tienen otras librerías como React (Meta) o Angular (Google). Nuevamente, esto no es especialmente malo, pero puede resultar una barrera para empresas que buscan un soporte más robusto.