Quasar Framework - Front end de alto desempenho
- 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
- 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
- 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
- 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
- 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:
- 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
- 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