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

a quién anunciado recientemente, SvelteKit ha alcanzado el tan esperado hito 1.0 después 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.

Descripción general de SvelteKit 1.0

Svelte es un marco reactivo de front-end que es muy comparable a React o Vue, pero con sus propias características. ángulo propio de las cosas. SvelteKit es un marco de software de pila completa para Svelte similar a Next o Nuxt, pero aún con sus propias convenciones.

La naturaleza de un marco de software de pila completa es que debería poder integrar el front-end y el back-end de su aplicación bajo un mismo paraguas. Un marco de trabajo completo debe responder a estas preguntas:

• ¿Cómo se asocian las URL con las páginas de front-end y los puntos finales de back-end?
• ¿Cómo se accede a las rutas de backend desde el frontend?
• ¿Cómo se definen las páginas de front-end y los puntos finales de back-end?

En el corazón de cada marco de software hay un motor de enrutamiento que asigna el código que genera páginas a URL en el navegador. La mayoría de los marcos de JavaScript, como SvelteKit, se han adaptado al diseño común utilizado por Next.js, donde los archivos y las carpetas están vinculados por una ruta URL.

Directorio raíz de SvelteKit /src/routes (por defecto). Así que eso /src/routes por ejemplo, corresponde a la URL raíz localhost:5173/ en el navegador. Las subcarpetas se asignan a una ruta URL, por lo que /src/routes/foo/bar sucede localhost:5173/foo/bar.

Varias convenciones de archivos en directorios definen páginas y puntos finales. Estos tipos de archivos comienzan con un signo más (+) para indicar que son específicos del marco. (Todos los demás archivos se ignorarán, por lo que puede colocar los archivos auxiliares en las mismas carpetas).

Cada página es un componente Svelte definido por un +page.svelte expediente. Un archivo /src/routes/foo/bar/+page.svelte se convierte en una página web en localhost:5173/foo/bar, definido por el componente Svelte creado en ese archivo. (Desempeña un papel similar a este archivo al servir la página predeterminada en la ruta index.jsx en otros marcos.) En otras palabras, +page.svelte solo el componente Svelte estándar a continuación sintaxis esbelta normal.

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

+ Función de carga universal con page.js

Él +page.js El componente nos permite definir una función de carga que puede realizar el trabajo avanzado que necesitará el componente de la página, y también controla cómo el marco trata la página en términos de comportamiento de representación. Este componente admite tres const exportar:

• export const prerender previsualiza la página.
• export const ssr el lado del servidor representa la página.
• export const csr el lado del cliente representa la página.

Puede obtener más información sobre la representación de páginas con estas opciones Documentación de SvelteKit. Aquí, nos centraremos en la función de descarga que exporta. +page.js. Por defecto, funciona en paralelo +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. No importa qué +page.js se basará en el retorno de la función de exportación export let data variable +page.svelte.

+Carga del lado del servidor y acciones de formulario con page.server.js

porque +page.js la funcionalidad de descarga funciona tanto en el cliente como en el servidor, debe incluir la funcionalidad para funcionar tanto en el navegador como en el entorno de back-end. Puede usarlo cuando solo necesita una función que se ejecuta en el servidor +page.server.js. La función de descarga allí se realiza solo en la parte posterior. Cuando el renderizado del lado del servidor (SSR) está bajo control, los datos se pueden integrar en el renderizador; cuando la representación del lado del cliente está habilitada, el código se ejecutará en el servidor y se serializará y transmitirá. (ver Documentación de SvelteKit (para obtener más información sobre cómo elegir entre la función de descarga “universal” y la función de descarga del lado del servidor únicamente).

Además de load, +page.server.js puede determinar actions función para administrar los datos del formulario. (Esto es similar a la forma en que Remix crea formularios y permite que se ejecuten cuando JavaScript no está disponible).

API de servidor con +server.js

También puede definir rutas solo de servidor para manejar puntos finales de API +server.js. Esta función utiliza GET, PUT, etc. maneja métodos REST familiares como Cada uno de estos se maneja exportando una función correspondiente a un método; por ejemplo, export function GET({ url }) manejará el método GET entrante a ese archivo. para que un /src/routes/foo/bar/+server.js La función GET devolverá un localhost:5173/foo/bar solicitar OBTENER.

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

• +error.svelte especifica la página de error. (Obtenga más información sobre los errores aquí.)
• +layout.svelte define un componente de diseño front-end (analógico +page.svelte).
• +layout.js define un load componente de diseño de función (analógico +page.js).
• +layout.server.js define un diseño del lado del servidor (analógico +page.js).

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

Comunicador

Los enlaces son simples enlaces en lugar de un componente específico. SvelteKit verifica los enlaces en la aplicación y si apuntan a una página dentro de la propia aplicación (en lugar de un enlace externo), SvelteKit se hace cargo de la navegación. Premios SvelteKit directivas de estándares web como precarga en enlaces.

Escritura potente con TypeScript o JSDoc

Las interfaces entre las capas de la aplicación donde se comunican los extremos delantero y trasero admiten secuencias de comandos sólidas a través de TypeScript o JSDoc. @tipodef anotaciones En JavaScript. Por ejemplo, si está utilizando JavaScript, load() será anotado como una función /** @type {import('./$types').PageLoad} */. SvelteKit utilizará esta directiva para garantizar la seguridad del tipo. También proporcionaría el tipo del objeto entrante al objeto de datos. +page.svelte era un archivo PageData clase definida por /** @type {import('./$types').PageData} */.

Del mismo modo, para +page.server.jsdecorado con funciones de carga /** @type {import('./$types').PageServerLoad} */. SvelteKit genera automáticamente todos estos tipos para que los use en sus aplicaciones.

Despliegue con adaptadores

Una de las formas más importantes en que un marco puede facilitar el desarrollo es simplificando la implementación de aplicaciones en producción. SvelteKit satisface esta necesidad adaptadores, que convierte una aplicación en modo de desarrollo en un paquete desplegable para diferentes entornos de destino. Puede implementar en un sitio estático, una pila Node o Express, o con un servicio como Outsource. Vercel.

De manera predeterminada, SvelteKit usa un adaptador “automático” que no requiere intervención cuando se implementa en Cloudflare, Netlify o Vercel. Después de configurar la plataforma para usar el código de la aplicación, el adaptador predeterminado compilará e implementará su proyecto por usted.

Vista previa de contenido estático

Incluso en medio de una aplicación dinámica de una página (el fundador de Svelte, Rich Harris), puedes tener páginas con contenido estático puro. este tipo de aplicación se denomina “transición”.). Por ejemplo, la página Acerca de solo puede mostrar contenido estático que sea igual para todos. La representación previa de una página de este tipo dará la velocidad más alta sin ningún tipo de amortiguación. Puede configurar la opción renderizar antes de exportar aquí +page.js mentir

De hecho, si tiene un sitio completo que se puede renderizar previamente, es posible generar el sitio completo como una aplicación estática utilizando la salida de compilación estática. Aprender más sobre representación previa En la documentación de SvelteKit.

Crear una aplicación

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

Listado 1. Crear una nueva aplicación con SvelteKit

? Which Svelte app template? › - Use arrow-keys. Return to submit.
❯   SvelteKit demo app
    A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!
    Skeleton project
    Library skeleton project

? Add type checking with TypeScript? › - Use arrow-keys. Return to submit.
❯   Yes, using JavaScript with JSDoc comments
    Yes, using TypeScript syntax
    No

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. Si el producto final de una aplicación web es un conjunto de bibliotecas con una interfaz de usuario utilizable, una biblioteca es un conjunto de bibliotecas que consumen otros proyectos y la interfaz de usuario suele ser la documentación de la biblioteca. Consulte la documentación de SvelteKit para obtener más información sobre Diferencia entre lib o empaquetado para la distribución de UI.

Luego se le pregunta si desea usar JSDoc o TypeScript para definir la aplicación. Ya has visto JSDoc typedef en acción. Aquí puede decirle al generador qué sintaxis desea usar.

Si elige la opción “Juego de adivinanzas”, el creador de la aplicación producirá una aplicación que utiliza muchas de las funciones que hemos discutido aquí. Estos se colocarán en cualquier carpeta que especifique, por ejemplo sveltekit-demo.

Verás que la aplicación se instala con Empaquetador de Vite, y la mayoría de los comandos del programa son comandos de Vite. Por ejemplo, después de instalar dependencias npm installpuedes ejecutar un servidor de desarrollo con npm run dev. (Si no está en localhost, use --host para poner el programa en línea). Luego puede abrir el programa de demostración y hacer clic en el enlace “Sverdle” para ver el juego en acción como se muestra en la captura de pantalla a continuación.

IDG

El resultado

Si bien hay mucho más en SvelteKit y muchas opciones para explorar, ha cubierto los conceptos básicos. SvelteKit es una respuesta completa a la necesidad de un marco de software 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 sin duda influirán en la dirección futura de esta conversación.