Le quasar est l‘une des entités les plus lumineuses de l’Univers. Dans notre cas, il s’agit  d’un framework basé sur Vue.js, qui promet une expérience de développement exceptionnelle. Entre performance et accessibilité, Quasar Framework est-il aussi éblouissant que son homonyme céleste ?

Quasar, Kézako ?

Quasar (prononcé /ˈkweɪ.zɑɹ/) est un framework open-source sous licence MIT (licence pour logiciels libres et open source), créé par Razvan Stoenescu. Lassé de devoir passer d’un logiciel à l’autre pour produire des applications, ce dernier a cherché un outil lui permettant de concevoir plusieurs applications sur une même base. En vain !

“J’avais envie d’un cadre unique qui supprimerait toute la complexité et produirait toutes ces différentes saveurs d’applications… à partir d’une SEULE base de code. Incapable de localiser un outil aussi mythique, j’ai décidé de le construire.”– R. Stoenescu

Chose dite, chose faite : Razvan Stoenescu nous propose un outil capable de produire rapidement et facilement différents types d’applications à partir d’une base de code unique. La première version du code source de Quasar Framework a été révélée en 2015 tandis que la première version stable a été publiée en juillet 2019. La première conférence Quasar s’est déroulée en juillet 2020.

Quasar nous fait une promesse particulièrement alléchante : pouvoir créer des applications de qualité en un temps record. Mais est-il vraiment possible de concevoir des produits fiables, fluides et sécurisés en peu de temps ?

Un framework qui en a sous le capot

Actuellement disponible en version 1.13.2, le projet Quasar est découpé en plusieurs éléments : 

• @quasar/app : le framework en lui-même, la pièce maîtresse du projet
• @quasar/extras : tout ce qui concerne l’esthétique (fonts, icônes, animations)
• @quasar/cli : la CLI (command line interface ou interface en ligne de commande en français) globale incluant toutes les commandes de développement
• Icon Genie CLI : une CLI dédiée aux applications mobile et tablette, permettant notamment de gérer les splash screens.

Avec une telle décomposition, Quasar couvre de nombreux aspects du développement en interne. Cela permet la création d’application sans passer par des bibliothèques externes qui pourraient alourdir votre travail (Hammer.js, Bootstrap, etc). On n’est jamais mieux servi que par soi-même !

Ce framework ne se positionne pas tout à fait comme un concurrent direct des autres frameworks sur le marché. Il se définit plutôt comme un environnement propre, capable de produire différentes applications avec une même base. Nous avons l’embarras du choix :

• Site web
• Progressive web app (PWA)
• Application mobile iOS
• Application mobile Android 
• Application desktop (Windows, Linux, Mac)

Mais attention, proposer un développement sur un large choix d’environnements ne veut pas dire que Quasar lésine sur la performance ou la sécurité ! L’équipe Quasar est à l’affût de la moindre menace de sécurité et suit des directives strictes. Dans un élan de générosité, Quasar offre également son expertise en matière de sécurité à travers le programme Quasar Audit.

Pour tenir sa promesse de proposer des applications haute performance, Quasar se base sur des technologies populaires au sein de la communauté des développeurs. Ces dernières ont fait leurs preuves :

• Le framework Vue.js : c’est la BASE. Tous les composants mis à disposition par Quasar sont des composants Vue, ce qui permet d’obtenir une structure solide mais également de ne pas trop dépayser les développeurs adeptes de Vue.js.
• Webpack : un outil incontournable pour les projets JavaScript complexes, qui permet de créer les bundles des sources.
• Electron : une référence dans la génération d’applications Mac, Windows ou Linux.
• Capacitor/Cordova : pour une bonne gestion de la génération d’applications iOS et Android.

Niveau performance, Quasar Framework semble tenir ses engagements. Les environnements sont stables, sécurisés et optimisés pour concevoir des applications qualitatives sans pour autant prendre une place considérable. Il s’agit en effet d’ un bel accomplissement, mais Quasar repousse les limites en proposant également une intégration de projet rapide et personnalisée. 

Un développement rapide et sur mesure

Initialiser un projet de qualité, c’est bien, initialiser un projet de qualité en quelques clics, c’est mieux ! Avec la CLI de Quasar Framework, la mise en place d’un projet est simplifiée, au grand soulagement des développeurs. Préparer les bases de son projet, définir si l’on souhaite builder ce dernier  en mobile ou en desktop et lancer le serveur devient un jeu d’enfant. 

Concevoir un projet peut parfois s’avérer délicat, entre les installations nécessaires et les différentes manipulations propres à chaque type d’application. Mettre en place un environnement comprenant plusieurs applications sur une même base peut donc paraître fastidieux. Que nenni ! Quasar CLI gère toutes les fantaisies impliquées dans le développement et permet aux développeurs de préparer leur projet en toute sérénité. Le seul prérequis est la présence de Node.js (version 10 ou supérieure) sur votre machine. Les commandes essentielles à la préparation de l’environnement se comptent sur les doigts de la main, ce qui est plutôt appréciable :

1. Générer un nouveau projet Node.js

2. Installer Quasar CLI

3. Générer le projet Quasar

À partir de cette étape, Quasar CLI va prendre le relais et vous concocter une base de projet aux petits oignons. Il suffit de répondre aux questions posées lors de la configuration pour que l’environnement corresponde à vos besoins (nom du projet et de l’auteur, choix du pré-processeur CSS, import des composants, fonctionnalités, choix de Yarn ou NPM, etc). Il est tout à fait possible de modifier ou ajouter des fonctionnalités par la suite. 

Une fois que la configuration est terminée, on obtient l’architecture de base de l’application avec des pages d’exemple. Vous pouvez alors lancer votre projet en local via une simple commande :

Le processus de compilation prend quelques secondes, puis ouvre votre projet sur l’url http://localhost:8080, via votre navigateur favori. À ce stade, vous disposez alors de toutes les clés pour mener à bien le développement de votre application.

Grâce à cette prise en main fluide et rapide, le développeur peut se focaliser sur le contenu de son application sans avoir à se préoccuper des éléments de base. 

Une fois le projet configuré, Quasar n’a pas encore fini son travail et continuera à vous aider et vous accompagner au cour du développement grâce à ses composants Vue.js maison.

Brille brille, petite étoile

Non content d’être rapide et efficace, Quasar Framework propose également plus de 70 composants Vue conçus pour embellir et perfectionner votre travail. Chaque composant est peaufiné pour offrir la meilleure expérience possible. Entre personnalisation, propriétés multiples ou encore slots Vue.js, les possibilités sont nombreuses. La documentation Quasar sur les composants disponibles est limpide et permet de trouver rapidement son bonheur. Pas besoin d’installation particulière, les composants sont intégrés par défaut (il est tout à fait possible de n’inclure que les composants souhaités, dans un souci d’optimisation). Dès le lancement du projet, on peut déjà apercevoir quelques composants plutôt intéressants comme le header, le drawer ou les listes.

Le système de layout et de grille est un atout du framework, permettant une organisation des éléments optimisée pour chaque écran. Quasar utilise Flexbox pour la gestion des lignes et colonnes, ainsi qu’un ensemble de classes CSS et de helpers faciles d’utilisation. On ne le dira jamais assez, un visuel équilibré et fluide reste extrêmement important pour l’expérience utilisateur.  

Quasar offre une ribambelle de classes CSS destinées à faciliter l’écriture de votre code. Fini les balises CSS sur des kilomètres, il suffit de parcourir la documentation pour trouver son bonheur en ce qui concerne les propriétés de base (palette de couleurs, tailles de typographie, positionnement des éléments, etc). Une envie de rouge, d’italique ou de texte centré ? Il suffit de demander ! 

Côté icônes, Quasar repose par défaut sur Material Design 2.0 et s’efforce de rester à jour sur les dernières nouveautés. Un petit plus qui facilite le développement et apporte une touche de dynamisme aux visuels d’une application. Il est tout à fait possible d’intégrer des icônes personnalisées ou des bibliothèques d’icônes.

La minute technique

Discuter des performances et de l’esthétique proposées par Quasar Framework est instructif, mais qu’en est-il des aspects plus techniques ? Tour d’horizon de la composition d’une application Quasar. 

L’architecture de base d’un projet Quasar est relativement complète :

On y retrouve l’ensemble des dossiers nécessaires au bon fonctionnement de votre application, comme le routeur ou les pages. On peut également apercevoir un fichier particulièrement pratique, le quasar.conf.js.

L’un des gros avantages de Quasar, c’est la gestion de la plupart des éléments de configuration par des outils sous jacents. Pas besoin de connaître les outils de développements complexes par coeur pour utiliser le framework. Le fichier Javascript quasar.conf.js est un pilier de ladite configuration, et permet de gérer l’ensemble des dépendances sans trop d’effort. Voici un aperçu des éléments configurables via ce fichier : 

• Composants et plugins Quasar utilisés dans votre projet
• Langage employé par défaut, géré par le Quasar Language Pack
• Bibliothèque d’icônes
• Port du serveur dev, mode HTTPS, nom d’hôte
• Fichiers CSS et animations CSS
• Exécution et liste des fichiers de démarrage
• Définition du type d’application
• Configuration Webpack et Electron

Besoin de modifier la configuration de votre application en pleine session de développement ? Pas de panique. Quasar CLI détecte chaque modification sur le fichier quasar.conf.js et recharge automatiquement le serveur de développement en cas de besoin, sans avoir besoin de relancer le script. Rapide et efficace, on l’a dit !

Ajouter et utiliser des variables d’environnement est également un jeu d’enfant, grâce au fichier .quasar.env.json. Ce fichier JSON permet de définir l’ensemble des variables nécessaires pour faire fonctionner votre projet : URL de base de données, clés API, identifiants divers… Un seul fichier pour regrouper l’ensemble de vos variables et définir leur environnement d’utilisation. Il est ainsi aisé de personnaliser la procédure d’exécution en fonction du type d’application ou du type d’environnement (développement, production, etc). Une fois le fichier d’environnement initialisé, il suffit d’écrire la commande adéquate pour lancer votre projet sur l’environnement de votre choix :

Une configuration simple pour éviter de se mélanger les pinceaux entre différents environnements, qui améliore grandement la productivité et la réactivité lors du développement. Quasar se plie en quatre pour nous proposer des solutions de facilité, et propose une multitude d’autres fonctionnalités conçues pour que le développeur puisse se concentrer sur ce qui reste le plus important, à savoir le contenu de son projet.

Pour conclure

Le projet étant open source, il est tout à fait possible de le sponsoriser ou de contribuer à son évolution. Quasar jouit d’une certaine popularité, disposant ainsi d’une communauté active et bienveillante. En cas de difficulté rencontrée, il est possible d’obtenir de l’aide via le serveur Discord de Quasar ou encore le forum dédié.

Entre efficacité et simplicité, Quasar a déjà séduit de nombreuses sociétés telles que DigitalOcean ou Campus Cloud Services. Chez Owlie, nous apprécions la rapidité et la qualité proposées par Quasar Framework, et prenons plaisir à l’utiliser dans plusieurs de nos projets. 

Avons-nous réussi à attiser votre curiosité ? Si vous avez déjà pu tester ce framework, vous a-t-il séduit également ?

Sources:  

• Stoenescu, Razvan (3 juillet 2019). “Why every Vue developer should be excited by Quasar 1.0“
• Gildas Morel des Vallons (9 juin 2020) “Débuter avec Quasar Framework“
• Documentation Quasar, “Introduction to Quasar” 
• Documentation Quasar, “Quasar CLI”  
• Documentation Quasar, “Configuring quasar.conf.js”
• Github Quasar