Quasar framework

WORKSHOP - VUE.JS SP

http://bit.ly/wsquasar10

Heitor Ramon

  • "Programador" de HTML
  • *.IE6{_content:"Hacker";}
  • Sobrevivente da era das Tabelas
  • Ex Publicitário
  • UX
  • Frontend Developer
  • Apaixonado por Hypes

 

O que é o quasar?

Quasar? o que é?

Um quasar (abreviação de quasi-stellar radio source ("fonte de rádio quase estelar") ou quasi-stellar object ("objeto quase estelar") é um objeto astronômico distante e poderosamente energético com um núcleo galáctico ativo, de tamanho maior que o de uma estrela, porém menor do que o mínimo para ser considerado uma galáxia.

O Framework

Quasar, pronunciado (/ˈkweɪ.zɑɹ/)  é um framework baseado em Vue.js de modelo one-code multiple-platforms. Criado por Razvan Stoenescu,  engenheiro líder na Lenovo.

 

https://en.wikipedia.org/wiki/Quasar

protótipos de estrelas

  • Um código, multiplas plataformas;
  • Componentes rápidos e responsivos
  • Sem configuração
  • Suporte a todos os tipos de línguas (RTL e LTL)
  • Material & Apple HIG (Android & iOS)
  • Personalização

ROADMAP v1.0

  • SSR (Quasar Mode)
  • Nuxt Starter Kit
  • TypeScript
  • Suporte para extensões Chorme & Firefox
  • Material & Apple HIG (Android & iOS)
  • Componente Tipster

E

LAVAMOS

NOS!

Parte 1

 

INSTALANDO O BÁSICO

Instalando o CLI

O Quasar possuí um CLI totalmente integrado o eco-sistema do Vue.

 

Este CLI vai te ajudar durante todo o projeto, com auxílio básico de criações de módulos, componentes, páginas e layouts. Como também com a compilação e server local para desenvolvimento.

# Instalar o Vue-CLI Global
$ npm install -g vue-cli

# Node.js >= 8.9.0 é obrigatório.
$ npm install -g quasar-cli

Criando o projeto

Vamos criar nosso projeto inicial.

O CLI já possuí um boilerplate pronto para projetos em Quasar.

 

Nele você vai poder escolher e definir configurações para o seu projeto, como Lint, Plugins e definições de bases.

$ quasar init <folder-name>

Entendendo o CLI

O Quasar-CLI é um ótimo agregador de funções geradoras de códigos, como criar novos componentes, páginas, layouts ou mesmo iniciar o servidor de teste.

 

Com ele você já pode criar e "buildar" sua aplicação para qualquer plataforma.

 

(http://quasar-framework.org/guide/quasar-cli.html)

$ quasar

  Commands
    init          Create a project folder
    dev           Start a dev server for your App
    build         Build your app for production
    clean         Clean all build artifacts
    new           Quickly scaffold page/layout/component/... vue file
    mode          Add/remove Quasar Modes for your App
    info          Display info about your machine and your App
    serve         Create an ad-hoc server on App distributables
    help          Displays this message

IT's Alive... Criando novos arquivos

O CLI nos permite criar novas páginas, layouts, componentes, plugins e stores do VueX.

Parecendo um pouco com o "artisan" do Laravel, ele facilita o desenvolvimento por acelerar a criação de pequenos boilerplates.

$ quasar new -h

    Description
      Quickly scaffold a page/layout/component/store module.

    Usage
      $ quasar new [p|page] <page_file_name>
      $ quasar new [l|layout] <layout_file_name>
      $ quasar new [c|component] <component_file_name>
      $ quasar new plugin <plugin_name>
      $ quasar new [s|store] <store_module_name>

      # Examples:

      # Create src/pages/MyNewPage.vue:
      $ quasar new p MyNewPage

      # Create src/layouts/shop/Checkout.vue
      $ quasar new layout shop/Checkout.vue

    Options
      --help, -h     Displays this message

Servidor de desenvolvimento

O servidor de teste é o nosso primeiro ponto de contato com o aplicativo. Nele podemos definir algumas variáveis de teste e configuração do APP.

$ quasar dev -h

    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|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

      Only for Cordova mode:
      --target, -T     (required) App target
                         [android|ios|blackberry10|browser|osx|ubuntu|webos|windows]
      --emulator, -e   (optional) Emulator name
                         Example: iPhone-7, iPhone-X

Um pouco mais avançado... modos de aplicativo

Caso você queria que seu aplicativo funcione em outros ambientes fora da web, podemos adicionar modos de suporte, como Cordova, Electro ou PWA

$ quasar mode -h

    Description
      Add/Remove support for PWA / Cordova / Electron modes.
    Usage
      $ quasar mode -r|-a pwa|cordova|electron
    Options
      --add, -a     Add support for mode [pwa|cordova|electron]
      --remove, -r  Remove support for mode [pwa|cordova|electron]
      --help, -h     Displays this message

"Buildando" seu aplicativo

Podemos com o CLI "buildar" nosso aplicativo diretamente para várias plataformas e com temas e modos distintos.

$ quasar build -h

    Description
      Builds distributables of your app.
    Usage
      $ quasar build -p <port number>
    Options
      --theme, -t    App theme (default: mat)
      --mode, -m     App mode [spa|pwa|cordova|electron] (default: spa)
      --target, -T   App target
                       - Cordova (default: all installed) [android|ios|browser|osx|ubuntu|windows]
                       - Electron (default: yours) [darwin|win32|linux|mas|all]
      --debug, -d    Build for debugging purposes
      --clean, -c    Clean build artifact first
      --help, -h     Displays this message

      ONLY for Electron mode:
      --arch, -A     App architecture (default: yours)
                       [ia32|x64|armv7l|arm64|all]

Parte 2

 

NOSSO APLICATIVO

http://bit.ly/wsquasarsrc

CRIANDO O APP

Vamos usar o Quasar-CLI para começar o desenvolvimento do nosso aplicativo.

# Iniciando nosso aplicativo
$ quasar init FakeWord

? Project name (internal usage for dev) fakeword
? Project product name (official name) FakeWord
? Project description Um word fake, salvando em LocalStorage
? Author Heitor Ramon Ribeiro <heitor.ramon@gmail.com>
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Cordova id (disregard if not building mobile apps) br.com.fake.word
? Use Vuex? (recommended for complex apps/websites) No
? Use Axios for Ajax calls? No
? Use Vue-i18n? (recommended if you support multiple languages) No
? Support IE11? No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
  Yes, use NPM 
❯ Yes, use Yarn (recommended) 
  No, I will handle that myself

ENTENDENDO O QUASAR.CONF

No Quasar-Framework temos um arquivo de controle global. Este arquivo ele é responsável por gerenciar o que iremos carregar no build. Com ele vamos gerenciar coisas básicas como:

 

  • Componentes
  • Plugins
  • Extras de Temas
  • Animações
  • Ícones
  • Configurações básicas do Cordova / PWA / Electron

 

 

(http://quasar-framework.org/guide/app-quasar.conf.js.html)

Adicionado Modos de desenvolvimento

Utilizando da possibilidade de multiplas plataformas que o Framework nos possibilita, vamos adicionar alguns modos de distribuição no aplicativo.

# Adicionado PWA
$ quasar mode -a pwa

# Adicionado Cordova
$ quasar mode -a cordova

# Adicionando Electron
$ quasar mode -a electron

criando novos layouts e páginas

Vamos iniciar nosso desenvolvimento. 

 

Podemos criar agora nosso layout base e a página utilizando o CLI do Quasar.

 

Para as rotas vamos editar o arquivo de rotas do VUE.

# Criando o layout do editor
$ quasar new layout editor

# Criando a nova página
$ quasar new page editor

Fazendo a página do Editor

Para criarmos nossa página de edição, vamos utilizar o componente QEditor.

 

Porem temos de lembrar que sempre que o componente do Quasar for adicionado ao desenvolvimento temos de adicionar ele ao Quasar.conf.js 

criando COMPONENTES DE LISTAGEM

Ja temos nosso editor, os nossos layouts. Vamos criar nossos primeiros componentes.

 

Teremos um componente para listagem e outro para o item.

# Criando o componente de listagem
$ quasar new component DocList

# Criando o componente de item
$ quasar new component commons/DocItem

EDITANDO O INDEX E MENU

Agora com tudo pronto, vamos fazer nossa tela inicial.
 

Nela vamos trabalhar com o Menu lateral e a Index simples.

Parte 3

 

MULTI DISPOSITIVOS

GERANDO BUILDS DIFERENTES

O poder do CLI do Quasar, é a possibilidade de fazer aplicativos multi-devices. Você pode usar seu código para Mobile, Tablet, Desktop e Web

# Testando aplicativos em outras plataformas

# Android
$ quasar dev --mode cordova -T android | ios

# Ios
$ quasar dev --mode cordova -T ios | android

# Electron
$ quasar dev --mode electron -T android | ios

#PWA
quasar dev --mode pwa -T android | ios
Made with Slides.com