O mundo JavaScript se move rápido! Com avanço das tecnologias front-end, diferentes ferramentas e técnicas estão sendo criadas a todo momento para o desenvolvimento de aplicações web. A cada dia, novas frameworks são criadas para tornar os aplicativos mais rápidos, mais atraentes e mais fáceis de usar. O Vue.js é uma dessas novas tecnologias front-end e está sendo amplamente usado em todo o mundo para o desenvolvimento web.
No primeiro trimestre de 2017, comecei a utilizar Vue.js para prototipagem de MVPs e aplicativos internos na empresa em que trabalhava. Como eu era o único desenvolvedor front-end, a agilidade na construção de novos aplicativos era um requisito essencial para o sucesso das soluções. Como já possuía conhecimento básicos em React.js, ao sair de um minicurso sobre Vue, decidi experimentar essa framework em uma dashboard interna que ajudaria o time de produto na construção de chatbots.
Por que Vue.js?
Com a primeira release em 2014, o Vue.js é uma framework recente em comparação aos irmãos React (2013), e Angular (2010), e os desenvolvedores acreditam que há muitas coisas que o React e Angular conseguiram resolver corretamente, as quais serviram de inspiração para o Vue no início de seu desenvolvimento. Comparar frameworks é geralmente difícil, e como diz um velho sábio, a melhor ferramenta é aquela que você conhece, e eleger a “melhor framework” quase nunca faz sentido, pois cada uma tem como propósito resolver um conjunto de problemas específicos. Dito isso, faz mais sentido falarmos neste artigo no que o Vue pode ter vantagens.
Algumas vantagens do Vue.js incluem:
- Redução de complexidade – Vue é muito mais simples, tanto em termos de API quanto de design, e possui uma curva de aprendizado muito menos acentuada em comparação ao React e Angular.
- Documentação detalhada – O Vue.js possui uma ótima documentação (opinião pessoal: é a melhor), que reduz a curva de aprendizado para os novos desenvolvedores e economiza tempo sendo necessário apenas conhecimentos básicos de HTML e JavaScript.
- Flexibilidade e adaptabilidade – Vue faz o uso de templates como experiência padrão, mas também possui funções de renderização e até mesmo suporte a JSX, o que facilita a transição e compreensão dos desenvolvedores habituados a outras frameworks.
Em resumo, Vue.js combina features peculiares de outras frameworks, possui fácil curva de aprendizado para novos desenvolvedores e transição sem dor para desenvolvedores experientes em outras frameworks.
Mas o que isso tem a ver com desenvolvimento ágil e prototipação? Vamos partir pra parte prática!
O Vue CLI
Assim como o Angular, o Vue também oferece um CLI gerador de projetos, o que torna muito simples iniciar um novo projeto. Você pode gerar a estrutura do projeto utilizando configurações padrões do CLI, ou escolher as features necessárias ao seu projeto de forma interativa e zero esforço! Router? Store com Vuex? SASS? Tudo é configurado automaticamente utilizando padrões sensatos e bem estabelecidos.
Caso você não precise de todo um projeto configurado e quer apenas testar um componente que você está prototipando, O CLI também possui o Instant Prototyping, com ele você pode prototipar rapidamente com apenas um único arquivo * .vue, se preocupando apenas com seu componente e zero config!
Frameworks CSS no seu projeto
O Vue possui uma comunidade forte no Brasil, e boa parte de seu market share também é dado por desenvolvedores chineses (que as vezes pode ser considerado um drawback, visto que muitas vezes as libs estão documentadas em chinês, mas a cada dia mais e mais material está sendo traduzido para o inglês), e por isso, há muita coisa construída pela própria comunidade (se tiver curiosidade, dá uma olhada nessa lista).
Assim como nos outros frameworks, há um grande variedade de bibliotecas de componentes UI, e a escolha quase sempre está baseada nas guidelines de design do seu produto. Uma dessas bibliotecas é o Buefy, uma biblioteca leve e poderosa de componentes UI responsivos baseado em Bulma, um framework CSS baseada em Flexbox. O Buefy possui um conjunto completo de componentes com aplicação focada em dashboards, trazendo Dialogs, Form Controls, Snackbars, Tables, e vários outros componentes, em uma interface API amigável, com recursos de customização e tratativas de eventos.
Adicionar o Buefy no seu projeto é simples, basta adicionar o código abaixo no seu main.js:
import Vue from 'vue'; import Buefy from 'buefy'; import 'buefy/lib/buefy.css'; Vue.use(Buefy);
Além do Buefy, o Bulma também possui classes convenientes para os diversos estados do seu componente, e combinado com o recurso de interligação de classe do Vue, você tem uma poderosa ferramenta para agilizar seu desenvolvimento.
“Gibe mor libs plos”
Infelizmente, o Vue não vem com tantas features out-of-the-box como o Angular, o maior exemplo disso é a falta de uma biblioteca oficial para manipulação de formulários. Porém, você consegue encontrar ótimas bibliotecas que fazem esse trabalho de maneira muito eficiente. É o caso do vee-validate, que dispõe de diretivas para regras de validação convenientes, além de suporte para regras customizadas e traduções para 44 línguas, todas mantidas pela comunidade.
Caso goste de fazer as coisas “by-hand” (e muitas vezes precisamos fazer), a página oficial do Vue oferece um cookbook com ótimos exemplos de resoluções de problemas comuns, incluindo uma receita de validação de formulários.
Outro exemplo é o caso de chamadas HTTP. O Vue não possui uma biblioteca oficial, porém existem ótimas bibliotecas de terceiros para fazer requisições HTTP e tratamento das respostas, como o vue-resource ou o vue-axios (um wrapper da famosa biblioteca axios), ambas são baseadas em Promises com suporte a interceptors e cancelamento de chamadas. A escolha, nesse caso, fica a cargo do usuário, e como escolha pessoal prefiro o axios por ele ser agnóstico (funciona em browsers e no Node.js).
Vale lembrar que, se você precisa fazer algo específico, sempre verifique a lista que comentei no tópico anterior e faça uma pesquisa rápida, há grandes chances de alguém ter previamente resolvido seu problema e tenha disponibilizado uma ferramenta específica para tal (essa lista), reduzindo em muito o trabalho necessário.
Deploy da sua aplicação
Por último, mas não menos importante, vamos falar do deploy da sua aplicação. Durante minha trajetória em front-end, tive várias experiências relacionadas a como fazer um deploy eficiente de uma aplicação, que simplificasse os processos de manutenção e, como em qualquer negócio, preço e escalabilidade sempre sendo fatores fundamentais.
“Era uma manhã de segunda-feira quando ouvi pela primeira vez sobre um serviço chamado Netlify”
Até então, já havia trabalhado com S3, CloudFront, dockerização de apps, e até serviços antigos de hospedagem de sites e computação em nuvem que datam de meados de 2008, mas não estava satisfeito com nenhum deles, e decidi experimentar o Netlify.
O Netlify é um serviço de deployment contínuo para hospedar sistemas que têm sua stackbaseada em tecnologias front-end, que não precisam de banco de dados ou linguagens back-end para funcionar, e executa automaticamente seus comandos de compilação e faz o deploy do resultado sempre que você fizer um pull para o seu repositório Git. Além disso, complexidades como chave SSL, CDN, a hospedagem em si, testes A/B, autenticação OAuth, JWT e até formulários podem ser gerenciados pelo próprio Netlify.
Aplicações front-end são ótimas candidatas para o Netlify. Um projeto baseado na ideia de JamStack, onde você separa o front-end do back-end, com back-end ficando responsável por servir as APIs, são projetos ideais para serem hospedados em serviços desse tipo, com o back-end ficando em outro servidor próprio pra isso.
O Netlify é grátis, possui pacotes pagos para algumas features, mas na versão free você consegue usar 95% das features com um time pequeno. As versões pagas apenas possibilitam expansões do time, maior controle de permissões e algumas outras features mais específicas. Lembre-se apenas de checar com o seu time sobre questões relacionadas a informações sensíveis ao seu projeto.
Conclusões
O Vue é uma poderosa ferramenta para o desenvolvimento ágil de aplicações front-end, e combinado com as bibliotecas existentes na comunidade, torna-se um grande aliado na construção e entrega de projetos nível enterprise.
Por ter trabalhado com as três maiores frameworks do mercado atual (na Wavy, hoje usamos predominantemente Angular), posso dizer que o Vue.js resolve problemas específicos relacionados ao desenvolvimento ágil, curva de aprendizado, e organização em times pequenos, mas não é aconselhável utilizá-lo em projetos maiores onde há um grande número de pessoas envolvidas no front-end, devido à complicações que deixarei para um próximo artigo.
Se você se interessa por hypes como eu, recomendo dar uma olhada mais a fundo no que o Vue tem a oferecer. Se você não curte hypes, fique sempre atento às novas tecnologias pois o Vue veio pra ficar pelos próximos anos e servirá também de inspiração para as próximas frameworks que estão por vir.
Leituras e recursos adicionais
De 0 a 10, o quanto você recomendaria este artigo para um amigo?