Cours

Objectifs

Qu'est-ce qu'une application web ?

Présentation

Application Web

Programmation Web et bases de données

Application Web

• Application

  • Un logiciel/programme qui permet de réaliser des tâches spécifiques.

  • Interface entre l'utilisateur et le système.

  • Installation et exécution sur un appareil (ordinateur, mobile, …).

• Application Web

  • Navigateur comme interface.

  • Pas d'installation car exécutée en ligne.

  • Contrairement aux applications natives (installées sur l'appareil).

SPA

https://dzone.com/articles/the-comparison-of-single-page-and-multi-page-appli

SPA

• Single Page Application (application monopage)

• Chargement dynamique des contenus.

• Mise à jour de la page sans rechargement grâce à JavaScript.

• Réduction des temps de chargement.

• Expérience d'une application mobile sur navigateur.

SPA

https://devopedia.org/single-page-application

SPA

https://commons.wikimedia.org/wiki/File:Angular_logo_(2023).svg

• Angular

  • par Google depuis 2009 (AngularJS jusqu'en 2016).

  • TypeScript obligatoire.

  • Complexe (proche du développement en Java).

https://commons.wikimedia.org/wiki/File:React_Logo_SVG.svg

• React

  • par Meta (Facebook) depuis 2013.

  • JSX : mélange de HTML et JS.

  • Populaire avec grande communauté (bibliothèques et aides).

https://commons.wikimedia.org/wiki/File:Vue.js_Logo_2.svg

• Vue.js

  • par Evan You depuis 2014.

  • Simple et facile à apprendre.

PWA

• Progressive Web App (application web progressive)

• Alternative aux applications mobiles, développée par Google depuis 2015.

• Installation d'une application web sur un appareil pour un accès hors ligne.

• Avec les avantages des applications natives (notifications, accès à l'appareil photo, géolocalisation, …)

• Développement plus simple et moins coûteux (pas de boutique d'applications, mises à jour automatiques, compatibilité multi-plateforme, …)

PWA

https://devopedia.org/single-page-application

Design Pattern : Composite

https://refactoring.guru/fr/design-patterns/composite

Design Pattern : Composite

https://refactoring.guru/fr/design-patterns/composite

Design Pattern : Composite

• Les frameworks SPA utilisent le design pattern composite pour structurer les composants.

• Un composant est une "balise" HTML personnalisée avec des propriétés et des méthodes.

• Chaque composant est indépendant et interagit avec les autres.

• Séparation des préoccupations (Separation of concerns) au sein d'un composant : template, script et style.

• Les composants peuvent être imbriqués les uns dans les autres.

• Réutilisation des composants.

Design Pattern : Composite

https://fr.vuejs.org/guide/essentials/component-basics

Séparation des préoccupations

<script setup>
import { ref } from "vue";
const greeting = ref("Hello World!");
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

https://fr.vuejs.org/guide/scaling-up/sfc#what-about-separation-of-concerns

Cycle de vie d'un composant

https://css-tricks.com/intro-to-vue-3-vue-cli-lifecycle-hooks/

Cycle de vie d'un composant

https://fr.vuejs.org/guide/essentials/lifecycle.html

Exemple

const model = defineModel<boolean>();
const props = defineProps({
  answer: { type: String, required: true },
  options: {
    type: Array as PropType<Array<{ value: string; text: string }>>,
    required: true,
  },
});
const value = ref<string | null>(null);
watch(value, (newValue) => (model.value = newValue === props.answer), {
  immediate: true,
});

DefineModel

const model = defineModel<boolean>();

• defineModel est une fonction générique appelé sans argument.

• Les types génériques sont indiqués entre les chevrons <>.

• boolean est le type générique passé à defineModel.

• On s'attend à ce que ce v-model soit de type boolean.

DefineProps

const props = defineProps({
  answer: { type: String, required: true },
  options: {
    type: Array as PropType<Array<{ value: string; text: string }>>,
    required: true,
  },
});

• Crée une constante props de type {answer: string, options: {value: string, text: string}[]} (survoler pour voir le type complet).

• L'argument de defineProps est un objet qui décrit les propriétés attendues par le composant.

  • type est le type de la prop (as PropType<T> pour préciser Array et Object).

  • required indique si la prop est obligatoire.

Ref

const value = ref<string | null>(null);

• ref est une fonction générique appelée avec un argument.

  • l'argument est la valeur initiale de la référence.

• On s'attend à ce que value.value soit de type string ou null.

Watch

watch(value, (newValue) => (model.value = newValue === props.answer), {
  immediate: true,
});

• watch est une fonction qui observe une propriété réactive (ref, reactive, computed, etc.) et qui fait quelque chose quand elle change.

• watch prend trois arguments :

  • La propriété à observer.

  • Une fonction qui sera appelée à chaque changement (newValue, oldValue).

  • Un objet d'options (immediate: true pour appeler la fonction une première fois à la création du composant).

Argument inutilisé

(newValue) => (model.value = newValue === props.answer);

équivalent à

(newValue, oldValue) => {
  model.value = newValue === props.answer;
};

Computed

const name = ref<string>("");
const greeting = ref<string>("");
watch(name, (newName) => (
  greeting.value = "Hello, " + newName + "!"
));

équivalent à

const name = ref<string>("");
const greeting = computed<string>(() =>
  "Hello, " + name.value + "!"
);

équivalent à

const name = ref<string>("");
const greeting = computed<string>(() => {
  return "Hello, " + name.value + "!";
});

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Références

• https://medium.com/@catherineriver/the-composition-pattern-in-vue-react-and-angular-simplifying-logic-and-code-reusability-30a09694554e
• https://refactoring.guru/fr/design-patterns/composite