O Quasar é um framework que nos traz a possibilidade de desenvolver um site responsivo, um PWA (aplicativo web progressivo 
), aplicações móveis híbridas(Android, iOS e etc.) através do Cordova e até mesmo aplicações desktop com o Electron.
A grande vantagem de se utilizar o Quasar é que você irá escrever o código uma única vez e, em seguida, escolher que tipo de build você gostaria de gerar. Tudo isso mudando apenas um parâmetro no comando de build.
Outra vantagem do Quasar é que não há a necessidade de adicionar bibliotecas pesadas como Hammerjs, Momentjs ou Bootstrap, tornando seus componentes web muito mais leves e o desenvolvimento da aplicação acelerado.
Mas porquê escolher o Quasar?
Existem alguns pontos deste framework que valem a pena serem ressaltados. Lembrando que, todo framework ou linguagem de programação tem seus prós e contras.
Sempre devemos analisar a nossa necessidade e qual a melhor alternativa para o desenvolvimento. Devemos levantar fatores como curva de aprendizagem, tempo de entrega do projeto, complexidade da aplicação, etc.
Então vamos analisar as vantagens do Quasar Framework:
Todas as Plataformas e um único código
Essa pode ser uma vantagem para o desenvolvedor, pois não terá que aprender dezenas de tecnologias para cada plataforma a ser desenvolvida e para a empresa a diminuição de custo para o desenvolvimento de um produto completo.
Componentes de alta classe, rápidos e sensíveis à web
No Quasar há um componente para quase todas as necessidades que um desenvolvedor venha a ter. Estes componentes são cuidadosamente criados para oferecer a melhor experiência possível, incluindo uma boa capacidade de resposta.
Melhores práticas integradas por padrão
Não há a necessidade de se preocupar com as boas práticas no desenvolvimento web. Por padrão, o framework já cuida da minificação, remoção de cache, tremor de árvores, arranjo de códigos, carregamento preguiçoso (lazy loading), transpilação ES6 e código de instalação. Tudo isso sem a necessidade de nenhuma configuração.
Experiência de desenvolvedor sem paralelo através do Quasar CLI
Por padrão, o Quasar já traz o “hot reload” que nada mais é que, ao salvar qualquer arquivo, o Quasar CLI cuidará de buildar sua aplicação em tempo de execução mostrando o resultado em sua tela, sem a necessidade de recarregar a página.
Baixa curva de aprendizagem
Seguindo a documentação, é possível iniciar o desenvolvimento de uma aplicação em tempo recorde.
Suporte a diversas plataformas
Google Chrome, Firefox, IE11 / Edge, Safari, Opera, iOS, Android, Windows Phone, Blackberry.
Ótima documentação
Apesar de o Quasar ser relativamente novo, há um grande esforço dedicado à sua documentação. Apresenta muitos exemplos, para facilitar a implementação de seus componentes.
Hora de praticar!
No momento que escrevo essa postagem, há poucos tutorias sobre o Quasar na internet e de certa forma não se tem tanta necessidade, pois sua ótima documentação já é tudo o que um desenvolvedor precisa para dar o start inicial. Iremos fazer o passo a passo para a criação de uma aplicação, utilizando o Kit de inicialização presente na documentação.
Neste primeiro post, iremos preparar todo nosso ambiente para podermos trabalhar com o Quasar Framework na sua versão 0.15.4
Preparando o ambiente
Para ter uma boa experiência com o Quasar, é altamente recomendado já conhecer o Vue.js. Então vamos preparar nosso ambiente para iniciar o desenvolvimento.
O primeiro passo é a instalação do Quasar CLI. Para isso, certifique-se de ter instalado em seu ambiente o Node,js com versão igual ou superior a 8 e NPM com versão igual ou superior a 5.
Para a instalação do Quasar CLI, iremos executar os seguintes comandos no nosso terminal favorito:
npm install -g vue-cli npm instalar -g quasar-cli
Após instalado, criamos uma pasta de projeto com a CLI Quasar:
quasar init viladosilicio
Durante a instalação, o CLI irá fazer algumas perguntas como o nome do projeto, nome do produto, descrição do produto. Basta confirmar as primeiras informações pressionando Enter até chegar na pergunta se o projeto irá usar o ESLint (Use ESLint to lint your code?).
Neste momento iremos selecionar a opção y (Yes) para confirmar a instalação e apertar Enter para prosseguir. Posteriormente, ele perguntará qual tipo iremos usar, escolheremos o Standard, pois é o menos “chato” e confirmamos pressionando Enter.
O ESLint nada mais é que um conjunto de regras para escrever o nosso JavaScript seguindo boas práticas.
Após a confirmação de uso do ESLint, o projeto irá perguntar sobre a id do cordova, basta confirmar pressionando Enter. Em seguida, pergunta se iremos usar o Vuex, como este é um post introdutório não utilizaremos ele, então escrevemos n e pressionamos Enter.
Ao solicitar a utilização do Axios para chamadas Ajax, escrevemos y e pressionamos Enter. Iremos usar o Axios para recuperarmos nossas informações de uma API Rest e mostrar em nosso App.
Na solicitação de utilizar o Vue-i18n, escrevemos n e pressionamos Enter. O Vue-i18n serve para internacionalização de nossas aplicações. Não é nosso objetivo no momento também. Ao solicitar o suporte para IE11 escrevemos n e pressionamos Enter. Iremos utilizar navegadores mais modernos, podendo ser o Chrome ou FireFox.
Por fim, ao perguntar qual gerenciador de dependência iremos utilizar, escolheremos o NPM e assim a instalação irá prosseguir.
Quando o Quasar CLI terminar de instalar todas as nossas dependências, iremos entrar na pasta e rodar nossa aplicação num servidor local:
cd viladosilicio
quasar dev
E então nossa aplicação é iniciada,e aberta no navegador :
No próximo post, iremos entender um pouco da estrutura do projeto e entender os componentes do quasar e como usa-los. Espero que tenham gostado, até breve!
“Você tem de agir. E você tem que estar disposto a fracassar…
Se você tem medo de fracassar, não irá muito longe.”
Referências:
