Introduction

Pourquoi choisir Vue.js plutôt que ses concurrents ? C'est quoi Quasar ?

Un framework JavaScript basé sur Vue.js qui permet de générer des applications pour plusieurs plateformes avec le même code de base.

• Site web : https://quasar.dev/

• Documentation : https://quasar.dev/introduction-to-quasar

• Génération d'applications Web

  • SPA - Single Page Application : Application web se chargeant sur une seule page HTML

  • PWA - Progressive Web App : application web se comportant comme un application mobile

  • SSR - Server Side Rendering : Application JS dont une partie du code est évaluée par le serveur.

    • Plus d'informations https://nuxtjs.org/

• Génération d'applications mobiles en utilisant Apache Cordova

  • iOS

  • Android

• Génération d'applications bureau en utilisant Electron

  • Mac

  • Windows

  • Linux

Pourquoi choisir Quasar ?

• Création d'une application compatible avec plusieurs plateformes et avec un minimum de problèmes.

• Évite d'avoir à maintenir plusieurs bases de code

• Grande choix de composants d'interface (boutons, menus, popup, …) et d'autres utilitaires (scroll, swipe, ...)

• "Hot reloading" sur tous les terminaux durant le développement

  • Le rechargement à chaud "Hot reloading" permet de modifier son code et de voir les mises à jour de votre application, en temps réel.

• Détection de la plateforme (Windows, Mac, Android, … )

• Très bonne documentation et grande communauté

Sans Quasar

Lorsqu'on créer une application multi-plateformes avec la méthode classique, il faut maintenir plusieurs de dépôts de code :

• Un premier l'interface mobile (Mobile app)

• Un deuxième pour l'interface des applications bureau (Descktop app)

• Un troisième pour les règles métiers communes (Core app code).

Avec Quasar

Grâce à Quasar, le code est centralisé à dans un seul dépôt et Quasar s'occupe du reste en adaptant les composants pour les différents types de terminaux.

C'est quoi Vue.js

Un puissant framework JavaScript pour la création d'interfaces web, tout comme React, Svelte ou Angular.

Ses avantages, ses forces

• Plus facile à prendre en main et à comprendre que les autres frameworks JavaScript

• La présence d'une forte communauté très réactive

• Découpage fort entre:

  • le contenu - HTML

  • les événements - JavaScript

  • la mise en forme - CSS

• On peut facilement l'ajouter à des pages web existantes.

• Peut être utiliser pour créer des application web, SPA, complexes y compris le routage.

• Ses composants monofichiers (voir code ci-après) qui regroupent le code d'un composant dans un seul fichier en divisant distinctement le contenu, les traitements et le styles)

  • <template> - HTML

  • <script> - JavaScript (ou TypeScript)

  • <style> - CSS (ou SASS, SCSS)

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
​
<script setup>
import { ref } from 'vue'

const message = ref("Salut le monde!");
</script>
​
<style>
  p {
    border: 1px solid gray;
  }
</style>