Wizard de formulários com JS sem bibliotecas
Em um projeto que estou participando, temos um formulário para lá de grande, são 5 passos, ou seja, um wizard e sendo que em um dos passos existe uma tela com mais de 100 inputs, sendo que esse valor é dinâmico, mas dificilmente tem menos que 100 inputs, é mais normal ter mais do que isso.
Estávamos usando o jQuery até então, que é uma biblioteca JS, que contém inúmeros plugins, além de vários facilitadores para construção de aplicações mais interativas. Acho bacana terem surgidos várias bibliotecas JS, onde o jQuery talvez seja a principal dessas, pois com isso o nível de interatividade entre o usuário e as aplicações aumentaram consideravelmente e isso trás (ou pelo menos deveria) outros prós, como: facilidade de navegação e usabilidade mais intuitiva nas interfaces que fazem o bom uso desses recursos. Para os desenvolvedores sem dúvidas também foi algo positivo, pois é bem tranquilo hoje fazer uma requisição ajax com uma linha de script, além de termos também um código mais organizado e estruturado.
Só que eu sempre tive um certo receio em relação a essas bibliotecas, não com as bibliotecas em si, mas da forma que alguns desenvolvedores as usam, principalmente em caso de aplicações para um grande número de acessos em um ambiente mais “pesado”, já vi alguns casos em que o uso dessas bibliotecas atrapalhou mais do que ajudou e recentemente isso aconteceu comigo.
Utilizei um plugin do jQuery pronto para criar wizards de formulário, ou formulário no formato de wizard, como preferir. Esse plugin, além de ser pouco flexível, causou um problema na minha aplicação justamente no wizard que possui vários inputs. O problema é que ao entrar nesse wizard, o browser simplesmente para durante uns 3s, respira, e depois mostra o wizard, e vamos combinar que isso é muito esquisito, não é um comportamento normal. Para ser sincero não consegui identificar a causa principal, mas desconfio de várias coisas, primeiro é que no geral essas bibliotecas são muito pesadas, só para esse wizard de form eram mais de 50kb de arquivo, algo desnecessário, ainda mais considerando um ambiente com MUITO VOLUME de acessos, pois isso acaba causando um overhead. O segundo é em relação ao código da função para geração do wizard, achei o mesmo extenso demais para fazer algo que funciona, mas que é pouco flexível. O terceiro é que essas bibliotecas JS já são uma abstração de N componentes nativos do JS e por mais que seja ínfimo, isso também pode ajudar a causar um overhead.
Mediante a esses percalços e também a falta de flexibilidade do script que eu utilizei, resolvi criar o meu próprio script para fazer o wizard do formulário, esse script é bem simples, não utiliza nenhuma biblioteca JS, é bem fácil de entender e extender, além de ser flexível. Falando assim parece até uma maravilha do mundo moderno hehe, mas realmente o script resolveu meus problemas de performance e me deu a flexibilidade que eu queria. Testei o mesmo no Firefox 3, Opera 9 e IE 7 e funcionou perfeitamente e da mesma maneira em ambos.
Para visualizar o script funcionando, basta clicar aqui, para fazer o download do mesmo, é só clicar aqui.
Se surgirem dúvidas ou problemas, sugiro criar um comentário que responderei somente por aqui, até porque caso outras pessoas que venham a utilizar o script tenham a mesma dúvida, já fico mais fácil de achar e procurar.
Se você gostou desse tópico, por favor considere deixar um comentário ou se inscreva no feed e tenha no futuro todos os tópicos entregues diretamente no seu agregador.
