PWA + Vue.js + Quasar

10 minutos, é o que você precisa para desenvolver seu primeiro PWA.

Para melhor aproveitamento deste post, recomendo que o leitor possua um breve conhecimento de vue.js, embora não seja obrigatório. Feito esta ressalva, vamos nessa …

Primeiramente, vamos explicar melhor esta sopa de letrinhas que compõe um pequeno pedaço do universo de desenvolvimento web hoje:

PWA = Progressive Web Apps

Progressive Web Apps | Web | Google Developers

Vue.js = Framework Javascript

Vue.js

Quasar = Framework front-end baseado no Vue.js

Quasar Framework

PWA — Progressive Web Apps

Reza a lenda que os PWA matarão boa parte dos apps nativos (será ?), deixando esse hype de lado, admito que fiquei curioso, pois alguns pontos me chamaram a atenção:

• Um único código serve tanto para IOS, Android quanto para o Desktop
• Roda direto do navegador sem necessidade de uma Store de aplicativos
• Pode ser instalado na área de trabalho como qualquer app
• Funciona offline, como qualquer app (menos no IOS)
• Proporciona uma experiência “nativa”

Não vou entrar muito a fundo no assunto PWA, pois não é o foco deste post. Caso ainda tenha dúvidas, do que é um PWA, sugiro que leia com atenção o artigo descrito no começo deste post, e após um melhor entendimento do conceito, volte aqui para continuar a leitura.

Na prática, precisamos acrescentar em nosso projeto, no mínimo dois arquivos, sendo eles:

• Manifest.js
• Service Workers

Voltaremos a falar deles mais tarde…

Vale lembrar aqui novamente, que no caso de dispositivos com IOS, o safari ainda não implementou os service workers, o que neste momento impede que os apps sejam utilizados off-line.

Perder o controle da instalação / monetização dos aplicativos pela App Store, não deve agradar muito a Maça né ?

Vue.js

Angular já teve sua época de ouro (mas ainda tem um Sr. Legado), react atualmente está no topo do hype, e o vue.js está crescendo forte como terceira lib javascript.

Lá atrás, quando comecei a estudar frameworks js, admito que fiquei mais perdido que cego em meio a tiroteio, ohh mundinho complicado e cheio de siglas estranhas!

Pesquisa daqui, pesquisa dali, encontrei estes dois posts que me chamaram a atenção:

Entenda de uma vez por todas o que é React.JS, Angular 2, Aurelia e Vue.JS

Vue.JS com certeza.

Artigos lidos, preconceitos formados, resolvi estudar um pouco de cada (react e vuejs). Talvez para quem seja do back, o react seja mais atrativo, mas tendo prévio conhecimentos de html, css e js, o Vue cai como uma luva. Foi começar a estudar e ter certeza, é esse framework que eu quero trabalhar.

Quasar

OK, legal, vou trabalhar com vuejs, mas e a UI, como fica ? Vou sair fazendo componente por componente na mão ? Bootstrap para vue ? Opa Vuetify parece interessante, até que encontro esse cara:

Quasar Framework — Empowering your websites and apps

Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps, all simultaneously using same codebase, powered with Vue 2.

Se contar ninguém acredita, então show me the code …

Quasar Play App

Conforme podemos ver neste “showcase”, a ferramenta é bem poderosa e completa, entregando muitas features interessantes, de modo prático e pronto para sair desenvolvendo, tudo isto TOTALMENTE integrado com o vuejs.

Quasar Starter Kits

O quasar já vem com templates prontos para darmos inicio ao desenvolvimento, assim sendo, nada de perder tempo configurando webpack, lint, hot-reload, build etc.

Basicamente, possuímos dois templates:

★ default ($ quasar init default <folder_name>)

Este boilerplate serve para desenvolvimento de sites, web apps etc, também incluindo wrappers para Cordova e Electron.

★ pwa ($ quasar init pwa <folder_name>)

Como o nome sugere, este já vem pronto para o desenvolvimento de pwa, baseado no template oficial do vuejs/pwa.

Aqui o webpack já vem configurado para gerar o manifest.js e também os service workers, que a princípio serve para tornar nosso app acessível off-line.

Nosso Projeto — Lean Tools

Trabalho também como analista de gestão da qualidade, sendo responsável, dentre algumas tarefas, pela análise estatística de características críticas de projeto. Esta responsabilidade acabou demandando conhecimento da linguagem R, que terminou comigo aqui escrevendo para vocês =).

Deixando isto para outro post, percebi que muitas pessoas possuem dificuldades quanto a utilização de ferramentas para solução de problemas, como por exemplo as 07 ferramentas da qualidade, além também da dificuldade em realizar certos cálculos mais complexos de ferramentas exigidas pela implementação do Lean Manufacturing.

Tendo em vista este cenário, vou compartilhar com vocês os passos iniciais do desenvolvimento deste pwa, que pode ser acessado aqui:

Lean Tools App

E aqui podemos ver o que significa a experiência “nativa”, onde nosso app será instalado, acessado da area de trabalho do usuário, tanto on-line quanto off-line e até desinstalado como tal.

Etapa 1 — Pré-requisitos

Você vai precisar de:

• Npm
• Node.js
• Quasar-cli

Para instalar o cli do quasar, digite o comando abaixo, e para mais informações, acesse: http://quasar-framework.org/guide/quasar-cli.html

npm install -g quasar-cli

Etapa 2 — Gerando o projeto

Após os pré-requisitos instalados, vamos gerar nosso projeto:

$ quasar init pwa lean-tools

Após gerado, navegar até a pasta criada e:

• edite o nome do app e do autor no package.json
• rode npm install
• então, digite quasar dev (similar ao npm run dev).

$ cd /home/matheus/Documentos/WebDevelopment/teste/lean-tools
# edit package.json
$ npm install
$ quasar dev

Feito isto, a página http://localhost:8081 deve ser automaticamente aberta pelo navegador, e teremos a seguinte tela:

Etapa 3 — Entendo a pasta /src

O quasar vem com a maioria dos componentes que precisamos prontos, salvo raras exceções, temos tudo o que precisamos aqui.

Antes de começarmos a criarmos nossa aplicação, vamos verificar a estrutura da pasta /src, que será onde faremos grande parte do nosso trabalho.

├── src/
│   ├── assets/      # assets dinâmicos (processados pelo webpack)
│   ├── components/  # nossos componentes .vue irão aqui
│   ├── statics/     # assets estáticos (apenas copiados)
│   ├── themes/      # arquivos para configurar tema
│   │   ├── app.ios.styl
│   │   ├── app.mat.styl
│   │   └── app.variables.styl
│   ├── App.vue      # arquivo raiz do projeto
│   ├── index.html   # boilerplate para webpack injetar deps
│   ├── main.js      # arquivo raiz do projeto
│   └── router.js    # lógica do router

Se você já trabalhou com webpack, vai entender facilmente a estrutura dos itens a cima, caso contrário, sugiro entenda pelo menos o conceito do webpack, visto que não é necessário configurar nada (quasar / vue❤).

Etapa 4 — Entendendo o Quasar!

Para manter este post mais clean, não vou postar todo o código aqui, visto que ele pode ser encontrado no meu github:

matheus-rossi/lean-tools

Mas vamos dar uma olhada no componente toolbar, que está em:

/src/components/common/

Toolbar

Template HTML

<template>
  <q-toolbar>
    <q-btn
      flat
      @click="openDrawer()"
    >
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title> Lean Web App Tools
      <div slot="subtitle">Tools to Improve your Lean Thinking</div>
    </q-toolbar-title>
  </q-toolbar>
</template>

Javascript

<script>
import {
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  Events
} from 'quasar'
export default {
  name: 'toolbar',
  components: {
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    Events
  },
  methods: {
    openDrawer () {
      Events.$emit('openDrawer', true)
    }
  }
}
</script>

Importante notar aqui, que cada componente do Quasar, deve ser importado e registrado, para que funcione da maneira correta. Sim, isto deve ser feito em cada componente, pois lá no final resultará em bundle mais otimizado. Caso não seja aficionado por performance, esses componentes também podem ser importados globalmente, eliminando a necessidade de registrar a cada novo componente criado.

methods: o quasar já vem com um eventBus (Events) incluído, assim em aplicações onde o vuex não for necessário, a comunicação entre componentes pode ser feita por aqui. Neste caso, ele emite um evento, que é “escutado” pelo Index.vue e abre/fecha o menu lateral.

Apenas reforçando, se você entende o básico do vue.js, certamente estará familiarizado com este workflow. Caso algo pareça confuso, ou não faça muito sentido para você, seus estudos no vue.js devem ser reforçados.

Etapa 5 — Gerando build para produção

Ok, minha app está pronta para produção, como faço o deploy dela?

Sinceramente, nunca achei que fosse tão fácil, vamos lá …

quasar build

Este comando irá gerar uma pasta /dist, onde está localizado na suá máquina, feito isto, simplesmente abrir o index.html não irá funcionar, visto que seus app’s devem ser “servidos” por um servidor http:

Como assim ? Acredite, é muito mais fácil do que parece, tudo o que você precisa é colocar dentro da pasta /dist, dois arquivos, um package.json e um server.js, que podem ser encontrados neste post :

Quick-n-clean way to deploy Vue + Webpack apps on Heroku

Feito isto, é só fazer o deploy para seu servidor (neste caso, HEROKU) e vua-lá, PWA funcionando…

CONCLUINDO

Se PWA’s irão ou não dominar o mercado, só o tempo dirá. Entendo que algumas app’s não devem se tornar pwa’s tão cedo, visto que quando a integração com o hardware do dispositivo for necessário, ainda é necessário evoluirmos em alguns pontos. Aqui podemos entender melhor do que estou falando:

What Web Can Do Today

Anyway, na maioria dos casos não precisamos de recursos nativos do aparelho, e como neste showcase, com apenas um código, conseguimos rodar nosso app em desktop, mobile (android e IOS).

Hoje, vue.js e quasar apresentam um bom workflow para desenvolvimento de PWA’s, sem falar que ambos frameworks estão em constante desenvolvimento.

Caso queiram contribuir com o projeto, tenham dúvidas ou críticas, ficarei feliz em poder ajudar/responder.

Abraços e até a próxima!