Quasar

Um Universo de Possibilidades

• Father
• HTML "Developer"
• *.IE6{_content:"Hacker";}
• Table time survivor
• Ex Advertising Worker, DJ
• Took a Professional Magic Course
• Entrepreneur
• Author of :
  • Vue.js 3 Cookbook
  • Building Vue.js Applications with GraphQL 

Buy it (amzn.to/2XcB24r | amzn.to/2LlqMUU)

Heitor Ramon

Agenda

Mas que diaxo é Quasar Framework?

Um Framework

Quasar é um Framework baseado em Vue.js, começou como um conjunto de UI componentes que foi evoluindo a um framework completo, de build, gerenciamento, plugins, extensões entre outras coisas.

https://quasar.dev

Multi Plataformas

Você programa um código fonte, e pode produzir no final:

• SPA
• PWA
• BEX (Extensão de Navegador)
• SSR
• APP Hybrido (Cordova, Capacitor)
• Electron

Tem para...

Sim! Tem para Vue 2 e Vue 3 😅

Quasar V1

Baseado em Vue.js 2.x, Webpack 4

Para usar ele você deve usar

Quasar V2 (LTE)

Baseado em Vue.js 3.x, Webpack 5

Para usar ele você deve usar

SPA

E no começo...

Todos os projetos do Quasar inciam como um SPA, nele você ja tem acesso a toda a base para começar a desenvolver sua applicação.

Mas tem um porem, você precisa ficar ligado no arquivo quasar.conf.js, pois lá você vai controlar sua aplicação como um todo, ex: Plugins, Diretivas, Estilos, Ícone e etc...

UI Components

Material Design

Todos os componentes do Quasar são baseados no Material Design, assim sua implementação a um escopo global fica bem mais tranquila.

Contando com mais de 100 componentes, sua extensa biblioteca ajuda no desenvolvimento do dia-a-dia.

Você ainda pode contar com coisas como:

• RTL
• Language Packs
• Auto Tree-Shake
• Icon Packs
• Font Packs

E muito mais...

PWA

Vamos funcionar offline?

Para você criar sua aplicação PWA, o Quasar te pede que você adicione o módulo PWA e após isto você pode configurar no quasar.conf.js os dados que serão utilizados para gerar o manifest.json.

E como adiciono o modo PWA?

Simples, basta executar:

BEX

É hoje que eu fico rico com minha extensão de...

Criar uma extensão para os navegadores hoje é algo que pode tomar um bom tempo definir só o ambiente de desenvolvimento. O Quasar-CLI ja deixou isso tudo pronto para você a facilita o deploy da mesma.

E como adiciono o modo BEX?

Simples, basta executar:

SSR

Será que se eu rodar direto do server fica mais rápido?

Para o SSR no Vue, temos o Nuxt que é bem famoso, porem você só recebe o framework de SSR. O Quasar tem a sua solução de SSR usando o Vue e o Express para entregar o SSR unido a sua biblioteca de componentes.

E como adiciono o modo SSR?

Simples, basta executar:

APP Hibrido

E se eu quiser lançar tudo isso para mobile também?

Meu querido, aqui você pode tudo, o Quasar-CLI te permite adicionar o módulo Cordova ou Capacitor. Assim você pode trabalhar com aplicativos hibridos, ou web-view apps.

E como adiciono o modo App Hibrido?

Simples, basta executar:

Electron

Ta mas eu ja lancei aplicativo para tudo, e queria lançar para desktop.

O Electron é a sua solução, e você não tem de ficar se preocupando com configurações, build entre outras coisas. Assim você só precisa cuidar de fazer sua aplicação.

E como adiciono o modo Electron?

Simples, basta executar:

Quasar Ext.

Ta mas eu queria um componente que eu não achei...

Uma coisa legal do Quasar, é a possibilidade de utilizar as Quasar Extensions. São como extensões do Quasar, tipo plugins, diretivas entre outras coisas. La você vai encontrar vários componentes feitos pela comunidade para complementar o framework.

E como eu adiciono uma extensão?

Primeiro você precisa do nome e depois, executa:

Quasar Utils

Adeus libs terceiras para fazer o que todo mundo faz na mão.

O Quasar Framework dispõe de um conjunto de utils, que podem te ajudar no desenvolvimento e ao mesmo tempo diminuir o tamanho do seu bundle final. Acabando com aquelas micro dependencias.

Nessas utils, você vai encontrar coisas como:

• Data Manipulation
• UUID
• DOM Manipulation
• Morphs

Entre outras coisas...

E Mais uma coisa...

Icon Genie CLI

Todos os seus problemas acabaram!

O Icon Genie CLI é um CLI que automatiza todo o processo de criação de ícone para todas as plataformas que o Quasar fornece, e facilita mto a vida do desenvolvedor.

Como eu faço para baixar essa magia negra ai?

Simples, basta executar:

OBRIGADO!

https://heitor.co