Débuter avec Quasar Framework (1/2)
Simple, performant et sécurisé
Très intéressé par Vue.js, je suis son créateur Evan You sur Twitter (@youyuxi) depuis un moment déjà. Il y a quelques semaines, je l’ai vu poser la question suivante dans une discussion Twitter : “Have you tried @QuasarFramework ?”.
Intrigué, je me rends sur https://quasar.dev et sans bien m’en apercevoir, j’ai découvert un nouveau framework qui pourrait bien se retrouver au centre de mes prochains projets pro comme perso.
Et par nouveau framework, je ne parle pas d’un concurrent direct de Vue.js, React ou Angular, mais plutôt d’un environnement de développement intégrant parfaitement différents outils éprouvés, dans le but de produire avec la même base de code : un site web, une progressive web app (PWA), une application mobile iOS / Android et une application desktop Windows / Mac / Linux.
Et ce, avec les 3 mots d’ordre : simplicité, performance, sécurité.
C’est une promesse très ambitieuse qui est adressée, par l’équipe derrière Quasar, avec intelligence et pragmatisme.
Sans pouvoir aborder tous les aspects de ce framework car ils sont nombreux, cet article vous permettra d’en connaître les principaux atouts et, je l’espère, vous donnera envie de l’essayer.
Historique et popularité
Créé par Razvan Stoenescu, Quasar est un framework open source qui est actuellement en v1.12.
La version 1.0 a été publiée en beta en février 2019 et la version 1.0 finale le 3 juillet 2019.
Avec bientôt 15k stars sur Github et 28k téléchargements hebdomadaires (source npmjs), il bénéficie de mises à jour très régulières sur ses différents composants :
- @quasar/app : le framework
- @quasar/cli : la CLI globale incluant toutes les commandes de dev et de build
- @quasar/extras : les fonts, icônes et animations
- Icon Genie cli : une CLI permettant de gérer les icônes et splashscreens pour les applications mobile et tablette.
L’équipe derrière Quasar est composée d’une quinzaine de personnes : développeurs, designer, media manager et community staff entre autres. Le projet étant open source, il ne tient qu’à vous d’y contribuer ou de le sponsoriser.
Le projet est soutenu par des sociétés et organisations telles que DigitalOcean.
Une promesse ambitieuse
La promesse de Quasar est très ambitieuse : “Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time”.
Pour appuyer cela, une vidéo présente le développement d’une simple application de liste de tâches réalisée en 30 mins.
Elle s’exécute dans une page web, dans une application mobile iOS / Android et dans une application desktop Mac et Windows.
Pour obtenir une telle rapidité dans le flux de développement, Quasar assemble des technologies éprouvées :
- Le framework Vue.js : c’est la base principale de Quasar, tous les composants sont des composants Vue.
- Webpack : pour créer les bundles des sources
- Electron : pour la génération d’applications natives Mac / Windows / Linux
- Capacitor ou Cordova : pour la génération d’applications natives iOS et Android
A l’aide de la CLI, il est très simple d’initialiser un projet, spécifier si l’on veut qu’il soit buildé également en application native mobile ou desktop et de lancer le serveur de développement pour commencer à construire son projet.
Pour en savoir plus sur les raisons de la création de Quasar, n’hésitez pas à consulter la page “Why Quasar?” sur le site du framework.
Un onboarding redoutable
Le démarrage avec Quasar est simple et rapide grâce à la CLI.
Concrètement, votre environnement de dev est prêt en seulement trois commandes.
Voici les différentes étapes permettant d’initialiser une application et de la déployer sur le web et en application native iOS et Android.
Avant de démarrer, vous devez avoir installé Node.js sur votre poste de travail.
Ouvrez un terminal et créez un nouveau projet Node.js à l’aide des commandes :
mkdir my-quasar-project
cd my-quasar-project
npm init -yInstallons à présent la CLI du framework Quasar :
npm i @quasar/cliCréons le projet Quasar :
npx quasar create my-quasar-appComme nous avons installé @quasar/cli en tant que dépendance du projet et non en global, vous devez utiliser “npx” pour exécuter “quasar dev”. Il s’agit d’un exécutable fourni par Node.js, qui va chercher quasar dans les dépendances du projet.
La CLI va vous poser plusieurs questions pour configurer le projet : nom du projet, nom de l’application mobile, auteur, etc…
Puis viennent les questions techniques, à commencer par le choix du pré-processeur CSS.
Vous aurez le choix entre Sass et ses deux types de syntaxe, stylus ou aucun.
La prochaine étape consiste à choisir la stratégie d’import des composants et directives.
Plus il y a de composants dans votre application Quasar, plus son poids sera conséquent et potentiellement les temps de compilation seront longs (tout est relatif, on parle ici de quelques secondes).
La CLI propose une configuration d’import automatique des composants permettant d’inclure uniquement ceux que vous utilisez ainsi qu’une configuration incluant tous les composants.
Sachant que vous n’avez certainement pas besoin de tous les composants pour faire votre application, il est préférable de choisir la stratégie d’import automatique pour bénéficier du treeshacking, maximiser les performances et avoir un bundle le plus léger possible.
A noter : depuis la mise à jour de @quasar/app en version 2 (18 juin 2020), la stratégie d’import manuelle n’est plus disponible.
A présent, vous allez devoir choisir les fonctionnalités à activer.
Pas d’inquiétude si vous en oubliez, il est possible de les ajouter par la suite.
TypeScript est une fonctionnalité qui n’est pas activée par défaut dans Quasar, c’est pourquoi elle peut être sélectionnée ici.
Pour information, à l’activation de TypeScript, il vous sera demandé quel style de composant utiliser parmi : Composition API, Class-based ou Options API.
Pour en savoir plus, reportez-vous à la section Supporting TypeScript de la documentation.
Si vous avez choisi ESLint, vous devrez choisir le préréglage.
Si vous n’avez pas de préférences, choisissez Prettier.
Enfin, vous devrez choisir entre Yarn et NPM.
Si vous n’avez pas de préférences, choisissez NPM.
Une fois la dernière étape validée, la CLI va initialiser le projet et le paramétrer avec la configuration que vous venez de spécifier.
A la fin du processus, votre application est prête, elle a été créée dans le répertoire my-quasar-app
cd my-quasar-appLancer l’application web
Pour lancer votre application Quasar en mode développement, exécutez la commande :
npx quasar dev La compilation va prendre quelques secondes, puis votre navigateur par défaut va s’ouvrir sur l’url http://localhost:8080.
L’application Quasar de démarrage contient un menu et une page avec le logo Quasar.
Vous pourrez remarquer que si vous ouvrez l’inspecteur du navigateur et passez en vue mobile, le menu s’adapte automatiquement.
Tous les composants Quasar sont prévus pour un rendu sur le web et sur mobile. Cela paraît évident de nos jours, mais vous allez voir dans la seconde partie de cette article qu’il y a quelques bonnes surprises qui vont vous faire aimer ce framework.
La commande “quasar dev” exécute l’application quasar en mode développement.
Pour créer l’application de production, il suffit d’exécuter la commande :
npx quasar build
Cette commande va construire l’application dans le répertoire dist/spa.
Lancer l’application mobile native iOS / Android
A présent, vous êtes à deux commandes d’avoir exactement la même application, mais sous forme d’application native pour iOS et Android.
Pour Android : vous devez avoir Android Studio bien configuré et l’Android SDK platform 28.
Pour iOS : vous devez avoir Xcode.
Commencez par ajouter capacitor au projet :
npx quasar mode add capacitorVous n’avez plus qu’à compiler le projet avec la commande :
npx quasar dev -m capacitor -T android
# Remplacez "android" par "ios" pour compiler pour iosL’exécution de cette commande va lancer Android Studio qui va configurer le projet en utilisant Gradle.
Avant de cliquer sur le bouton “Run app” d’Android Studio, accédez au menu “Refactor” et choisissez “Migrate to Android X”.
Cliquez sur le bouton “Do refactor” pour valider les modifications, puis cliquez sur “Run app”.
Une nouvelle application appelée Quasar App sera ajoutée sur votre appareil.
En mode développement, l’application mobile est liée à votre poste de travail qui sert de serveur à l’application. Lorsque vous faites des modifications dans le code, elles sont automatiquement visibles dans l’application mobile via le module HMR (Hot Module Reload) de Quasar.
Quasar est particulièrement efficace lorsqu’il s’agit de tirer partie de son module HMR. Cela rend le développement mobile aussi rapide et léger que le développement web.
Je vous invite à essayer en modifiant le contenu de la balise <q-toolbar-title> du fichier src/layouts/MainLayout.vue pour en être convaincu.
De même que pour le web, vous pouvez construire l’application mobile de production avec la commande :
npx quasar build -m capacitor -T androidCette commande va créer une application mobile native autonome que vous pourrez publier sur l’App Store.
To be continued…
Nous voilà arrivés à la fin de cette première partie pour débuter avec Quasar Framework.
Nous avons pu voir qu’il est très rapide de démarrer un nouveau projet grâce à la CLI.
La seconde partie entre dans le dur du framework avec :
- La gestion des layouts et styles
- Les icônes
- La bibliothèque de composants
- etc…
Lire la seconde partie de l’article : Débuter avec Quasar Framework (2/2).
