Um framework, todas as plataformas! (quasar-framework)
Falaaaaaaaaaaa galera, blz?
Estamos aqui com segundo post dessa série em um assunto polêmico, com certa parcela de clickbait, mas garanto que se você ler até o final vai acrescentar muito no seu desenvolvimento de aplicações frontend.
Hoje vamos falar de um camarada que vem ajudando muito os processos aqui da Levante Lab e de muitas outras empresas que desenvolvem tecnologia para o mercado. O nome dessa ferramenta é QUASAR FRAMEWORK, e, como podem ver, estamos em uma série de postagens que abordam VUEJS.
O que é Quasar Framework?
Quasar, aqui para os mais íntimos, é um conjunto de funcionalidades, componentes, plugins e helpers no qual sua base é construída com Vuejs.
O que ele faz?
Facilitação do build para diferentes plataformas, sendo elas:
Computador, Celular, Televisão(sim isso é possível), Tablet, entre outros.
Componentes
Muitos componentes e plugins fáceis de usar e bem documentados que vão agilizar muito o seu processo de criação.
Eles vêm com visual baseado no Material Design. Eu, particularmente como desenvolvedor, adoro isso, pois não sou muito bom em deixar tudo estilizado e harmonioso. Logo, usando Quasar, basta utilizar dos seus componentes que tudo fica mais bonito de ver (lembrando que seus componentes são altamente personalizáveis).
Sistema de redes e auxiliares css
Em seu sistema de grid ele é bem completo, tem uma sintaxe parecida com do Bootstrap. Isso foi muito bom porque ajuda uma população muito grande de desenvolvedores (que já conhece esse grande framework) a trabalhar muito bem com ele. Não deixando seu costume de mexer com os bons e velhos (col-md-X col-sm-X col-xs-X col-lg-X col-X).
Ele traz consigo também toda implementação de Flexbox através de helpers. Isso adianta muito nosso desenvolvimento com o alinhamento de nossos componentes.
Muito componentes no qual os UI/UX solicitam para equipe de desenvolvimento são supridos tranquilamente sem uma linha de CSS.
Para te auxiliar no processo de CSS e alinhamento, ele vem com uma gama de CSS Helpers, pra facilitar e te dar produtividade no desenvolvimento dos seus projetos.
Plugins
O Quasar é um framework muito robusto. Seus desenvolvedores fizeram uma estrutura muito completa e abstraída, aonde, além dos próprios plugins que a plataforma nos traz, temos também capacidade de desenvolver os mesmos em cima da sua estrutura.
Irei citar aqui alguns plugins disponíveis na data em que publiquei essa postagem:
Addressbar Color:
Mudar a cor do navegador em cima do endereço no mobile através do Javascript.
Com isso você pode, por exemplo, mudar a cor do navegador dependendo da página que usuário faz, ou botar verde quando for sucesso, e vermelho quando for uma mensagem de erro. Enfim, infinitas possibilidades.
Tela completa do aplicativo
Deixar a plataforma, seja ela de celular ou desktop, full-screen (ou seja, preenchendo a tela inteira).
Notificar
Função para notificações podendo ser chamada através do layout ou mesmo em um método JavaScript.
Muito bom para emitir notificações do sistema de forma fácil e elegante, mantendo os padrões das ferramentas mais modernas que estão disponíveis no mercado.
O mais legal de tudo isso é que além dos plugins que já vêm no Quasar, você tem vários outros disponíveis por outros desenvolvedores que utilizam a plataforma. Isso cria um leque gigante de possibilidades para suas aplicações levando-as realmente para outro nível.
Desenvolvimento e build
Essa foi a parte que realmente me chamou muita atenção no Quasar. No dia-a-dia oferecendo ferramentas para o mercado, temos sempre o desafio de criar coisas diferentes para propósitos diferentes, certo? Agora respondendo o clickbait da postagem, sabia que com quasar você consegue criar:
SPA’s (Single Page Applications)
PWA (Progressive Web Pages)
SSR (Server-Side Rendering, aplicações renderizadas no lado do servidor)
APP (Android, IOS,… Com cordova ou capacitor (10 Passos andados já com quasar, iremos chegar lá.))
BEX (Extenções para o browser)
Desktop (Windows, Mac, Linux através do Electron(Como nos APPs 10 passos a frente, vamos ver logo abaixo.))
Tá mano, para de me enrolar quero instalar essa bodega!
Calma, jovem! É mais fácil do que você imagina.
Primeiro, trate de ter o Nodejs instalado na sua máquina. Você pode pegar o link do download clicando aqui!
Agora vá até seu terminal e digite:
$ yarn global add @quasar/cli
Ou se você utilizar NPM (Meu caso)
$npm install -g @quasar/cli
Pronto, você tem o quasar CLI instalado no seu computador, agora basta digitar:
$ quasar create nome_do_projeto
Vai começar a instalação, você preenche suas preferências, ele vai perguntar o nome do projeto, descrição e quais ferramentas você deseja utilizar. Fique tranquilo, caso você esqueça de selecionar alguma ferramenta, facilmente você consegue colocar ou retirar durante o processo de desenvolvimento.
Para testar o framework em diferentes plataformas você consegue com os seguintes comandos:
Para SPA's
Desenvolvimento
$ quasar dev
Build para produção$ quasar build
Para SSR
Desenvolvimento
$ quasar dev -m ssr
Build para produção$ quasar build -m ssr
Para APP’s
Desenvolvimento$ quasar dev -m capacitor -T [ios/android]
(Com isso ele irá aparecer em seu celular, caso vc esteja conectado com ele através de um cabo USB. Mais informações na documentação)
Build para Produção$ quasar dev -m capacitor -T [ios/android]
Cara, acho que para essa postagem não ficar maçante, vou me despedindo por aqui. Espero ter plantado a semente da curiosidade em vocês. Tem muito mais conteúdo na documentação do framework que é excepcional, muito bem documentada e elegante para nenhum desenvolvedor botar defeito.
Vou deixar aqui alguns recados: essa postagem é a segunda postagem de 8 sobre Vuejs. Por enquanto, estou pincelando o que iremos falar. Na próxima postagem iremos pôr a mão no código com Quasar. Você também pode assistir o vídeo que fiz para nosso canal no Youtube.
Vlw galera! Até a próxima, beijo e cheiro no coração. Se ainda estivermos em pandemia enquanto você tiver lendo, fique em casa o máximo que puder.
