Qu'est-ce que FormKit ?
Introduction
FormKit est bien plus qu'une bibliothèque d'interface utilisateur. C'est un cadre de construction de formulaires complet pour les développeurs Vue qui rend l'élaboration de formulaires prêts à la production de haute qualité plus rapide et plus accessible, avec un meilleur DX, UX, et moins de code. Il est facile à apprendre et est livré avec des fonctionnalités prêtes à la production comme les entrées, les règles de validation, et la gestion des soumissions/erreurs.
Qu'est-ce qu'un "cadre de formulaires" ?
Pourquoi ai-je besoin d'un cadre complet pour les formulaires ? Les formulaires ne sont-ils pas faciles ? Les bibliothèques d'interface utilisateur et les cadres comme Vue ne résolvent-ils pas déjà tous les problèmes ? Non — parce que les formulaires sont leur propre ensemble de problèmes distincts, ils représentent leurs propres arbres de données distincts, et ils méritent leur propre cadre.
La meilleure présentation de FormKit est la conférence de Justin Schroeder (l'auteur principal de FormKit) à VueConf US 2023 intitulée "Conquering Forms in Vue". La vidéo ci-dessous commence à environ 12 minutes de la conférence — mais si vous avez le temps, il vaut la peine de la regarder depuis le début.
Vous manquez de temps ? Lisez le post d'introduction qui explique les objectifs de FormKit écrit lors du lancement du cadre.
Pourquoi FormKit ?
Les formulaires semblent simples. Après tout, une balise <form> et une balise <input> suffisent. Pourtant, les ingénieurs expérimentés savent que la mise en œuvre de formulaires prêts à la production est fastidieuse et compliquée. Les principales caractéristiques de FormKit ont été conçues pour résoudre ces problèmes, tout en rendant l'élaboration de formulaires efficace et agréable pour les développeurs :
Caractéristiques clés
- Composant unique : FormKit a été conçu avec un seul composant pour toutes les entrées.
- Accessibilité : Nous produisons un balisage accessible par défaut.
- Validation : De nombreuses règles de validation intégrées avec un retour instantané.
- Schéma : Format de schéma puissant pour stocker et générer des formulaires.
- Styles : Thème magnifiquement conçu.
- Extensibilité : Facilité d'extension de toute fonctionnalité.
- Communauté : Une communauté amicale qui vous aidera à résoudre vos questions.
Composant Unique
Les développeurs aiment apprendre - mais personne n'aime éplucher les API tierces et les options de configuration. C'est pourquoi FormKit utilise un seul composant pour tous ses inputs. <FormKit> est le seul composant que vous devez connaître pour commencer - et il fonctionne exactement comme vous vous attendriez à ce qu'une balise <input> fonctionne.
Accessibilité
Créer des formulaires accessibles est un véritable défi. Surtout lorsque les normes d'accessibilité ne sont pas toujours claires et que la plupart des développeurs sont sous pression de temps. Idéalement, tous les développeurs seraient bien versés dans les meilleures pratiques d'accessibilité, mais malheureusement ce n'est pas le cas. Pour y remédier, FormKit génère une structure DOM accessible et opinionée. C'est différent de nombreuses bibliothèques de formulaires "sans rendu" populaires qui ne fournissent aucun balisage du tout et comptent sur les développeurs pour fournir les inputs eux-mêmes.
Validation
La validation côté client qui donne un retour instantané est une partie importante de la fourniture d'une bonne expérience à vos utilisateurs. Malheureusement, cela peut être incroyablement fastidieux à mettre en œuvre, même si vous utilisez une excellente bibliothèque de validation. FormKit élimine la douleur de la validation côté client en intégrant les règles directement dans les inputs.
Schéma
Le schéma de FormKit est un format de données sérialisable en JSON pour stocker les structures DOM et les implémentations de composants, y compris les formulaires FormKit. Les schémas prennent en charge des fonctionnalités avancées telles que la génération de formulaires, la logique conditionnelle, les opérateurs booléens, les boucles, les slots et la portée des données - tous garantis pour être sérialisés en une chaîne.
Styles
Avec la possibilité de modifier les classes de FormKit et même le HTML, FormKit offre de nombreuses façons de styliser vos formulaires. Vous pouvez créer votre propre CSS, utiliser un framework de classes utilitaires comme Tailwind CSS, ou utiliser Genesis - notre thème prêt à l'emploi qui fonctionne très bien dans une variété de contextes de design !
Extensibilité
FormKit est livré avec d'excellentes valeurs par défaut prêtes à la production, et pour de nombreux utilisateurs, les valeurs par défaut sont tout ce dont ils auront besoin. Mais FormKit est plus que de simples inputs. C'est un framework de construction de formulaires, complet avec des hooks, des événements, des plugins, des bibliothèques et des schémas. Les développeurs avancés peuvent créer leurs propres systèmes de formulaires en utilisant les outils de bas niveau de FormKit.
Communauté
FormKit a une communauté active sur Discord où l'aide n'est qu'à quelques frappes de clavier. Les membres de la communauté et les membres de l'équipe principale passent du temps là-bas pour aider les utilisateurs à résoudre leurs problèmes.
Pourquoi pas...?
Bien que FormKit fasse beaucoup de choses, ce n'est pas un framework UI ou un outil de mise en page. Vous voulez des entrées l'une à côté de l'autre ? Cool ! Enveloppez certaines entrées dans une <div> et saupoudrez un peu de flexbox. Bien que FormKit soit livré avec un thème par défaut, ce package suppose que vous serez toujours responsable de la plupart du style et de la mise en page de votre formulaire. FormKit s'intègre bien avec n'importe quel framework UI ou vos propres styles personnalisés.
Si vous avez besoin d'un framework UI complet, vous pouvez consulter ces autres excellents outils :
Vuetify
Vuetify est un framework UI complet tandis que FormKit est un outil axé sur la construction de formulaires. Certaines personnes préfèrent ne pas utiliser de grands frameworks UI, ne les ont pas sur un projet préexistant, ne veulent pas apprendre un nouveau framework, ou préfèrent simplement écrire leurs propres styles à portée étroite. De plus, nous pensons que la composition de formulaires dans FormKit est incomparable.
Buefy
Similaire à Vuetify, Buefy est un framework UI complet. Si vous utilisez déjà Bulma ou si vous cherchez une solution UI complète, c'est un choix solide. FormKit peut coexister avec n'importe quel framework UI et offre toujours les avantages d'une composition de formulaire élégante, d'une validation et d'une gestion des erreurs pour n'en nommer que quelques-uns. Même ainsi, il y a beaucoup de gens qui ne veulent pas ou n'ont pas besoin d'un framework UI complet qui bénéficieraient de l'approche ciblée de FormKit.
VeeValidate
VeeValidate est une excellente option pour la validation de formulaires Vue, et c'est sa mission principale - la validation. FormKit facilite la construction de formulaires de haute qualité en incluant la validation comme une sous-fonction de la composition du champ lui-même. Construire des formulaires avec FormKit est super facile et extrêmement rapide - bien sûr, si vous avez besoin de la puissance de validation supplémentaire, vous l'avez toujours. Vous pouvez écrire n'importe quelle logique de validation personnalisée que vous voulez.
Vuelidate
Encore une autre excellente option pour la validation de formulaires, mais centrée uniquement sur la validation. FormKit fournit des échafaudages supplémentaires et des fonctionnalités telles que l'accessibilité, l'i18n, et la composition d'entrée, permettant aux développeurs de créer des formulaires complexes avec un minimum de friction avec la validation et la gestion des erreurs incluses.
vue-form-generator
Générer des formulaires à partir de JSON est génial - c'est pourquoi le schéma est une sous-fonction de FormKit. Il suffit de passer votre schéma de formulaire au composant FormKitSchema et voilà ! Consultez la documentation ici. Maintenant, vous pouvez utiliser le même outil pour la composition et la génération de formulaires !
Cours vidéo
Vous préférez apprendre en regardant ? Vue School propose un excellent cours pour vous aider à commencer à utiliser FormKit pour construire des formulaires robustes pour Vue.js. Apprenez les bases ainsi que des sujets plus avancés, puis revenez ici dans la documentation lorsque vous avez besoin de combler les lacunes pour des cas d'utilisation spécifiques.
Serveur Discord FormKit
Si vous avez besoin d'aide généralisée ou souhaitez établir des connexions au sein de la communauté, envisagez de rejoindre le Discord officiel de FormKit. Plus de 1200 développeurs ainsi que les membres de l'équipe principale y ont des discussions actives. Si vous n'êtes pas déjà membre (c'est gratuit et ouvert), vous devrez utiliser le lien d'invitation suivant pour rejoindre le serveur :