VineJS vs Zod pour la validation du schéma

Écrit par Oghenetega Denedo✏️

La validation de schéma est indispensable pour toute application prête pour la production, car toutes les données provenant d'utilisateurs ou d'autres sources externes doivent être conformes à une structure ou un format prédéfini pour maintenir l'intégrité des données et éviter tout comportement inattendu dans nos applications.

En règle générale, les développeurs doivent proposer une validation pour les données d'entrée lorsqu'un utilisateur soumet un formulaire à un site Web ou pour la charge utile envoyée à une API via une requête HTTP. Cependant, l’écriture manuelle de cette logique de validation peut être répétitive et prendre beaucoup de temps, ce qui n’est pas bon pour la productivité des développeurs.

Heureusement, les bibliothèques destinées aux tâches de développement courantes n'ont pratiquement pas posé de problèmes au sein de la communauté JavaScript, et la validation des schémas ne fait pas exception.

Dans cet article, nous comparerons VineJS et Zod en évaluant leurs capacités de validation, leurs performances, leur intégration avec les outils et leur écosystème. À la fin, vous verrez que même si VineJS excelle en termes de performances, la polyvalence de Zod et sa forte intégration TypeScript en font un choix plus complet pour la plupart des projets.

Qu’est-ce que VineJS ?

VineJS est une bibliothèque moderne de validation de schéma JavaScript/TypeScript conçue pour être légère, facile à utiliser et hautement performante.

Le projet provient de la base de code du validateur AdonisJS et a été mis à niveau et publié en tant que bibliothèque autonome. VineJS a été conçu pour être utilisé dans les environnements côté serveur Node.js, en particulier dans des scénarios tels que la validation des requêtes entrantes vers une API pour s'assurer que la charge utile est au format attendu avant un traitement ultérieur.

Certaines des fonctionnalités clés de VineJS incluent :

• Légère et rapide — La bibliothèque a été conçue pour être légère afin de valider efficacement les données avec une surcharge minimale pour les applications
• Prise en charge de TypeScript — VineJS fournit une inférence de type pour les schémas définis afin que les données validées soient correctement saisies
• Messages d'erreur personnalisés – Avec l'API du fournisseur de messages simples, les messages d'erreur peuvent être personnalisés pour être clairs et spécifiques au contexte
• Syntaxe déclarative — VineJS offre également un moyen clair et concis de définir des schémas de validation pour une meilleure lisibilité et une facilité de maintenance
• Schéma de précompilation — L'une des fonctionnalités les plus remarquables de VineJS est la façon dont il améliore les performances en précompilant les schémas en fonctions JavaScript optimisées pour les réutiliser pour la validation
• Extensibilité — VineJS facilite la création de types de schémas personnalisés et de règles de validation pour répondre aux besoins spécifiques de votre projet

Dans la section suivante, nous verrons comment certaines de ces fonctionnalités entrent en jeu.

Validation du schéma avec VineJS

Examinons certaines des capacités de validation de schéma de VineJS.

Types de données de base

Lorsque vous travaillez avec des entrées utilisateur ou des données provenant de sources externes, la validation des types de données de base tels que les chaînes, les nombres et les booléens est souvent la première étape. VineJS simplifie ce processus grâce à son API intuitive.

Par exemple, validons l'âge d'un utilisateur :

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Dans cet exemple, nous avons créé un schéma simple pour vérifier que l'entrée est un nombre et utilisé les méthodes min et max pour garantir qu'elle est comprise entre 18 et 30. VineJS propose ces règles de validation supplémentaires pour rendre la validation plus précise.

Parfois, vous devez formater les données d'entrée avant d'appliquer les règles de validation. Par exemple, si vous souhaitez vous assurer qu'une chaîne d'entrée est transformée en minuscules avant la validation, vous pouvez le faire dans le schéma :

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Dans ce schéma, le nom d'utilisateur est converti en minuscules avant de vérifier sa longueur et son format.

Validation des objets et des tableaux

Au-delà des types de schémas de base, VineJS propose une validation des objets et des tableaux, ce qui le rend particulièrement utile pour valider des formulaires ou des charges utiles d'API avec plusieurs champs.

Voyons comment vous pouvez valider un objet représentant le profil d'un utilisateur :

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

Dans cet exemple, nous avons mis en place un schéma pour un profil utilisateur avec des champs pour le nom, l'e-mail et l'âge.

En utilisant la méthode vine.object(), nous pouvons valider chaque champ selon les règles données. Tous les champs de vine.object sont obligatoires par défaut, ils doivent donc être présents dans l'objet en cours de validation. Cependant, nous avons marqué le champ age comme facultatif avec la méthode optionnelle (), donc la validation n'échouera pas s'il est manquant.

Les tableaux peuvent également être gérés de la même manière :

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Dans cet exemple, le schéma garantit que chaque élément du tableau est une chaîne de 2 à 20 caractères et que le tableau lui-même doit contenir 1 à 10 éléments. Ceci est particulièrement utile pour valider des listes telles que des balises ou des catégories.

Schémas de pré-compilation

La précompilation est une fonctionnalité clé de VineJS qui transforme un schéma en une fonction JavaScript optimisée qui peut être réutilisée pour la validation afin de réduire les frais généraux liés à l'analyse et à la validation répétées du schéma. Cela peut être très utile dans les environnements de production pour apporter des gains de performances.

Pour précompiler un schéma, vous pouvez utiliser la méthode vine.compile() :

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

La précompilation est particulièrement utile pour les schémas qui nécessitent une validation fréquente, comme ceux d'un point de terminaison d'API à fort trafic.

Étant donné que le schéma sera compilé dans une fonction réutilisable, le processus répétitif d'analyse et de validation du schéma est éliminé afin que VineJS puisse accélérer le processus de validation pour rendre votre application plus réactive.

Messages d'erreur personnalisés

Les messages d'erreur personnalisés aident à fournir des commentaires plus clairs aux utilisateurs afin de faciliter l'identification et la correction des erreurs. VineJS utilise son API SimpleMessagesProvider intégrée pour définir les messages d'erreur sous forme de paires clé-valeur. La clé peut être un nom de règle, c'est-à-dire obligatoire et une chaîne ou une combinaison champ-règle spécifique, et la valeur est le message d'erreur correspondant.

L'API SimpleMessagesProvider peut être configurée globalement, au niveau de chaque schéma ou lorsque la méthode de validation est appelée. Pour les exemples de code qui suivront, nous utiliserons l’API globalement.

Par exemple, disons que vous souhaitez personnaliser les messages d'erreur pour un champ de nom d'utilisateur et d'e-mail :

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Vous pouvez également personnaliser les messages pour les champs imbriqués ou les éléments du tableau. Pour les champs imbriqués, utilisez la notation par points :

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Pour les éléments du tableau, vous pouvez utiliser un caractère générique (*) pour cibler tous les éléments ou spécifier un index :

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

VineJS vous permet également de remplacer les noms de champs par des étiquettes plus conviviales. Ceci est utile lorsque les noms de champs dans votre code ne conviennent pas aux messages destinés aux utilisateurs :

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Règles de validation personnalisées

Au-delà de ce que fournissent les règles intégrées, VineJS donne aux développeurs la possibilité de créer des règles de validation personnalisées pour répondre à vos besoins spécifiques. Vous pouvez utiliser ces règles personnalisées dans votre projet en les implémentant en tant que fonctions autonomes ou en les intégrant dans des classes de schéma préexistantes.

Dans VineJS, une règle personnalisée est simplement une fonction qui met à jour ou valide la valeur d'un champ. Trois paramètres sont normalement transmis à la fonction : la valeur à valider, les options dont la règle peut avoir besoin et le contexte du champ.

Par exemple, créons une règle personnalisée appelée mongodbId qui vérifie si une chaîne est un ObjectId MongoDB valide :

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

Pour rendre cette règle utilisable au sein des schémas VineJS, il faut d'abord la convertir en règle compatible VineJS en utilisant la méthode vine.createRule :

import vine, { SimpleMessagesProvider } from '@vinejs/vine';

vine.messagesProvider = new SimpleMessagesProvider({
  'required': 'You must provide a value for {{ field }}.',
  'email': '{{ field }} needs to be a valid email address.',
  'username.required': 'A username is required to continue.',
});

Pour simplifier davantage son utilisation, vous souhaiterez peut-être ajouter la méthode mongodbId directement à la classe VineString pour bénéficier d'une API chaînable :

Qu’est-ce que Zod ?

Zod est une bibliothèque de validation de schéma basée sur TypeScript, à la fois simple et puissante. Il facilite la définition et l’application des structures de données et des règles de validation, et fonctionne bien pour les applications frontend et backend.

Conçu spécifiquement pour TypeScript, Zod garantit une intégration fluide et une forte inférence de type pour les projets TypeScript.

Certaines des fonctionnalités clés de Zod sont :

• Intégration TypeScript — Zod est entièrement compatible avec TypeScript, offrant une excellente inférence de type pour garantir que vos règles de validation restent synchronisées avec vos types TypeScript
• Messages d'erreur personnalisés — Zod vous permet de spécifier des messages d'erreur personnalisés pour des commentaires significatifs aux utilisateurs
• Fonctions utilitaires — Il comprend des fonctions utiles pour la composition et la validation des schémas, telles que la fusion de schémas et l'affinement des règles
• Immuabilité — Les schémas Zod sont immuables, ce qui signifie que vous ne pouvez pas les modifier accidentellement après la création
• Zéro dépendance — Le package Zod npm est très léger, sans dépendances externes
• Compatibilité navigateur et Node.js — Zod fonctionne à la fois dans Node.js et dans les navigateurs modernes, car cela le rend idéal pour réutiliser les schémas de validation

Validation du schéma avec Zod

Zod rend la validation de schéma simple et flexible, vous permettant de gérer facilement différents types de données et besoins de validation. Sa syntaxe est très similaire à VineJS comme vous le verrez dans les sections qui suivent.

Types de données de base

Zod gère bien les types de données de base tels que les chaînes, les nombres, les booléens et les dates.

Par exemple, créons un schéma simple pour valider une chaîne et un nombre :

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

Dans cet exemple, nameSchema valide que "Peter Parker" est une chaîne et réussit, tandis que ageResult échoue car l'âge est inférieur à 18 ans.

Validation des objets et des tableaux

Lorsqu'il s'agit d'objets et de tableaux, Zod simplifie la définition de la forme de vos données. Par exemple, la validation d'un objet utilisateur et d'une liste de balises peut se faire comme ceci :

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

Dans l'exemple ci-dessus, userSchema valide les données utilisateur et tagsSchema vérifie que le tableau ne contient que des chaînes. La validation du tableau échoue car 123 n'est pas une chaîne.

Messages d'erreur personnalisés

Pour rendre les commentaires de validation plus utiles et la reconnaissance des erreurs plus simple, Zod prend également en charge les messages d'erreur configurables.

Si l'âge est inférieur à 18 ans, par exemple, vous pouvez définir un message personnalisé :

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

Ici, la validation échoue et une erreur est générée avec le message d'erreur personnalisé Vous devez avoir 18 ans ou plus.

Validations personnalisées

Zod offre de la flexibilité pour créer une logique de validation personnalisée à l'aide de la méthode d'affinage, qui vous permet d'appliquer des règles au-delà de la vérification de type de base.

Pour valider un code couleur hexadécimal, par exemple, il ne suffit pas de simplement déterminer s'il s'agit d'une chaîne ; il doit également adhérer à un certain modèle. Voici comment procéder :

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

Dans cet exemple, une logique de validation personnalisée est ajoutée à l'aide de la méthode d'affinage pour déterminer si la chaîne est un code couleur hexadécimal valide composé de trois ou six caractères (#RGB ou #RRGGBB).

VineJS contre Zod

Performance

Les benchmarks de la documentation VineJS montrent que VineJS est l'une des bibliothèques de validation les plus rapides de l'écosystème Node.js, surpassant Yup et Zod en matière de validation d'objet simple et d'autres validations.
Comme indiqué dans la documentation VineJS.

Le graphique montre que VineJS offre des performances supérieures, ce qui en fait une bonne solution pour les applications backend qui nécessitent des performances élevées. Zod fonctionne bien et est suffisamment rapide pour la majorité des cas d'utilisation.

Prise en charge de TypeScript

La prise en charge de TypeScript est excellente dans les deux cas, mais Zod a été conçu en pensant à TypeScript pour rendre l'inférence de type plus transparente. VineJS prend également en charge TypeScript, mais n'est pas aussi profondément intégré, ce qui laisse à Zod un léger avantage pour les projets lourds en TypeScript.

Écosystème

Avec plus de ressources, de tutoriels et de plugins disponibles, Zod dispose d'une communauté plus large et mieux établie. Cependant, même si VineJS est plus récent, dispose de moins de ressources et d'une communauté plus petite, il devrait se développer davantage en raison de son API facile à utiliser et de sa conception axée sur les performances.

Limites

Le principal inconvénient de l'utilisation de VineJS est qu'il n'est pas conçu pour être utilisé dans les environnements d'exécution frontaux. Il est moins adapté aux applications nécessitant une validation côté client en raison de cette contrainte. De plus, il ne prend pas en charge CommonJS, ce qui pourrait poser problème pour les projets qui l'utilisent. Il fonctionne uniquement avec les modules ECMAScript (ESM).

Cependant, Zod est plus polyvalent, prenant en charge les deux principaux systèmes de modules JavaScript tout en fonctionnant bien quel que soit l'environnement dans lequel vous exécutez votre code, ce qui le rend mieux adapté aux projets full-stack.

Autres bibliothèques de validation de schéma

Outre VineJS et Zod, quelques autres bibliothèques de validation de schéma méritent d'être mentionnées pour divers cas d'utilisation.

En raison de sa facilité d'utilisation, Yup est très apprécié et fréquemment utilisé dans la validation frontale, en particulier lorsqu'il est combiné avec React et des outils comme Formik. Comparé à VineJS ou Zod, il ne fonctionne peut-être pas aussi bien avec des structures complexes, mais son API chaînable simplifie le développement de schémas.

Une bibliothèque puissante souvent utilisée dans les backends Node.js s'appelle joi. Bien que son API puisse sembler plus lourde que l'approche légère de VineJS et Zod, elle offre plus de flexibilité et gère une validation compliquée pour les objets profondément imbriqués. Pour les applications côté serveur qui nécessitent une validation sophistiquée, c'est parfait.

La rapidité et la conformité complète du schéma JSON sont les principales priorités d'AJV. Bien qu'il ne dispose pas des API conviviales dont disposent Zod ou VineJS, il est idéal pour valider les données JSON, en particulier dans les API. Mais pour les tâches qui nécessitent une grande efficacité, comme la validation d'énormes ensembles de données JSON, c'est idéal.

Conclusion

VineJS et Zod sont deux excellents outils de validation de schéma et vous ne vous tromperez pas avec l'un ou l'autre, mais ils excellent dans différents domaines. Si vous ne savez toujours pas lequel utiliser, essayez-les tous les deux dans un petit projet et voyez lequel vous convient le mieux. Bon codage !

LogRocket : déboguez plus facilement les erreurs JavaScript en comprenant le contexte

Le débogage du code est toujours une tâche fastidieuse. Mais plus vous comprenez vos erreurs, plus il est facile de les corriger.

LogRocket vous permet de comprendre ces erreurs de manière nouvelle et unique. Notre solution de surveillance front-end suit l'engagement des utilisateurs avec vos frontends JavaScript pour vous donner la possibilité de voir exactement ce que l'utilisateur a fait qui a conduit à une erreur.

LogRocket enregistre les journaux de la console, les temps de chargement des pages, les traces de pile, les requêtes/réponses réseau lentes avec les corps d'en-tête, les métadonnées du navigateur et les journaux personnalisés. Comprendre l'impact de votre code JavaScript n'aura jamais été aussi simple !

Essayez-le gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!