Quasar Framework - Front end de alto desempenho

Palestra apresentada no evento Data Tech Day em Belém do Pará. Evento promovido pela comunidade SQL Norte.

1. Quasar Framework FRONT-END DE ALTO DESEMPENHO

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

3. A Evolução da Web

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

5. 1.0 - Basicamente uma plataforma para Leitura(HTML); A Evolução da Web

6. 2.0 - Tanto Leitura quanto escrita eram características. A Evolução da Web

7. 3.0 - Web Semântica A Evolução da Web

8. Fonte: http://www.evolutionoftheweb.com/ O Crescimento da Web

9. Fonte: http://www.evolutionoftheweb.com/ O Crescimento da Web

10. Framework x Biblioteca

11. Single Page Applications

12. É 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

13. Não podemos levar ao pé da letra! Single Page Applications

14. Single Page Applications

15. Single Page Applications

16. Single Page Applications

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

18. Quasar Framework

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

20. 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)

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

22. 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.”

23. Características

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

25. Características Os maiores conjuntos de componentes rápidos e responsivos da Web. Praticamente 1 componente para cada necessidade da web.

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

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

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

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

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

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

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

33. Quasar CLI

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

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

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

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

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

39. Iniciando um projeto com Quasar CLI

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

41. Estrutura de uma aplicação Quasar

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

43. Configurações no quasar.conf.js

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

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

46. quasar.conf.js Exemplo de utilização do ctx :

47. Comandos do Quasar CLI

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

49. Vamos ver na prática!

50. Marcador

51. Novidades no Quasar

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

53. 5 Razões para considerar o Proton

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

55. Novidades

56. Novidades Para mais informações: https://github.com/quasarframework/proton

57. Patrick Monteiro Linkedin : https://www.linkedin.com/in/engpatrickmonteiro/ Twitter : https://twitter.com/monteiropatrick Email : [email protected]