Apresentação da palestra sobre o Quasar Framework, no evento JSDay realizado em Feira de Santana/BA, em 11 de agosto de 2018

1. Quasar Framework,
o Ionic do VueJS!

2. Rodrigo Alves
▪ Tutor web, NextU –
NativApps
▪ Front-End UI/UX
developer – Beeders
▪ Freelancer Full Stack JS

5. Why Vue?!
• Angular já teve sua época
de ouro (mas ainda tem
um Sr. Legado), React
atualmente está no topo
do hype, e o vue.js está
crescendo forte como
terceiro principal lib
javascript.
• Muito simples e produtivo
• Alta performace

6. OK, legal, vou trabalhar com vuejs, mas e a
UI, como fica?
Vou sair fazendo componente por
componente na mão?
Bootstrap para vue ?
Opa Vuetify parece interessante, até que
encontro esse cara:

8. Getting Started - CDN

9. Starter Kit (Recommended)
$ quasar init <folder_name>

10. Vue CLI 3 plugin
#Make sure you have vue-cli 3.x.x:
$ vue –version
#If you don’t have a project created with vue-cli 3.x yet:
$ vue create my-app
#Navigate to the newly created project folder and add the cli plugin.
$ cd my-app
$ vue add quasar

11. Ei véi! Isso tá com cara de Ionic!

14. Adicionando com Ionic
$ ionic generate component foo
$ ionic generate page Login
$ ionic generate page Detail --no-module
$ ionic generate page About --constants

15. Adicionando com Quasar
$ quasar new layout User
app:new Generated layout: src/layouts/User.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
$ quasar new page Profile Posts
app:new Generated page: src/pages/Profile.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
app:new Generated page: src/pages/Posts.vue +1ms
app:new Make sure to reference it in src/router/routes.js +0ms

16. Bora codar com Quasar
$ quasar dev
Description:
Starts the app in
development mode (hot-
code reloading, error
reporting, etc)
Usage:
$ quasar dev -p <port number>
Options:
--theme, -t App theme (default: mat)
--mode, -m App mode
[spa|ssr|pwa|cordova|electron] (default:
spa)
--port, -p A port number on which to
start the application
--hostname, -H A hostname to use for
serving the application
--help, -h Displays this message

17. # Developing a SPA
$ quasar dev
# ...or
$ quasar dev -m spa
# Developing for SSR
$ quasar dev -m ssr
# Developing a PWA
$ quasar dev -m pwa
# Developing a Mobile App (through Cordova)
$ quasar dev -m cordova -T [android|ios]
# Developing an Electron App
$ quasar dev -m electron
# build for production
$ quasar build
# build for production with specific theme
$ quasar build -t mat
$ quasar build -t ios
$ quasar build -m pwa -t mat
Theming...
# Material Design
$ quasar dev -t mat
# iOS theme
$ quasar dev -t ios

18. I’ve got the power!
• beneficiar de uma ótima experiência, fornecida pelo Quasar
CLI
• compartilham a mesma base de código para um leque de
plataformas
• permite escrever código ES6
• obter um código otimizado, minificado, da melhor maneira
possível
• permite escrever SFC (Componente em Arquivo Único - para
Vue)

19. And Show Me The Code!
Shut up!

20. Estrutura do
projeto

26. That’s all, folks!
Site oficial:
https://quasar-framework.org
Meu site pessoal:
http://rodrigoalves.hol.es