Yo no he usado Sveltekit nunca. A pesar de que muchos de ustedes me han invitado a probarlo, poca es la curiosidad que me ha provocado este framework. Sobre todo porque he estado ocupado en mi insipiente tiempo libre, aprendiendo Qwik, para luego enamorarme más de los patterns que Remix tan elegantemente nos regala. Sobre todo la simplicidad con que logramos el end-to-end type-safety en Remix. Gracias a la aportación que le hizo el creador de Zod:
Colin McDonnell a Remix, pero eso lo dejamos para otro video…

En esta ocasión, quise darme el tiempo de auto-introducirme a este framework, impulsado también por las recientes charlas de Rich Harris quien como creador de Svelte surge como voz independiente, y rápidamente se ha encumbrado a sí mismo como un líder visible de la comunidad de desarrolladores web. No solo por la elocuencia y desenfado con la que habla, también representa a esa voz coherente que defiende la simplicidad y que se mantiene firme en los fundamentos y que por ello su charla le hace sentido a muchos de nosotros. ¡Pero hey! No estamos aquí para adorar a Rich Harris, sino para auto enseñarme a crear un nuevo proyecto con Sveltekit y ver que tan diferente resulta a lo que he estado usando todo este año.

Si también quieres aprender Sveltkit en menos de 5 min, pos acompáñame.

Instalación y creación de un nuevo proyecto

La documentación es nuestra aliada y con su sabiduría, iluminará nuestra senda, cuidando de cada uno de nuestros pasos. Y vaya que la vamos a necesitar, pues me estoy lanzando como gordo en tobogán, porque tampoco sé utilizar Svelte de forma avanzada, pero no importa, no es nada con lo que no podamos lidiar en el proceso.

Para crear un nuevo proyecto vamos a ejecutar:

npm create svelte@latest hola-blissmo

Desde este primer paso, ya se agradecen las convenciones, pues podemos comenzar un proyecto igual que como lo haríamos con otros muchos frameworks.

Entramos a nuestro nuevo proyecto e instalamos los paquetes.

cd auto-blissmo
npm i
npm run dev

Y corremos el servidor. Analizando la estructura del proyecto y ayudándonos de la documentación, puedo destacar que fácilmente encuentro donde colocar las cosas ordenadamente, estáticos, tests y hasta el lugar concreto para colocar archivos que solo queremos ejecutar en el servidor, aparecen todos estos lugares frente a mí, con claridad. Además de notar el acompañamiento que Vite le hace a Sveltekit.

Pero vamos a generar una primera ruta.

Agregando una ruta

Aquí es donde encontramos las primeras reglas muy distintas a lo que estoy acostumbrado, me gustan las extensiones .ts y .tsx, pero mantengo la mente abierta y creamos una página como se hace en sveltekit: utilizando el signo de + y la extensión .svelte

Svelte sigue la convención de los ruteadores más modernos, usando carpetas como segmentos, para incluir en ellas los archivos con el correspondiente nombre, es decir, si el archivo se llama +page.svelte, este archivo representa la página principal.

// src/routes/blissmo/+page.svelte

<h1> Hola blissmo </h1>
<a href="/" >Volver</a>

Algo que disfruto aquí, es la simplicidad con que puedo escribir HTML, la simplicidad es una de mis favoritas. También es bueno notar que Sveltekit administra la navegación con simples etiquetas <a> o anchors, sin necesidad de un componente <Link/> específico del framework.

Cargando datos

Entre las convenciones de los archivos encontramos a +page.js nuestra conocida extensión .js aparece. Este archivo es el encargado de cargar los datos desde el servidor para el uso de nuestra página, se puede decir que aquí escribiremos nuestro loader:

import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
    if (params.slug === 'blissmo') {
        return {
            title: '¡Hola Blissmo!',
            content: 't(*_*t)'
        };
    }
    throw error(404, 'Not found');
}

Debemos notar unas cuantas cosas aquí:

1. Los tipos los utilizamos con la notación de JsDoc, por eso el comentario importando el tipo.
2. La función debe llamarse load por convención
3. Los return de esta función están ligados al comportamiento del framework, es decir, no necesitamos emplear específicamente la clase Response para devolver.
4. El manejo de errores, incluido el «not found 404» es administrado por una utilidad llamada error

Aquí te invito a echarte un clavado en la documentación para comprender mejor cómo puedes modificar los comportamientos de la página con las exportaciones de este archivo, incluso puedes apagar el SSR o CSR.

Mutando datos

Vamos a pasar a una de las partes que más me interesan, la recepción de datos, regularmente para mutación. Aquí es donde los frameworks contemporáneos tienen más espacio para innovar, aquí es donde el tipado se vuelve crucial y aquí es donde Next.js está experimentando locamente. Veamos cómo lo resuelve Sveltekit.

Para escribir un «handler» que pueda recibir peticiones POST/PUT/PATCH/DELETE e incluso OPTIONS necesitamos usar otro archivo: +server.js

// src/routes/api/blissmo/+server.js

import { json } from '@sveltejs/kit';
/** @type {import('./$types').RequestHandler} */
export async function POST({ request }) {
    const { name } = await request.json();
    return json("¡Hola " + name + "!");
}

Puedes notar que obtenemos el body de la petición ya parseado. La forma de usar este «endpoint» es variada, si estás acostumbrada(o) a utilizar fetch, nuestra página principal, podría utilizar una etiqueta <script/> para lograr la comunicación:

<script>
    let name = "Blissmo";
    const sayHello = async () => {
        const response = await fetch('/api/blissmo', {
            method: 'post',
            body: JSON.stringify({ name }),
            headers: {
                'content-type': 'application/json'
            }
        });

        const greeting = await response.json();
    }
</script>

<h2>Escribe tu nombre:</h2>
<input bind:value={name} />
<button on:click={sayHello}>
	Saludar
</button>
<h1> {greeting} </h1>

Aquí entra en juego la sintaxis de Svelte, que también te recomiendo repasar. También me pasa que siento ese pequeño tedio de reaprender cosas, o entender directivas específicas que me han mantenido lejos de Angular, pero así toca en el desarrollo web, y no mantenerse al día sería una contradicción al oficio.

Actions

Además de la posibilidad de construir APIs muy avanzadas con los handlers, también podemos recibir formularios fácilmente relacionados a un mismo segmento con acciones (muy populares hoy en día)

Para un formulario así, por ejemplo:

// src/routes/login/+page.svelte

<form method="POST">
    <label>
        Email
        <input name="email" type="email">
    </label>
    <label>
        Password
        <input name="password" type="password">
    </label>
    <button>Log in</button>
</form>

Podemos escribir una acción así:

// src/routes/login/+page.svelte

/** @type {import('./$types').Actions} */
export const actions = {
    default: async (event) => {
        // TODO log the user in
    }
};

Algo interesante aquí, es que podríamos tener acciones con nombre:

// src/routes/login/+page.svelte

/** @type {import('./$types').Actions} */
export const actions = {
    login: async (event) => {},
    signout: async ()=>{}
};

Que se pueden invocar y relacionar al cliente así:

<form method="POST" action="?/signout">

Debes decidir si tener una acción default o las prefieres nombradas, pero no las dos. Aquí no termina el tema de las acciones con Svelte, es un tema amplio e innovador, cabe decir, pero para los fines introductorios de este post, lo dejaremos para una exploración más amplia en el futuro.

Conclusión

Por su puesto que hay mucho más que no he detallado en este video, no lo considero una introducción suficiente para un principiante, repito es meramente un vistazo para mí mismo. Un vistazo superficial a este poderoso framework, que como primera impresión, no solo me deja interesado, también me deja esa sensación de que las cosas se pueden simplificar aún más sin perder capacidad.

Hay cosas que aún ignoro y que me gustaría descubrir, como saber si puedo emplear TypeScript directamente o si puedo adquirir velocidad en mi artesanía web. Seguro en los próximos meses tendré respuestas.

¡Y ya está! Si te gustaría que le diera una segunda ronda a Sveltekit y crear algo útil con él, no dejes de decírmelo.

¿Y a ti, te ha gustado Sveltekit? ¿Lo vas a probar, o ya eres un experto? También me lo puedes contar en Discord, te dejo el enlace.

Abrazo. blissmo.

🏏 Enlaces relacionados

Sveltekit routing docs

Discord link