O Quasar Framework é uma ferramenta baseada em Vue.js que permite o desenvolvimento rápido de aplicações web responsivas, incluindo Single Page Applications, Progressive Web Apps e aplicativos móveis. Oferece uma única base de código, suporte a temas, uma ampla gama de componentes e recursos de segurança, visando facilitar a criação e manutenção de projetos. O framework também conta com uma comunidade ativa e um CLI para acelerar a configuração e o desenvolvimento de projetos.

3. Quasar
FrameworkFRONT-END DE ALTO DESEMPENHO

4. Nome: Patrick Monteiro
Idade: 26 anos
● Engenheiro da Computação
● Especialista em desenvolvimento Web
● Certificado UX-PM Level 1
● Organizador da comunidade Vue Norte
● Desenvolvedor / Arquiteto Front-end na
W3 Automação e Sistemas(W3AS)
● Autor no Vila do Silício e Imasters

5. A Evolução da
Web

6. ● Criada pelo britânico Tim Berners-Lee, com 3 ferramentas importantes:
○ um protocolo de transmissão de dados - HTTP;
○ um sistema de endereçamento próprio - URL;
○ uma linguagem de marcação, para transmitir documentos formatados
através da rede - HTML;
A World Wide Web

7. ● 1.0 - Basicamente uma plataforma para Leitura(HTML);
A Evolução da Web

8. ● 2.0 - Tanto Leitura quanto escrita eram características.
A Evolução da Web

9. ● 3.0 - Web Semântica
A Evolução da Web

10. Fonte: http://www.evolutionoftheweb.com/
O Crescimento da Web

11. Fonte: http://www.evolutionoftheweb.com/
O Crescimento da Web

12. Framework x Biblioteca

13. Single Page
Applications

14. ● É uma abordagem moderna de construção de aplicações Web;
● A aplicação interage com o servidor por requisições AJAX trocando dados no
formato JSON ou XML;
Single Page Applications

15. ● Não podemos levar ao pé da letra!
Single Page Applications

16. Single Page Applications

17. Single Page Applications

18. Single Page Applications

19. Single Page Applications
Algumas das vantagens no uso de Frameworks:
● Eficiência - projetos que costumavam levar meses e centenas de linhas de
código agora podem ser lançados muitos mais rápido com padrões e funções
bem estruturadas
● Custo - a maior parte dos frameworks são de código aberto e gratuitos
● Comunidades - ajudam na identificação de bugs muito rapidamente

20. Quasar
Framework

21. Quasar Framework
● O lema do quasar é:
“ escrever código uma vez e simultaneamente implantá-lo. ”
● Uma única base de código, ajudando você a desenvolver uma aplicação em
tempo recorde, usando um CLI de última geração.

22. Quasar Framework
O Quasar é um Framework baseado em Vue.js de código aberto licenciado pelo
MIT.
Ele permite que um desenvolvedor Web crie rapidamente sites/aplicativos
responsivos em vários formatos:
● Single Page Application(SPA)
● Server Side Render Apps(SSR)
● Progressive Web Apps(PWA)
● Hybrid Mobile Apps (Mobile)
● Electron Apps (Desktop)

23. Quasar Framework
Outra vantagem do Quasar é que você não precisará de bibliotecas pesadas
adicionais como Hammerjs, Momentjs ou Bootstrap.
Todas essas necessidades são cobertas pelo quasar e todas com uma pegada
pequena.

24. Quasar Framework
O Quasar está olhando para o futuro e define seus próprios padrões elevados e
modernos.
E para isso é necessário algumas vezes percorrer caminhos diferentes da maioria.
“O que queremos alcançar com a Quasar é elevar o nível do desenvolvimento web
como um todo. Faça isso ir em frente, evolua. Mude as mentes. Indique quando há
uma alternativa melhor.”

25. Características

26. Características
Todas as plataformas em um só lugar
Uma fonte autoritária de código para todas as plataformas, resultando
simultaneamente em :
● Sites responsivos(SPA, SSR)
● Progressive Web Apps (PWAs)
● Aplicativos móveis híbridos(através do cordova: Android e iOS)
● Aplicativos Desktop Multiplataforma

27. Características
Os maiores conjuntos
de componentes rápidos
e responsivos da Web.
Praticamente 1 componente para
cada necessidade da web.

28. Características
Tema e compatibilidade
O quasar possui suporte ao tema:
● Material Design 2.0
Suporte a diversos browsers do mercado:
● Google Chrome
● Firefox
● IE11/Edge
● Safari
● Android
● Windows Phone
● Blackberry
● Opera
● iOS

29. Características
Pacotes de Idiomas Quasar
O Quasar vem equipado com mais de 40 pacotes de idiomas prontos para uso.
Além disso, se seu pacote de idiomas estiver ausente, levará apenas 5 minutos
para adicioná-lo.

30. Características
Migre progressivamente seu projeto existente
A Quasar oferece uma versão UMD (Unified Module Definition), o que significa que
os desenvolvedores podem adicionar uma tag CSS e JS HTML em seu projeto
existente e eles estão prontos para usá-la. Nenhuma etapa de compilação é
necessária.

31. Características
Teste automatizado e auditoria
O Quasar permite adicionar testes unitários e de ponta a ponta através de sua
extensão de testes. Assim como um conjunto cada vez maior de ferramentas de
qualidade e segurança de produtos.

32. Características
Segurança
O time é paranóico com a segurança dos aplicativos do Quasar. Então estão
sempre atentos para informar sobre quaisquer ameaças de segurança.

33. Características
Ótima documentação
A documentação do Quasar teve um esforço especial para garantir que não haja
nenhum tipo de confusão ou dúvida do desenvolvedor.

34. Características
Comunidade sempre crescente
Se o desenvolvedor encontrar um problema que não consegue resolver, pode
visitar o fórum do Quasar ou o servidor de bate papo Discord.
A comunidade está lá para ajudá-lo.

35. Quasar CLI

36. Quasar CLI
O Quasar CLI permite que você crie novos projetos em pouco tempo, gerando um
aplicativo base, preenchido com tudo o que você precisa para começar a trabalhar
em seu aplicativo.
O trabalho pesado é feito por ele, então você não precisa se preocupar com
tarefas redundantes.

37. Quasar CLI
O Quasar Cli é o orgulho do Quasar Framework.
Você pode construir facilmente:
● SPA (Single Page Application/Website),
● SSR (Server-side Rendered App/Website),
● PWA (Progressive Web App),
● Mobile App (through Cordova),
● Electron App

38. Quasar CLI
O que vem incluído no Quasar CLI ? (quasar dev)
● Babel, então você pode escrever código ES6
● Webpack + vue-loader
● Estado preservado em hot-reload
● Estado preservado em erro de compilação
● Lint-on-save com ESLint
● Possibilita desenvolver diretamente em um emulador de dispositivo ou um
telefone real conectado à sua máquina
● Desenvolver diretamente numa janela Electron com as ferramentas de
desenvolvedor incluídas

39. Quasar CLI
E desenvolvendo para produção (quasar build)
● Javascript minificado com o UglifyJS
● HTML reduzido com o html-minifier
● CSS em todos os componentes extraídos (e prefixados automaticamente) em
um único arquivo e minimizado com o cssnano
● Todos os ativos estáticos são compilados com hashes de versão para um
eficiente armazenamento em cache de longo prazo, e um índice de
produção.html é gerado automaticamente com URLs adequadas para esses
ativos gerados
● muitos mais...

40. Quasar CLI
Para instalar o Quasar CLI precisamos do Node >= 8 e npm >=5.
E no seu terminal favorito, rodar o comando:
npm install -g @quasar/cli

41. Iniciando um
projeto com
Quasar CLI

42. Criando um projeto
Para criarmos uma pasta de projeto com Quasar CLI basta utilizar o comando :
quasar create <nome_da_pasta>
Note que você não precisa de projetos separados para criar todas as opções
descritas inicialmente(PWA, SPA, SSR, Apps Mobile, etc).
Após a criação do projeto, acessamos nossa pasta e rodamos o seguinte
comando para iniciar nosso ambiente de desenvolvimento:
cd <nome_da_pasta>
quasar dev

43. Estrutura de uma
aplicação Quasar

44. Estrutura
Se você é um iniciante, tudo o que você precisa se
preocupar é com:
➔ /quasar.conf.js Arquivo de configuração App Quasar
➔ /src/router Arquivos de rotas do App
➔ /src/layouts Arquivos de layouts do App
➔ /src/pages Páginas da aplicação
➔ /src/components Componentes reutilizáveis

45. Configurações
no quasar.conf.js

46. quasar.conf.js
O que é possível configurar através do /quasar.conf.js ?
● Componentes, diretivas e plugins do Quasar que você usará no seu
site/aplicativo
● Pacotes de idiomas padrão do Quasar I18n
● Pacote de ícones que você deseja usar
● Ícone padrão definido para componentes Quasar
● Porta do servidor de desenvolvimento, modo HTTPS, hostname, etc..
● Animações CSS se desejar usar
● Plugins de aplicativos
● Opções do manifesto do PWA e Workbox
● Empacotador do Electron
● Suporte ao IE11+
● Estender o objeto de configuração do webpack

47. quasar.conf.js
O quasar exporta uma função que usa
um ctx parâmetro(context) e retorna um
Object. Isso permite que você mude
dinamicamente seu website/aplicativo e
suas configurações, com base nesse
contexto.

48. quasar.conf.js
Exemplo de utilização do ctx:

49. Comandos do
Quasar CLI

50. Comandos CLI
quasar
➔ create
➔ dev
➔ build
➔ clean
➔ new
➔ mode
➔ info
➔ serve
➔ help
Cria o projeto inicial
Inicia um servidor de desenvolvimento para seu App
Gera uma build do seu aplicativo para produção
Limpa todas as builds e artefatos
Nova estrutura de uma page / layout / component/…
Adiciona/Remove os “modos” do quasar no seu App
Exibe as informações sobre sua máquina e seu App
Cria um servidor pronto para simular a build de produção
Exibe ajuda de comandos do quasar

51. Vamos ver na prática!

52. Marcador

53. Novidades no
Quasar

54. Novidades
Quasar Proton
um novo olhar sobre a criação de aplicativos multiplataforma.
A Proton traz um modo para construir o Quasar Apps, que cria binários rápidos e
minúsculos para todas as principais plataformas de desktop.
É uma alternativa ao Electron, com ênfase em desempenho e segurança.
Utiliza a linguagem RUST como base, mas será expansível para outras.

55. 5 Razões para
considerar o
Proton

56. Novidades
● O TAMANHO DO PACOTE de um aplicativo Proton é inferior a 3 MB - cerca de 140
MB menor do que o obtido com o Electron.
● PEGADA DE MEMÓRIA é menos da metade do tamanho de um aplicativo Electron
criado a partir da mesma base de código.
● SEGURANÇA é a maior prioridade da Proton e levamos isso tão a sério que inovamos
para manter os hackers fora de seus aplicativos.
● CONFIABILIDADE da base de código subjacente é a razão pela qual as bibliotecas
críticas foram bifurcadas e serão perpetuamente mantidas.
● O licenciamento de software livre é lamentavelmente impossível com os
consumidores de Chromium, como a Electron.

57. Novidades

58. Novidades
Para mais informações:
https://github.com/quasarframework/proton

59. Patrick Monteiro
Linkedin:
https://www.linkedin.com/in/engpatrickmonteiro/
Twitter:
https://twitter.com/monteiropatrick
Email:
eng.patrickmonteiro@gmail.com