Quasar è uno stack frontend basato su vue js: ne estende le capacità, gli aggiunge componenti, senza minare la velocità e le note performance di vue.

Immaginate di voler creare una piccola applicazione che sia innanzitutto bella, e che possa essere utilizzata da browser, da desktop (come progressive webApp), oppure da mobile.
Qualche anno fa avrei iniziato con l’installare Ionic, Angular, e infine materials o bootstrap per componenti e grafica. Avrei dovuto configurare tutti questi framework per lavorare fra loro, poi avrei potuto iniziare a sviluppare.

Un po' lungo come inizio, no?

Quasar semplifica la vita agli sviluppatori

Il modo più semplice per iniziare a sviluppare applicazioni con Quasar, è scaricare la CLI (command line interface) e digitare il comando

quasar create testApp

La CLI ci offrirà una serie di opzioni da selezionare, dandoci così un ottimo controllo sullo scaffolding di un nuovo progetto.

A parte nome e autore del progetto, possiamo scegliere il preprocessore css fra i seguenti:

Sass with indented syntax (recommended)
Sass with SCSS syntax (recommended)
Stylus

Poi arriviamo ad una feature davvero importante, ovvero la strategia di import dei componenti.

* Auto-import in-use Quasar components & directives
also treeshakes Quasar; minimum bundle size
* Import everything from Quasar
not treeshaking Quasar; biggest bundle size

Selezionando la prima opzione, Quasar analizzerà ogni volta i vostri componenti Vue e importerà tutte le direttive e i componenti che avete usato al loro interno, automaticamente, e usando anche il treeshaking (cancellazione di codice non utilizzato) ridurrà considerevolmente le dimensioni del bundle finale dell’applicazione.

Passiamo poi alla richiesta da parte della CLI di quali strumenti abbiamo bisogno per il nostro progetto, fra:
- ESLint (recommended)
- TypeScript
- Vuex
- Axios
- Vue-i18n
- IE11 support

Supporto per ESLint, per TypeScript, importazione e inclusione automatica di:

  • Vuex (state manager centralizzato per Vue)
  • Axios (ottimo client http)
  • Supporto per applicazioni multilingua con il modulo nativo di Vue-i18n
  • Supporto per applicazioni che girano su IE11 (include alcune librerie polyfill, aggiungendo solo 6k di codice al bundle finale)

Non è fantastico?

Ovviamente la domanda successiva, se abbiamo selezionato ESLint, è il preset che si intende usare.

Infine ci verrà chiesto se usare Yarn o NPM per gestire le dipendenze: un ultimo click di invio e il progetto verrà creato per noi.

Non ci resta che entrare nella cartella del progetto e iniziare a sviluppare!

cd testApp
quasar dev

Usare Quasar e i suoi componenti

Come dicevamo prima, qualche anno fa avrei dovuto scaricare e configurare un bel po di framework e add-ons per avere tutto quello che serve ad una piccola webApp.

Quasar, invece, include tutto!

Le scelte che abbiamo operato alla creazione del progetto ci permettono di avere subito a disposizione un valido client http per fare richieste a ipotetiche API e fonti dati, un Linter che controlla che il nostro codice sia scritto in modo corretto ed elegante, webpack già pronto e configurato per avere un budle finale compatto e minificato, e soprattutto una serie davvero notevole di componenti e direttive per la User Interface pronte all’uso, che seguono le specifiche material.

Tutto questo ovviamente senza dimenticare che tutta la potenza, leggerezza e semplicità di Vue è sempre con noi.

Dopo aver lanciato il comando “quasar dev” l’applicazione viene compilata e lanciata direttamente sul browser di default del sistema, e come per Vue, abbiamo a disposizione un fantastico hot-reload che ci permette di apprezzare i cambiamenti che facciamo sui componenti senza nemmeno ricaricare la pagina del browser.

Il sistema di hot-reload e hot-module replacement funziona ovviamente anche su mobile: si può sviluppare l’applicazione vedendo direttamente i cambiamenti sullo schermo della nostra device mobile.

E ora come faccio a creare una versione Android della mia applicazione?

Questo è l’unico passaggio non automatico di tutto il processo: bisogna installare manualmente cordova.

npm install -g cordova

E oplà, la magia è servita!

Cordova è un componente sviluppato dalla Apache foundation, che permette ad una web app di accedere alle funzionalità avanzate di una piattaforma mobile, come fotocamera, storage interno, chiamate e messaggi ecc.

La cosa più bella è che cordova è multipiattaforma! Tramite la sua interfaccia potremo dare comandi diretti al device senza preoccuparci di sapere su quale piattaforma siamo, o che versione di OS abbiamo a disposizione.
Sarà lo stesso cordova che, durante la compilazione dell’applicazione, “wrapperà” tutto dentro un contenitore leggibile dalla nostra device mobile.

Ma dunque, come facciamo a vedere la nostra piccola applicazione sul nostro cellulare? Basterà avere l’sdk di Android o IOS corrispondente, collegare il cellulare al pc, e lanciare

quasar dev -m cordova -T android

E quando avremo finito lo sviluppo? Come facciamo a creare un pacchetto installabile sulla nostra device, ad esempio, un apk per Android?

quasar build -m cordova -T android

E quasar penserà al resto!

Certo, configurare un SDK di Android o IOS non è un lavoro semplicissimo, ma quasar in questo caso non poteva fare miracoli visto che sono strumenti esterni. E vista tutta la mole di lavoro che ci risparmia, possiamo anche leggere un paio di tutorial su come installare Android Studio, non trovate?

Un’ultima considerazione...
Abbiamo parlato all’inizio di versioni desktop delle applicazioni web-based, comunemente dette PWA – progressive webapps –, esse sono come applicazioni web, ma girano offline.

Quanto sarà difficile creare una versione PWA della nostra applicazione di prova, con quasar?

quasar build -m pwa

Insomma, se amate Vue, non potrete non innamorarvi di quasar e della sua semplicità.

A seguire un'immagine di una mia piccola applicazione di gestione musicale.

Quasar