Frontend - jclaerhout/Projet_Web_III_2023 GitHub Wiki

Frontend

Vue.js

1. Justification du choix du framework JS

Avantages:

  • Facilité d'apprentissage et d'utilisation: comparé à d'autres frameworks, VueJs est plus facile à apprendre car il utilise javascript.
  • Flexibilité: VueJs est très flexible et est utilisable de différentes manières. On peut l'intégrer dans une application existante ou construire une application complète à partir de zéro.
  • Hautes performances: très performant grâce à sa technique de virtual DOM qui optimise le temps de rendu. Grâce à cela, l'expérience utilisateur est rapide et fluide.
  • Documentation complète: La documentation de VueJs est très complète et compréhensible.
  • Grande communauté de développeurs : beaucoup de développeurs partagent leur expérience en ligne.

Inconvénients:

  • Taille de la bibliothèque: la bibliothèque de base est petite, mais elle peut devenir très grande si on ajoute des modules supplémentaires. Les temps de chargement de l'application peuvent devenir assez longs.
  • Migration difficile: Si on désire intégrer Vue.js à une application existante, cela peut être difficile. Il faudra surement réécrire une grosse partie du code.
  • Manque de support pour les grandes entreprises: comparé à React et Angular, VueJs n'a pas encore le même niveau de support pour les grandes entreprises.
  • Trop de flexibilité: la flexibilité de Vue.js est un avantage mais elle peut également devenir un inconvénient dans le côté maintenance et collaboration avec d'autres développeurs.

Comparaison avec Angular et React:

  • Angular: est un framework développé par Google qui est plus lourd et plus complexe que Vue.js. Il a des fonctionnalités avancées pour créer des applications web très élaboré. Il est plus compliqué à apprendre que Vue.js. Une de ses caractéristiques principale est qu'il utilise TypeScript, ce qui nécessite une phase d'adaptation supplémentaire quand on ne l'a jamais utilisé.

  • React: est un framework populaire développé par Facebook. Il se rapproche de Vue.js pour son côté simple et flexible, mais il est plus axé sur les performances et est souvent utilisé pour les grandes applications web. Il utilise une syntaxe différente de celle de Vue.js, basée sur la programmation déclarative, qui peut être difficile à comprendre au début. Il est réputé pour ses performances élevées.

Pour conclure, Vue.js est plus simple à apprendre et à utiliser qu'Angular, mais offre moins de fonctionnalités avancées. Il est similaire à React, en ce qui concerne la simplicité et la flexibilité. Mais, il met un accent sur la création d'applications de taille moyenne, tandis que React est plus adapté aux grandes applications nécssitant de grosses performances. Vue.js est donc plus adapté à notre projet.

Sources: https://medium.com/swlh/vue-vs-react-vs-angular-what-framework-would-you-choose-5d77a3680b0d, https://www.sitepoint.com/vue-vs-react/, https://www.sitepoint.com/react-vs-angular/

2. Justification du choix pour la mise en oeuvre du CSS (Framework?)

Vuetify

  1. Justification du choix

Pour la mise en page de notre frontend, nous avons opté d'utiliser le framework CSS Vuetify.
Le choix d'utiliser ce framework CSS se justifie d'abord par un gain de temps considérable dans la phase de développement frontend. Cela nous évite aussi de devoir prendre en compte le côté responsive des éléments et pages du site.

Avantages:

  • Vuetify est basé sur Vue.js, cela signifie que Vuetify est facile à intégrer avec des applications Vue.js existantes, ou pour les nouveaux projets qui ont besoin d'un front-end robuste.

  • Vuetify offre un grand nombre de composants préconçus, ce qui facilite grandement la création d'une interface utilisateur cohérente. Ces éléments répondent également aux normes WCAG concernant l'accessibilité.

  • Vuetify est open-source et dispose d'une communauté active,le framework est également mis à jour régulièrement.

Inconvénients:

  • L'importation du framework dans le projet peut affecter les performances de l'application car assez lourd à installer. Cela peut être contournable en décidant d'importer uniquement les composants utiles.

  • Une courbe d'apprentissage est à prendre en compte dans lors de la prise en main du framework.

Source : https://vuetifyjs.com/en/introduction/why-vuetify/

3. Organisation du code

File tree frontend

Notre projet VueJS se décompose de la manière suivante :

  • assets : Ce dossier contient des ressources statiques telles que des images, des fichiers de polices, des fichiers CSS globaux, etc.
  • components : Ce dossier contient des composants VueJS réutilisables qui peuvent être utilisés à plusieurs endroits dans l'application.
  • router : Ce dossier contient le fichier index.js qui configure le router de l'application VueJS.
  • store : Ce dossier contient le store Vuex qui sert à la gestion des différents états et données de l'application.
  • views : Ce dossier contient les fichiers des pages VueJS de l'application. Chaque page est chargée via le router de l'application.
  • App.vue : Ce fichier est le composant racine de l'application VueJS qui contient le code HTML/CSS global pour l'application.
  • main.js : Ce fichier est le point d'entrée de l'application VueJS et contient le code JavaScript nécessaire pour initialiser l'application VueJS.

4. Apparence

[Quelques screenshots pour montrer le résultat + discussion sur l'évolution depuis les premières maquettes]

  • Screenshot du 16 mars 2023

Page d'accueill

Accueill

Page d'inscription

Inscription

5. Fonctionnement

[Explication du fonctionnement du frontend depuis une action utilisateur (clic sur un bouton, envoi de formulaire, ...) jusqu'à l'affichage du résultat. Prendre comme illustration une action qui nécessite un échange avec le backend]