Aprendí Svelte en 9 días

Tier S de JavaScript: Svelte

En un mundo en constante cambio, es importante estar al día con las últimas tendencias y herramientas en tecnología. En el caso de JavaScript, esto significa estar familiarizado con los diferentes frameworks y librerías disponibles. Recientemente, decidí probar algo diferente a React y elegí Svelte como mi primera opción. Según el estado de JS, Svelte es considerado como una herramienta de nivel S.

En este artículo, compartiré mi experiencia con Svelte y compararé su experiencia de desarrollo.

El Tutorial de Svelte

Svelte Tutorial

svelte.dev

Lo que me sorprendió de esta herramienta es que cuenta con una documentación interactiva, lo que permite escribir código Svelte directamente en el navegador. Esto hace que sea fácil de aprender, ya que no se requiere descargar ningún software adicional.

VS Code + Svelte + Vite

Sin embargo, como estoy muy acostumbrado a usar VS Code,decidí realizar cada ejercicio en mi entorno local. A continuación, describiré los pasos para instalar solo Svelte con Vite, ya que en la documentación de Svelte se recomienda descargar Sveltekit, lo cual puede generar confusión en el tutorial de esta librería.

Intarlar vite + svelte

npm create vite@latest

Nombrar tu proyecto tutorial-svelte y seleccionar svelte como plantilla. Luego, accede a tu directorio de proyecto y ejecuta el siguiente comando para instalar las dependencias.

cd tutorial-svelte

Instalar dependencias (puedes usar tu gestor de paquetes favorito).

npm i

opcional Sass

Instalar sass es totolmente opcional, pero como pensaba usarlo, decidí instalarlo desde el principio.

npm i -D sass

Añadir el archivo svelte.config.js en la raíz de tu proyecto, al mismo nivel que vite.config.js

// svelte.config.js
import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      scss: {
        prependData: '@use "src/variables.scss" as *;',
      },
    }),
  ],
};

export default config;

Se requieren hacer algunas modificaciones al archivo vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "src/variables.scss" as *;',
      },
    },
  },
});

Ahora renombra el archivo app.css a app.scss y agrega un archivo variables.scss en la carpeta src. De esta manera, puedes usar variables globales en tu proyecto.

Ahora solo falta modificar el archivo main.js para que se vea así:

// main.js
import "./app.scss";
import App from "./App.svelte";

const app = new App({
  target: document.getElementById("app"),
});

export default app;

Listo para usar Sass en tu proyecto Svelte. en la terminal, ejecuta el siguiente comando para iniciar el servidor de desarrollo.

npm run dev

Y verifica que todo esté funcionando correctamente en http://localhost:3000

Añadir exenciones en VS code

Para que VS Code reconozca los archivos .svelte, debes instalar la extensión de Svelte para VS Code.

La extencion que utilice es Svelte for VS Code

Con estos pasos, ya tenemos un entorno local si deseamos seguir el tutorial dentro de nuestro VS Code. Sin embargo, este proceso no es necesario para aprender Svelte.

Cuanto tiempo me tomó aprender Svelte ?

Para aprender lo básico de svelte, le dediqué unos 5 días, aproximadamente 2 horas por día, para explorar el tutorial de Svelte en su documentación.

Mover las manitas

Finalmente, al sexto día, comencé a implementar los nuevos conocimientos adquiridos y decidí crear una aplicación TODO con una versión pseudo-kanban. El resultado final fue un tablero con estado persistente en el cliente, la capacidad de arrastrar y soltar elementos para cambiarlos de tablero y la posibilidad de agregar nuevos TODOs.

Les comparto el resultado final de mi aplicación TODO con Svelte.

sveltetodoboard.netlify.app/

Conclusión

Svelte es un framework de JavaScript que ofrece una forma sencilla y eficiente de construir aplicaciones web. Su documentación interactiva hace que sea fácil de aprender y no requiere descargar ningún software adicional. También es compatible con herramientas como Vite y Sass, lo que permite personalizar el proyecto según las necesidades del desarrollador. En mi experiencia, fue sorprendentemente fácil de aprender y me permitió crear una aplicación de tareas con una interfaz de tablero kanban en solo pocos días. Sin duda, Svelte es una excelente opción para cualquiera que busque un framework JavaScript moderno y eficiente.