# 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>

![](https://140209345-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M60O5kdEkdIt2ATmwdy%2F-M60O9Ekj9ya_pBFW6WR%2F-M60PmR37K_Q-kwQEqAk%2Fquasar-quoi.png?alt=media\&token=19318ec7-9118-4a11-ab93-808309a72012)

* 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](https://cordova.apache.org/)
  * iOS
  * Android
* Génération d'applications bureau en utilisant [Electron](https://www.electronjs.org/)
  * 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).&#x20;

![](https://140209345-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M60O5kdEkdIt2ATmwdy%2F-M60PtHlnowLRik7MGPC%2F-M60SCt-olHARH5BJD-B%2Fbefore-quasar.png?alt=media\&token=b5f39e44-cfda-4ca8-9dea-3b03518be6cc)

### 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.&#x20;

![](https://140209345-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M60O5kdEkdIt2ATmwdy%2F-M60PtHlnowLRik7MGPC%2F-M60SH8cKTvabYdwkmb8%2Fafter-quasar.png?alt=media\&token=cb2db87c-46db-4436-a513-65be12a70e92)

## C'est quoi Vue.js

Un puissant framework JavaScript pour la création d'interfaces web, tout comme [React](https://reactjs.org/), [Svelte](https://svelte.dev/) ou [Angular](https://angularjs.org/).

### Ses avantages, ses forces

* Plus facile à prendre en main et à comprendre que les autres frameworks JavaScript&#x20;
* La présence d'une forte communauté très réactive
* Découpage fort entre:&#x20;
  * 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)

```markup
<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>
```