O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Quasar Framework - Uma visão Geral

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Introdução Vue JS
Introdução Vue JS
Carregando em…3
×

Confira estes a seguir

1 de 20 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Quasar Framework - Uma visão Geral (20)

Anúncio

Mais recentes (20)

Anúncio

Quasar Framework - Uma visão Geral

  1. 1. Quasar Framework
  2. 2. Quem sou Patrick Monteiro 27 anos ● Engenheiro da Computação ● Especialista em desenvolvimento Web ● Desenvolvedor Front-end na Kovi ● Organizador da comunidade Vue.js Norte
  3. 3. O que é o Quasar Framework?
  4. 4. Quasar Framework Single Page Applications(SPA) Serve Side Render Apps(SSR) Progressive Web Apps(PWA) Hybrid Mobile Apps(Android/iOS) Electron Apps(Windows, Linux, Mac)
  5. 5. Quasar Framework
  6. 6. Principais Características
  7. 7. Principais Características ● Todas as plataformas de uma só vez ● Os maiores conjuntos de componentes da web, rápidos e responsivos. ● Melhores práticas recomendadas integradas por padrão ● Migração progressiva de seu projeto existente ● Experiência única através do Quasar CLI ● Incrível comunidade em constante crescimento ● É facilmente personalizável (CSS) e extensível (JS) ● Pacote de idiomas ● Ótima documentação
  8. 8. Principais Características
  9. 9. Principais Características ● CLI -um desenvolvedor vasto e poderoso e um ambiente de construção para desenvolvimento e distribuição de aplicativos entre dispositivos. ● UI - é o que chamamos de enorme biblioteca de componentes de alta qualidade no Quasar.
  10. 10. Principais Características ● CLI global - (@quasar/cli) realiza tarefas como criar projetos e fornecer distribuidores de aplicativos localmente com um servidor da Web ad-hoc. ● App CLI - realiza a maioria das tarefas necessárias em um projeto de aplicativo Quasar, como oferecer o ambiente do servidor dev (para HMR e muito mais!), Adicionando inicialização ou componente modelos de arquivo para o seu projeto ou descrição de APIs para componentes e, claro, a parte mais importante, desenvolvendo seu projeto para os vários ambientes que o Quasar suporta (por exemplo, Web, PWA, Web + SSR, PWA + SSR, Cordova, Electron etc.) .
  11. 11. Principais Características Existem 3 formas de usar o Quasar: ● UMD/Standalone(incorporado em um projeto existente através de CDN, integração progressiva) ● Desenvolvimento com Quasar CLI(a experiência premuim) ● Plugin Vue CLI 3
  12. 12. Quasar CLI
  13. 13. 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.
  14. 14. 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 ELint ● 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
  15. 15. Quasar CLI E para produção ? (quasar build) ● Javascript minificado com UglifyJS ● HTML compactado com html-minifier ● Css compactado e extraídos de todos os componentes em um único arquivo com cssnano ● Tratamento de cash eficiente
  16. 16. quasar.conf.js
  17. 17. quasar.conf.js ● Componentes, diretrizes e plug-ins Quasar que você usará em seu site / aplicativo ● Configuração do pacote de Idiomas do seu site/app ● Biblioteca de ícones que você deseja usar ● Porta do servidor de desenvolvimento, modo HTTPS ● Animações CSS ● Lista de arquivos de inicialização (src/boots) ● Opções do manifesto do PWA ● Suporte para IE11 ● Estender configurações para Webpack
  18. 18. Quasar UI
  19. 19. Quasar UI

Notas do Editor

  • O Quasar é uma estrutura baseada em Vue.js de código aberto e licenciada pelo MIT, que permite que você desenvolvedor web crie rapidamente sites/aplicativos para diversas plataformas:
    Com o mesmo código, e pouquíssima configuração é possível ter:
    Single Page Application(SPA)
    Server Side Render Apps(SSR)
    Progressive Web Apps(PWA)
    Hybrid Mobile Apps (Mobile)
    Electron Apps (Desktop)

×