Introducción a SvelteKit 1.0: el marco de trabajo completo para Svelte

Jan 05, 2024

Por Mateo Tyson

Arquitecto de software, InfoWorld |

Como se anunció recientemente, SvelteKit ha llegado a su muy esperado hito 1.0, luego de una larga versión beta. SvelteKit 1.0 trae un marco de aplicación completamente realizado para crear aplicaciones JavaScript de pila completa con interfaces Svelte. Vamos a ver.

Svelte es un marco reactivo de front-end, comparable a React o Vue en un alto nivel, pero con su propio punto de vista. SvelteKit es el marco de aplicación de pila completa para Svelte, similar a Next o Nuxt, pero nuevamente con sus propias convenciones.

La naturaleza de un marco de aplicación de pila completa es que debe poder unir el front-end y el back-end de su aplicación bajo un solo paraguas. Un marco completo debe responder a estas preguntas:

En el corazón de cada marco de aplicación se encuentra el motor de enrutamiento, que asocia el código que genera las páginas a las URL en el navegador. La mayoría de los marcos de JavaScript como SvelteKit se han asentado en el diseño general que utiliza Next.js, en el que los archivos y directorios se asignan a la ruta de la URL.

El directorio raíz de SvelteKit es /src/routes (por defecto). Entonces /src/routes corresponde a la URL raíz, por ejemplo, localhost:5173/ en el navegador. Los subdirectorios se asignan a la ruta de la URL, por lo que /src/routes/foo/bar se convierte en localhost:5173/foo/bar.

Varias convenciones de archivos dentro de los directorios definen las páginas y los puntos finales. Estos tipos de archivos comienzan con un signo más (+), lo que indica que tienen un significado especial para el marco. (Todos los demás archivos se ignorarán, por lo que puede colocar archivos auxiliares en los mismos directorios).

Cada página es un componente Svelte, definido en un archivo +page.svelte. Un archivo en /src/routes/foo/bar/+page.svelte se convierte en la página web en localhost:5173/foo/bar, definida por el componente Svelte creado en ese archivo. (Al servir la página predeterminada en la ruta, este archivo actúa en una función similar a index.jsx en otros marcos). En otras palabras, +page.svelte es solo un componente estándar de Svelte que sigue la sintaxis normal de Svelte.

Aunque +page.svelte es solo un componente frontal de Svelte, puede depender de otros archivos especiales para hacer su trabajo. SvelteKit también tiene algunas optimizaciones útiles bajo la manga. De forma predeterminada, SvelteKit renderizará en el lado del servidor +page.svelte. Utiliza el archivo hermano +page.js (con la extensión .js) para controlar este proceso. Los dos componentes, +page.svelte y +page.js trabajan juntos para definir el comportamiento de la pila completa de la página.

El componente +page.js nos permite definir una función de carga que puede realizar el trabajo inicial que necesitará el componente de la página, así como controlar cómo el marco trata la página con respecto al comportamiento de representación. Este componente admite tres exportaciones constantes:

Puede obtener más información sobre la representación de páginas con estas opciones en la documentación de SvelteKit. Aquí, nos centraremos en la función de carga exportada por +page.js. De forma predeterminada, se ejecuta junto con +page.svelte tanto en el servidor como en el cliente. La función de carga se comunica con el componente Svelte con una variable de datos. Lo que devuelva la función de exportación de +page.js se establecerá en la variable de datos de exportación de +page.svelte.

Debido a que la función de carga de +page.js se ejecuta tanto en el cliente como en el servidor, debe contener una funcionalidad que funcione tanto en el navegador como en los entornos de back-end. Cuando necesite una función que se ejecute solo en el servidor, puede usar +page.server.js. La función de carga allí se ejecuta solo en el back-end. Cuando el renderizado del lado del servidor (SSR) está bajo control, los datos se pueden integrar en el renderizado; cuando la representación del lado del cliente está activa, el código se ejecutará en el servidor y se serializará y transmitirá. (Consulte la documentación de SvelteKit para obtener más información sobre cómo elegir entre una función de carga "universal" y una función de carga solo del lado del servidor).

Además de cargar, +page.server.js puede definir una función de acciones para manejar datos de formulario. (Esto es similar a cómo Remix hace formularios y permite que los formularios funcionen cuando JavaScript no está disponible).

Si necesita un parámetro de URL (también conocido como "slug"), puede encerrarlo entre corchetes. Por ejemplo, /src/routes/foo/bar/[id] expondrá una variable de identificación a +page.js (o +page.server.js) como parte del argumento del parámetro para la función de carga: export async function load ({ buscar }) { param.id }.

También puede definir rutas solo de servidor para manejar puntos finales de API con +server.js. Esta función maneja los métodos REST familiares como GET, PUT, etc. Cada uno de estos se maneja exportando una función que corresponde al método; por ejemplo, la función de exportación GET({url}) manejará el método GET que llega a ese archivo. Entonces, una función GET de /src/routes/foo/bar/+server.js responderá a una solicitud GET de localhost:5173/foo/bar.

Si bien no los cubriremos aquí, hay algunas páginas especiales más que debe conocer:

Tenga en cuenta que los diseños admiten diseños jerárquicos y puede ajustar su comportamiento.

Los enlaces son enlaces simples , en lugar de un componente especial. SvelteKit examina los enlaces en la aplicación y si se refieren a una página dentro de la propia aplicación (en lugar de un enlace externo), la navegación de SvelteKit se hace cargo. SvelteKit respeta las directivas estándar de la web, como la captación previa de enlaces.

Las áreas de conexión entre las capas de la aplicación, donde se comunican los extremos frontal y posterior, admiten escritura fuerte a través de anotaciones TypeScript o JSDoc @typedef en JavaScript. Como ejemplo, si estuviera usando JavaScript, la función load() estaría decorada con una anotación como /** @type {import('./$types').PageLoad} */. SvelteKit usaría esta instrucción para garantizar la seguridad del tipo. También garantizaría que el tipo de objeto que llegó en el objeto de datos del archivo +page.svelte fuera una clase PageData según lo definido por /** @type {import('./$types').PageData} */.

De manera similar, para +page.server.js, las funciones de carga están decoradas con /** @type {import('./$types').PageServerLoad} */. SvelteKit genera automáticamente todos estos tipos para que los use en sus aplicaciones.

Una de las formas más importantes en que un marco puede facilitar el desarrollo es simplificar la implementación de la aplicación en producción. SvelteKit responde a esta necesidad con adaptadores, que transforman la aplicación de modo de desarrollo en un paquete desplegable para una variedad de entornos de destino. Puede implementar en un sitio estático, una pila Node o Express, o en el perímetro con un servicio como Vercel.

De manera predeterminada, SvelteKit usa un adaptador "automático" que no requiere intervención cuando se implementa en Cloudflare, Netlify o Vercel. Una vez que haya configurado una plataforma para consumir el código de la aplicación, el adaptador predeterminado compilará e implementará su proyecto por usted.

Puede tener páginas que son puro contenido estático, incluso en medio de una aplicación dinámica de una sola página (el fundador de Svelte, Rich Harris, llama a este tipo de aplicación "de transición"). Por ejemplo, una página Acerca de solo puede mostrar contenido estático que es el mismo para todos. La representación previa de una página de este tipo produciría la máxima velocidad sin hidratación involucrada. Aquí es donde puede establecer la opción de exportación previa en +page.js en falso.

Si de hecho tiene un sitio completo que se puede renderizar previamente, es posible generar el sitio completo como una aplicación estática mediante el uso de una salida de compilación estática. Obtenga más información sobre la renderización previa en la documentación de SvelteKit.

Si desea comenzar con SvelteKit 1.0, puede comenzar creando una aplicación en la interfaz de línea de comandos, usando el siguiente comando: npm create svelte@latest sveltekit-demo. Esto iniciará el breve mensaje interactivo que se muestra en el Listado 1.

Observe en la primera pregunta que puede elegir entre un proyecto de esqueleto y un proyecto de esqueleto de biblioteca. SvelteKit admite bibliotecas además de las aplicaciones web típicas. Mientras que una aplicación web es un conjunto de bibliotecas cuyo producto final es una interfaz de usuario utilizable, una biblioteca es un conjunto de bibliotecas que consumen otros proyectos y cuya interfaz de usuario suele ser la documentación de la biblioteca. Consulte la documentación de SvelteKit para obtener más información sobre la diferencia entre empaquetar para una distribución lib o UI.

A continuación, se le pregunta si desea utilizar JSDoc o TypeScript para definir la aplicación. Ya ha visto el typedef de JSDoc en acción. Aquí es donde puede decirle al generador qué sintaxis desea usar.

Si selecciona la opción "juego de adivinanzas", el creador de la aplicación generará una aplicación que utiliza muchas de las funciones que hemos discutido aquí. Estos se colocarán en un directorio con el nombre que haya especificado, por ejemplo, sveltekit-demo.

Notará que la aplicación está construida con el paquete de Vite, y la mayoría de los comandos para la aplicación son comandos de Vite. Como ejemplo, después de instalar las dependencias con npm install, puede ejecutar el servidor de desarrollo con npm run dev. (Si no está en localhost, use el interruptor --host para exponer la aplicación a la red). Luego puede abrir la aplicación de demostración y hacer clic en el enlace "Sverdle" para ver el juego en acción, como se muestra en la siguiente captura de pantalla .

Figura 1. La aplicación de demostración, Sverdle.

Aunque hay mucho más en SvelteKit y muchas opciones para explorar, ha visto lo básico. SvelteKit es una respuesta completa a la demanda de un marco de aplicación para usar Svelte. Como framework, es similar a otros como Next. No solo hace el trabajo, es una respuesta bien pensada a la conversación en curso sobre la creación de software más inteligente para la web. Las ideas encontradas en SvelteKit seguramente influirán en la dirección futura de esa conversación.

A continuación, lea esto:

Matthew Tyson es uno de los fundadores de Dark Horse Group, Inc. Él cree en la tecnología que prioriza a las personas. Cuando no toca la guitarra, Matt explora el backcountry y el interior filosófico. Ha escrito para JavaWorld e InfoWorld desde 2007.

Derechos de autor © 2023 IDG Communications, Inc.