O que é FormKit?
Introdução
FormKit é muito mais do que uma biblioteca de interface do usuário. É uma estrutura abrangente de criação de formulários para desenvolvedores Vue que torna a criação de formulários de alta qualidade prontos para produção mais rápida e acessível, com melhor DX, UX e menos código. É fácil de aprender e vem com recursos prontos para produção, como entradas, regras de validação e manipulação de envio/erro.
O que é uma "estrutura de formulário"?
Por que eu preciso de uma estrutura completa para formulários? Os formulários não são fáceis? As bibliotecas e estruturas de interface do usuário como Vue já não resolvem todos os problemas? Não — porque os formulários são um conjunto de problemas distinto, eles representam suas próprias árvores de dados distintas e merecem sua própria estrutura.
A melhor visão geral do FormKit é a palestra de Justin Schroeder (o autor principal do FormKit) na VueConf US 2023 chamada "Conquering Forms in Vue". O vídeo abaixo começa por volta dos 12 minutos da palestra — mas se você tiver tempo, vale a pena assistir desde o início.
Está com pouco tempo? Leia o post de introdução que explica os objetivos do FormKit escrito quando a estrutura foi lançada pela primeira vez.
Por que FormKit?
Os formulários parecem simples. Afinal, uma tag <form> e uma tag <input> são tudo o que é necessário. No entanto, engenheiros experientes sabem que a implementação de formulários prontos para produção é tediosa e complicada. Os principais recursos do FormKit foram projetados para resolver esses problemas, tornando a criação de formulários eficiente e agradável para os desenvolvedores:
Principais Recursos
- Componente único: FormKit foi projetado com um único componente para todas as entradas.
- Acessibilidade: Nós produzimos uma marcação acessível opinativa por padrão.
- Validação: Numerosas regras de validação integradas com feedback instantâneo.
- Esquema: Formato de esquema poderoso para armazenar e gerar formulários.
- Estilos: Tema lindamente elaborado.
- Extensibilidade: Fácil de estender qualquer recurso.
- Comunidade: Comunidade amigável que irá ajudá-lo a resolver suas dúvidas.
Componente Único
Desenvolvedores adoram aprender — mas ninguém gosta de analisar APIs de terceiros e opções de configuração. É por isso que o FormKit usa um único componente para todas as suas entradas. <FormKit> é o único componente que você precisa conhecer para começar — e funciona exatamente como você esperaria que uma tag <input> funcionasse.
Acessibilidade
Criar formulários acessíveis é um desafio sério. Especialmente quando os padrões de acessibilidade nem sempre são claros e a maioria dos desenvolvedores está sob pressão de tempo. Idealmente, todos os desenvolvedores seriam bem versados nas melhores práticas de acessibilidade, mas infelizmente isso não é o caso. Para resolver isso, o FormKit gera uma estrutura DOM acessível e opinativa. Isso é diferente de muitas bibliotecas de formulários “sem renderização” populares que não fornecem nenhuma marcação e dependem dos desenvolvedores para fornecer as entradas eles mesmos.
Validação
A validação do front-end que fornece feedback instantâneo é uma parte importante para proporcionar uma boa experiência aos seus usuários. Infelizmente, pode ser incrivelmente tedioso de implementar, mesmo se você estiver usando uma ótima biblioteca de validação. O FormKit tira a dor da validação do front-end, incorporando as regras diretamente nas entradas.
Esquema
O esquema do FormKit é um formato de dados serializável em JSON para armazenar estruturas DOM e implementações de componentes, incluindo formulários FormKit. Os esquemas suportam recursos avançados como geração de formulário, lógica condicional, operadores booleanos, loops, slots e escopo de dados — todos garantidos para serializar em uma string.
Estilos
Com a capacidade de modificar as classes do FormKit e até mesmo o HTML, o FormKit oferece muitas maneiras de estilizar seus formulários. Você pode criar seu próprio CSS, usar um framework de classe utilitária como o Tailwind CSS, ou usar o Genesis — nosso tema pronto que funciona muito bem em uma variedade de contextos de design!
Extensibilidade
O FormKit vem com ótimos padrões prontos para produção, e para muitos usuários, os padrões são tudo de que eles precisam. Mas o FormKit é mais do que apenas entradas. É um framework de construção de formulários, completo com hooks, eventos, plugins, bibliotecas e esquemas. Desenvolvedores avançados podem criar seus próprios sistemas de formulários usando as ferramentas de baixo nível do FormKit.
Comunidade
O FormKit tem uma comunidade ativa no Discord onde a ajuda está a apenas alguns toques de distância. Membros da comunidade e membros da equipe principal passam tempo lá ajudando os usuários a resolver seus problemas.
Por que não...?
Embora o FormKit faça muitas coisas, ele não é um framework de UI ou uma ferramenta de layout. Quer inputs um ao lado do outro? Legal! Envolva alguns inputs em uma <div> e adicione um pouco de flexbox. Embora o FormKit venha com um tema padrão, este pacote assume que você ainda será responsável pela maior parte do estilo e layout do seu formulário. O FormKit se integra bem com qualquer framework de UI ou com seus próprios estilos personalizados.
Se você precisa de um framework de UI completo, você pode conferir estas outras ótimas ferramentas:
Vuetify
Vuetify é um framework de UI completo, enquanto o FormKit é uma ferramenta focada na construção de formulários. Algumas pessoas preferem não usar grandes frameworks de UI, não os têm em um projeto pré-existente, não querem aprender um novo framework, ou simplesmente preferem escrever seus próprios estilos de escopo estreito. Além disso, acreditamos que a composição de formulários no FormKit é insuperável.
Buefy
Semelhante ao Vuetify, Buefy é um framework de UI completo. Se você já está usando Bulma ou está procurando uma solução de UI abrangente, é uma escolha sólida. O FormKit pode conviver com qualquer framework de UI e ainda oferece os benefícios de uma composição de formulário elegante, validação e manipulação de erros, para citar alguns. Ainda assim, há muitas pessoas que não querem ou não precisam de um framework de UI completo que se beneficiariam da abordagem focada do FormKit.
VeeValidate
VeeValidate é uma ótima opção para validação de formulários Vue, e essa é a sua principal missão - validação. O FormKit torna a construção de formulários de alta qualidade mais fácil, incluindo a validação como uma subfunção da composição do campo em si. Construir formulários com o FormKit é super fácil e extremamente rápido - claro, se você precisar do poder extra de validação, você ainda o tem. Você pode escrever qualquer lógica de validação personalizada que desejar.
Vuelidate
Mais uma ótima opção para validação de formulários, mas focada apenas na validação. O FormKit fornece estrutura adicional e recursos como acessibilidade, i18n e composição de entrada, permitindo aos desenvolvedores criar formulários complexos com o mínimo de atrito, com validação e manipulação de erros incluídas.
vue-form-generator
Gerar formulários a partir de JSON é ótimo - é por isso que o esquema é uma subfunção do FormKit. Basta passar o esquema do seu formulário para o componente FormKitSchema e voilà! Confira a documentação aqui. Agora você pode usar a mesma ferramenta para composição e geração de formulários!
Curso em vídeo
Prefere aprender assistindo? Vue School tem um excelente curso para ajudá-lo a começar a usar o FormKit para construir formulários robustos para Vue.js. Aprenda o básico, bem como tópicos mais avançados, e depois volte aqui para a documentação quando precisar preencher as lacunas para casos de uso específicos.
Servidor Discord do FormKit
Se você precisa de ajuda geral ou quer fazer conexões dentro da comunidade, considere entrar no servidor oficial do FormKit no Discord. Mais de 1200 desenvolvedores, juntamente com os membros da equipe principal, têm discussões ativas lá. Se você ainda não é um membro (é gratuito e aberto), você precisará usar o seguinte link de convite para entrar no servidor: