Framework, Front-end

Les frameworks front-end aident les développeurs à gagner du temps lors du développement d’un site web ou d’une application. Ils permettent une simplification dans l’écriture du code en proposant des composants ou des fonctionnalités pré-faites selon la spécificité du framework.

Dans cet article nous allons vous présenter le framework front-end nommé Quasar. Son slogan : “Beyond the framework”.

Qu’est-ce que Quasar ?

Quasar est un framework front-end Open Source. Son code est basé sur le framework Vue.Js.

Créé par Razvan Stoenescu, la première version stable du framework est sortie en juillet 2019.

Le développeur a créé un outil utilisant une seule base de code pour créer plusieurs supports : site web, PWA, application mobile, …

 

La raison d’être du framework Js

Un gain de temps

Avec Quasar, les développeurs peuvent déployer leur projet sur différents supports très rapidement.

En effet, une unique base de code est suffisante pour créer à la fois un site web SPA, SSR ou PWA mais aussi une application mobile iOS et Android. Plus besoin de maintenir à jour plusieurs fichiers et lignes de code il n’y a qu’une unicité de code à mettre à jour.

Plus besoin non plus de se préoccuper des différentes technologies à utiliser pour varier les supports de diffusion. Quasar s’en charge automatiquement lorsque vous lui demandez de compiler.

De plus, Quasar propose le “Hot reloading”. Il s’agit d’une fonctionnalité permettant aux développeurs de programmer tout en ayant un aperçu de leur travail en live, sans avoir besoin de recharger la page.

 

Un gain de taille

Avec un poids égal à 437 ko, Quasar est un framework très léger.

Par ailleurs, il dispose de ses propres outils internes que vous pouvez ajouter à vos projets en fonction de vos besoins. Cela vous évite de devoir rattacher d’autres bibliothèques ou librairies qui peuvent très vite alourdir votre projet. Vous gagnerez ainsi en poids, en temps de chargement et en efficacité !

 

Une simplicité d’utilisation

Quasar dispose d’une bibliothèque de composants comprenant plus de 70 éléments. De quoi trouver ce dont vous avez besoin. De plus, chaque composant est entièrement responsif afin de s’adapter automatiquement pour un rendu web et mobile.

Le framework Quasar dispose d’une documentation très détaillée et d’un blog mais aussi d’une grande communauté active sur le forum de Quasar et sur le chat Discord. Vous trouverez sans problème les réponses à toutes vos questions.

 

Une structure en 3 parties

Quasar a opté pour une structure de développement divisée en 3 parties entre HTML, CSS et Javascript. Vous obtiendrez donc dans votre code :

  • <template> pour le HTML
  • <script> pour le Javascript ou le Typescript
  • <style> pour le CSS, le SCSS ou le SaSS

 

L’installation de Quasar

Pour installer le framework Quasar grâce à NodeJs, vous devez utiliser la commande npm install -g @quasar/cli puis la commande npx quasar create pour créer votre projet.

L’installation lancée, il ne vous reste plus qu’à répondre à quelques questions pour initialiser le projet (nom de l’auteur, nom du projet, choix du pré-processeur CSS, …).

Lors de la configuration vous devrez choisir si vous souhaitez utiliser tous les composants compris avec le framework ou si vous préférez opter pour l’import uniquement des composants dont vous aurez l’utilité. Bien entendu, vous pourrez, par la suite importer d’autres éléments du framework js si vous vous apercevez qu’ils vous seront utiles.
Cependant, la deuxième option vous permettra de gagner en taille et donc en rapidité de chargement sur vos applications.

Pour lancer votre projet avec le mode développement, il vous faudra utiliser la commande suivante : npx quasar dev qui s’exécutera dans votre navigateur par défaut.

 

Compiler en version mobile avec Quasar

Dans un premier temps, vous devez créer l’application de production grâce à la commande : npx quasar build

Vous avez ensuite 2 possibilités pour compiler en version mobile votre code de base :

Il ne vous reste plus qu’à utiliser la commande suivante : npx quasar dev -m capacitor -T android pour compiler en version Android ou npx quasar dev -m capacitor -T ios pour iOS

Ce qu’il faut retenir :
Comme dit précédemment dans cet article, Quasar est basé sur Vue.Js, il est donc recommandé de maîtriser, dans un premier temps, Vue.Js avant de se lancer avec Quasar.

Facile et rapide sont les maîtres mots du framework Quasar.

Pour plus d’articles, n’hésitez pas à consulter notre rubrique Framework

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

D3.Js vs Chart.Js

D3.Js ou Chart.Js, comment choisir sa bibliothèque graphique ?

D3.Js et Chart.Js, font partis des bibliothèques JavaScript de visualisation de données les plus connues mais aussi les plus utilisées. L’une laisse ses utilisateurs plus libres à la personnalisation et l’autre est considérée comme “plus simple”.

CSS Grid Layout vs Flexbox

CSS Grid Layout vs Flexbox

Après de multiples changements et améliorations du CSS (Cascading Style Sheets), la dernière nouveauté est le CSS Grid Layout. Un grand changement après Flexbox, destiné à faciliter la mise en page pour les développeurs.

Dans cet article, nous allons vous expliquer ce qu’est le CSS Grid, pourquoi il est utilisé tout en faisant la comparaison avec Flexbox, afin de vous aider dans ce choix : “Grid ou Flexbox ?”

Vous y trouverez quelques astuces et conseils pour vous rendre la vie plus simple ! ?

LocalStack-image-blog

LocalStack : un framework pour les applications Cloud

LocalStack est un framework permettant aux développeurs de tester leur application Cloud sans passer par un environnement Cloud.

Eh oui, du Cloud sans Cloud ! Comment ça marche, quels sont les avantages et les fonctionnalités proposées ce framework ?
Nous vous proposons 5 min de lecture pour avoir les réponses.

Centre de préférences de confidentialité

Cookies Fonctionnels

gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

Advertising

Cookies Satistiques

_ga, _gat, _gid

Cookies externes

PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
CONSENT, 1P_JAR