Turbinando Meus Protótipos com Vue.js
Qual a melhor maneira criar protótipos? Com Vue.js você pode criar protótipos de alta fidelidade, executáveis e reaproveitáveis.
Análise com Protótipos de Baixa Fidelidade
Eu particularmente gosto da fase de análise de um software, pegar um problema e pensar na melhor maneira de resolver aquele problema é algo extremamente desafiador.
Durante a análise várias ideias surgem e com objetivo de visualizar rapidamente essas ideias, eu procuro criar protótipos de baixa fidelidade desenhados à mão livre, também conhecidos como Wireframe. Ou seja, rabisco algumas telas com papel e caneta.
Embora existam inúmeras ferramentas de prototipação disponíveis no mercado, o protótipo de baixa fidelidade desenhado a mão livre é a maneira mais rápida de visualizar uma ideia. A velocidade neste caso é muito importante, pois é comum esquecer detalhes que não foram documentados no momento certo.
Efeito Colateral
Outro ponto importante da análise, é compartilhar as ideias para obter feedbacks que indicam se você está no caminho certo ou não.
Porém nem todos conseguem compreender os protótipos de baixa fidelidade, principalmente usuários finais que não estão habituados com o desenvolvimento de software. Isso ainda pode se agravar caso você não seja muito bom com desenhos.
Protótipos de Alta Fidelidade
Durante algum tempo eu tentei utilizar ferramentas para prototipação de alta fidelidade, embora os feedbacks tenham sido satisfatórios, o problema foi o tempo gasto com esses protótipos.
Se você, assim como eu, gosta de utilizar métodos ágeis e entregar software em funcionamento com frequência, gastar tempo demais com protótipos de alta fidelidade pode impactar na data de entrega do projeto.
A grande questão aqui, é que praticamente todas as ferramentas de prototipação de alta fidelidade não oferecem uma solução para reaproveitamento dessa etapa. Algumas ferramentas até oferecem algum tipo de exportação para HTML, mas normalmente os códigos são muito poluídos.
Protótipos Executáveis com Vue.js
Com a arquitetura SPA (Single Page Applications) é possível obter uma boa separação entre o back-end e o front-end. Atualmente o meu framework favorito para este tipo de arquitetura é o Vue. Se você não sabe o que é SPA e Vue.js, recomendo pesquisar sobre o assunto antes de continuar a leitura.
Desta forma, eu normalmente inicio o desenvolvimento pelo front-end, codificando apenas o HTML com o mínimo de JavaScript (apenas eventos de transições e dados fictícios). Sempre me baseando nos protótipos de baixa fidelidade que criei durante a análise.
Mostro essas telas para os Stakeholders e a partir de um feedback positivo dou continuidade ao desenvolvimento (criação do back-end e ligação entre back-end e front-end).
Resultados Obtidos
Os resultados que venho obtendo são estes:
- Análise rápida com os protótipos de baixa fidelidade.
- Protótipos de alta fidelidade, executáveis e reaproveitáveis usando Vue.js.
- Ótimo feedback antes de dar continuidade ao desenvolvimento.
- Produto final tem excelente índice de aceitação do cliente.
Dúvidas ou sugestões é só entrar em contato. Abraço.