Justification frontend

Vue

Pour notre framework frontend, on hésitait entre Vue et React, et on a fini par choisir Vue pour les raisons suivantes: Syntaxe

• La syntaxe en Vue est plus propre, par exemple, si on veut faire une liste d'éléments (qu'on fera très souvent pour ce projet) on a ceci:

React
<ul>
  {
    dataArray.map(data,i)=> <li key={i}>{data}</li>)
  }
</ul>

Vue
<ul>
	<li v-for="(data,i) in data" :key="i">
		{{data}}
	</li>
</ul>

• Dans Vue on fait une claire distinction entre les parties script, html et css alors que dans react tout est un peu mélangé dans une seule classe par composant.
• Vue lie l'affichage à des variables javascript, il est donc très simple d’interagir avec sans avoir à modifier le view model.
• Les évènements sont très faciles à gérer avec Vue, par exemple pour le clic sur un élément, il suffit d'ajouter la propriété @click="method"
• Dans ce projet, notamment pour la partie "Panier", le frontend devra faire constamment des calculs pour connaître par exemple le total ou autres valeurs, dans react il y a moyen de faire ça avec Memo, mais les valeurs computed de Vue sont plus simple à utiliser et font le même job.
• Les composants, même si aussi présents dans React, sont très simples et propres à utiliser dans Vue, dans ce projet il seront très utiles car on aura souvent à les répéter dans des listes dynamiques, ou les mettre ensemble les uns à côté des autres (interface d'administration).
• L'affichage conditionnel est difficile et pas clair à lire dans un composant React, il faut soit utiliser une sous-fonction de render, soit des opérateurs ternaires ou autres, alors que dans Vue on a juste à utiliser v-if. Dans ce projet, l'administrateur du site pourra voir plus de choses que les utilisateurs normaux, donc cette fonctionnalité sera indispensable.

Framework style : Bootstrap-Vue

Pour notre framework style, nous allons utilisée Bootstrap-vue, car il est compatible avec Vue, il fournit un style bootstrap et permet de rendre le site responsive.