Qu'est-ce que FormKit ?
Introduction
FormKit est bien plus qu'une bibliothèque d'interface utilisateur. C'est un framework de création de formulaires complet pour les développeurs Vue qui rend la création de formulaires de haute qualité prêts pour la production plus rapide, plus accessible, avec une meilleure expérience développeur (DX) et utilisateur (UX), et moins de code. Il est facile à apprendre et intègre des fonctionnalités prêtes pour la production telles que les entrées, les règles de validation et la gestion des soumissions/erreurs.
Qu'est-ce qu'un framework de formulaires ?
Pourquoi ai-je besoin d'un framework complet pour les formulaires ? Les formulaires ne sont-ils pas faciles ? Dans cette interview en direct et spontanée, l'auteur de FormKit, Justin Schroeder, donne un aperçu de ce que FormKit apporte à votre projet. Indice : c'est bien plus que de l'interface utilisateur.
Vous manquez de temps ? Lisez le billet d'introduction qui explique les objectifs de FormKit écrit lors du lancement du framework.
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 pour la production est fastidieuse et compliquée. Les principales fonctionnalités de FormKit ont été conçues pour résoudre ces problèmes, tout en rendant la création de formulaires efficace et agréable pour les développeurs :
Fonctionnalités clés
- Composant unique : FormKit a été conçu avec un seul composant pour toutes les entrées.
- Accessibilité : Nous produisons un balisage accessible et opinionné 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 n'importe quelle fonctionnalité.
- Communauté : Communauté amicale qui vous aidera à résoudre vos questions.
Composant unique
Les développeurs aiment apprendre, mais personne n'aime étudier 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 temporelle. Idéalement, tous les développeurs seraient bien informés sur les meilleures pratiques en matière d'accessibilité, mais malheureusement ce n'est pas le cas. Pour remédier à cela, FormKit génère une structure DOM accessible et opinionée. Cela est différent de nombreuses bibliothèques de formulaires « sans rendu » populaires qui ne fournissent aucun balisage 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 pour offrir 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 facilite 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, le tout garanti pour être sérialisé en chaîne.
Styles
Avec la possibilité de modifier les classes et le HTML de FormKit, 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 divers contextes de design !
Extensibilité
FormKit est livré avec d'excellentes valeurs par défaut prêtes à l'emploi, 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 création 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 dispose d'une communauté Discord active 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 à 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 côte à côte ? Cool ! Enveloppez certaines entrées dans une <div> et saupoudrez-y du 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 fonctionne 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 création 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 des formulaires dans FormKit est incomparable.
Buefy
Similaire à Vuetify, Buefy est un framework UI complet. Si vous utilisez déjà Bulma ou si vous recherchez 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 des formulaires Vue, et c'est sa mission principale : la validation. FormKit facilite la création de formulaires de haute qualité en incluant la validation comme sous-fonctionnalité de la composition du champ lui-même. Construire des formulaires avec FormKit est super facile et ultra 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 souhaitez.
Vuelidate
Encore une excellente option pour la validation des formulaires, mais axée uniquement sur la validation. FormKit fournit des échafaudages et des fonctionnalités supplémentaires tels que l'accessibilité, l'i18n et la composition des entrées, 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-fonctionnalité 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 créer des formulaires robustes pour Vue.js. Apprenez les bases ainsi que des sujets plus avancés, puis revenez ici dans la documentation lorsque vous devez 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 liens au sein de la communauté, pensez à 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 encore membre (c'est gratuit et ouvert), vous devrez utiliser le lien d'invitation suivant pour rejoindre le serveur :