Introduction à SvelteKit 1.0 : le framework de pile complète pour Svelte

Jan 05, 2024

Par Matthew Tyson

Architecte logiciel, InfoWorld |

Comme annoncé récemment, SvelteKit est arrivé à son jalon 1.0 tant attendu, après une longue bêta. SvelteKit 1.0 apporte un cadre d'application entièrement réalisé pour la création d'applications JavaScript complètes avec des interfaces Svelte. Nous allons jeter un coup d'oeil.

Svelte est un framework réactif frontal, comparable à React ou Vue à un niveau élevé, mais avec son propre angle sur les choses. SvelteKit est le framework d'application full-stack pour Svelte, sur le modèle de Next ou Nuxt, mais encore une fois avec ses propres conventions.

La nature d'un cadre d'application à pile complète est qu'il doit être capable d'unir le front-end et le back-end de votre application sous un même parapluie. Un framework full-stack doit répondre à ces questions :

Au cœur de chaque framework d'application se trouve le moteur de routage, qui associe le code qui génère les pages aux URL du navigateur. La plupart des frameworks JavaScript comme SvelteKit se sont installés dans la disposition générale utilisée par Next.js, dans laquelle les fichiers et les répertoires sont mappés sur le chemin de l'URL.

Le répertoire racine de SvelteKit est /src/routes (par défaut). Ainsi /src/routes correspond à l'URL racine, par exemple localhost:5173/ dans le navigateur. Les sous-répertoires correspondent au chemin de l'URL, donc /src/routes/foo/bar devient localhost:5173/foo/bar.

Plusieurs conventions de fichiers dans les répertoires définissent les pages et les points de terminaison. Ces types de fichiers commencent par un signe plus (+), indiquant qu'ils ont une signification particulière pour le framework. (Tous les autres fichiers seront ignorés, vous pouvez donc placer les fichiers d'aide dans les mêmes répertoires.)

Chaque page est un composant Svelte, défini dans un fichier +page.svelte. Un fichier sur /src/routes/foo/bar/+page.svelte devient la page Web sur localhost:5173/foo/bar, définie par le composant Svelte créé dans ce fichier. (En servant la page par défaut sur la route, ce fichier joue un rôle similaire à index.jsx dans d'autres frameworks.) En d'autres termes, +page.svelte est juste un composant Svelte standard suivant la syntaxe Svelte normale.

Bien que +page.svelte ne soit qu'un composant Svelte frontal, il peut s'appuyer sur d'autres fichiers spéciaux pour faire son travail. SvelteKit a également quelques optimisations pratiques dans sa manche. Par défaut, SvelteKit affichera côté serveur +page.svelte. Il utilise le fichier frère +page.js (avec l'extension .js) pour contrôler ce processus. Les deux composants, +page.svelte et +page.js fonctionnent ensemble pour définir le comportement de la pile complète de la page.

Le composant +page.js nous permet de définir une fonction de chargement qui peut effectuer le travail initial dont le composant de page aura besoin, ainsi que de contrôler la façon dont le framework traite la page en ce qui concerne le comportement de rendu. Ce composant prend en charge trois exports const :

Vous pouvez en savoir plus sur le rendu de page avec ces options dans la documentation de SvelteKit. Ici, nous allons nous concentrer sur la fonction load exportée par +page.js. Par défaut, il est exécuté avec +page.svelte sur le serveur et le client. La fonction de chargement communique avec le composant Svelte avec une variable de données. Quelle que soit la fonction d'exportation +page.js, les retours seront définis sur la variable de données let d'exportation de +page.svelte.

Étant donné que la fonction de chargement +page.js s'exécute à la fois sur le client et sur le serveur, elle doit contenir des fonctionnalités qui fonctionneront à la fois dans les environnements de navigateur et de back-end. Lorsque vous avez besoin d'une fonction qui s'exécute uniquement sur le serveur, vous pouvez utiliser +page.server.js. La fonction de chargement s'exécute uniquement sur le back-end. Lorsque le rendu côté serveur (SSR) est sous contrôle, les données peuvent être intégrées dans le rendu ; lorsque le rendu côté client est actif, le code s'exécute sur le serveur et est sérialisé et transmis. (Consultez la documentation de SvelteKit pour en savoir plus sur le choix entre une fonction de chargement "universelle" et une fonction de chargement côté serveur uniquement.)

En plus du chargement, +page.server.js peut définir une fonction d'actions pour gérer les données du formulaire. (Ceci est similaire à la façon dont Remix crée des formulaires et permet aux formulaires de fonctionner lorsque JavaScript n'est pas disponible.)

Si vous avez besoin d'un paramètre d'URL (alias un "slug"), vous pouvez le mettre entre parenthèses. Par exemple, /src/routes/foo/bar/[id] exposera une variable id à +page.js (ou +page.server.js) dans le cadre de l'argument de paramètre à la fonction load : export async function load ({ récupérer }) { param.id }.

Vous pouvez également définir des itinéraires de serveur uniquement pour gérer les points de terminaison d'API avec +server.js. Cette fonction gère les méthodes REST familières telles que GET, PUT, etc. Chacun d'eux est géré en exportant une fonction qui correspond à la méthode ; par exemple, la fonction d'exportation GET({ url }) gérera la méthode GET qui arrive à ce fichier. Ainsi, une fonction GET /src/routes/foo/bar/+server.js répondra à une requête GET localhost:5173/foo/bar.

Bien que nous ne les couvrons pas ici, il y a quelques pages spéciales supplémentaires à connaître :

Notez que les dispositions prennent en charge les dispositions hiérarchiques et que vous pouvez affiner leur comportement.

Les liens sont des liens simples, plutôt qu'un composant spécial. SvelteKit examine les liens dans l'application et s'ils font référence à une page de l'application elle-même (plutôt qu'à un lien externe), la navigation de SvelteKit prend le relais. SvelteKit respecte les directives standard du Web telles que la prélecture sur les liens.

Les zones de connexion entre les couches applicatives, là où le front et le backend communiquent, supportent le typage fort via les annotations TypeScript ou JSDoc @typedef en JavaScript. Par exemple, si vous utilisiez JavaScript, la fonction load() serait décorée avec une annotation telle que /** @type {import('./$types').PageLoad} */. SvelteKit utiliserait cette instruction pour assurer la sécurité du type. Cela garantirait également que le type d'objet arrivé dans l'objet de données du fichier +page.svelte était une classe PageData telle que définie par /** @type {import('./$types').PageData} */.

De même, pour +page.server.js, les fonctions de chargement sont décorées avec /** @type {import('./$types').PageServerLoad} */. Tous ces types sont générés automatiquement par SvelteKit pour que vous puissiez les utiliser dans vos applications.

L'un des principaux moyens par lesquels un framework peut faciliter le développement consiste à simplifier le déploiement de l'application en production. SvelteKit répond à ce besoin avec des adaptateurs, qui transforment l'application en mode développement en un package déployable pour une variété d'environnements cibles. Vous pouvez déployer sur un site statique, une pile Node ou Express, ou en périphérie avec un service comme Vercel.

Par défaut, SvelteKit utilise un adaptateur "auto" qui ne nécessite aucune intervention lors du déploiement sur Cloudflare, Netlify ou Vercel. Une fois que vous avez configuré une plate-forme pour consommer le code d'application, l'adaptateur par défaut créera et déploiera votre projet pour vous.

Vous pouvez avoir des pages qui sont du contenu statique pur, même au milieu d'une application d'une seule page par ailleurs dynamique (le fondateur de Svelte, Rich Harris, appelle ce type d'application "transitoire"). Par exemple, une page À propos peut ne proposer que du contenu statique identique pour tout le monde. Le pré-rendu d'une telle page donnerait la vitesse maximale sans hydratation impliquée. C'est ici que vous pouvez définir l'option de prérendu d'exportation dans +page.js sur false.

Si vous avez en fait un site entier qui peut être pré-rendu, il est possible de générer le site entier en tant qu'application statique en utilisant une sortie de génération statique. En savoir plus sur le prérendu dans la documentation SvelteKit.

Si vous souhaitez démarrer avec SvelteKit 1.0, vous pouvez commencer par créer une application sur l'interface de ligne de commande, en utilisant la commande suivante : npm create svelte@latest sveltekit-demo. Cela lancera la courte invite interactive montrée dans la liste 1.

Notez dans la première question que vous pouvez choisir entre un projet squelette et un projet squelette de bibliothèque. SvelteKit prend en charge les bibliothèques en plus des applications Web typiques. Alors qu'une application Web est un ensemble de bibliothèques dont le produit final est une interface utilisateur utilisable, une bibliothèque est un ensemble de bibliothèques qui sont consommées par d'autres projets et dont l'interface utilisateur est généralement la documentation de la bibliothèque. Consultez la documentation de SvelteKit pour en savoir plus sur la différence entre le packaging pour une distribution lib ou UI.

Ensuite, il vous est demandé si vous souhaitez utiliser JSDoc ou TypeScript pour définir l'application. Vous avez déjà vu le typedef JSDoc en action. C'est ici que vous pouvez indiquer au générateur quelle syntaxe vous souhaitez utiliser.

Si vous sélectionnez l'option "jeu de devinettes", le créateur de l'application produira une application qui utilise de nombreuses fonctionnalités dont nous avons parlé ici. Ceux-ci seront placés dans un répertoire nommé comme vous l'avez spécifié, par exemple, sveltekit-demo.

Vous remarquerez que l'application est construite avec le bundle Vite et que la plupart des commandes de l'application sont des commandes Vite. Par exemple, après avoir installé les dépendances avec npm install, vous pouvez exécuter le serveur dev avec npm run dev. (Si vous n'êtes pas sur localhost, utilisez le commutateur --host pour exposer l'application au réseau.) Vous pouvez ensuite ouvrir l'application de démonstration et cliquer sur le lien "Sverdle" pour voir le jeu en action, comme illustré dans la capture d'écran suivante .

Figure 1. L'application de démonstration, Sverdle.

Bien qu'il y ait beaucoup plus à SvelteKit et de nombreuses options à explorer, vous avez vu les bases. SvelteKit est une réponse complète à la demande d'un cadre d'application pour l'utilisation de Svelte. En tant que framework, il est similaire à d'autres comme Next. Non seulement cela fait le travail, mais c'est une réponse bien pensée à la conversation en cours autour de la création de logiciels plus intelligents pour le Web. Les idées trouvées dans SvelteKit influenceront sûrement l'orientation future de cette conversation.

Lisez ensuite ceci :

Matthew Tyson est l'un des fondateurs de Dark Horse Group, Inc. Il croit en la technologie axée sur les personnes. Lorsqu'il ne joue pas de guitare, Matt explore l'arrière-pays et l'arrière-pays philosophique. Il écrit pour JavaWorld et InfoWorld depuis 2007.

Copyright © 2023 IDG Communications, Inc.