Analyse technique frontend

Frontend : ReactJS

Qu'est ce que REACT ?

React est une bibliothèque Javascript frontend open source créé par Facebook en 2013. L'objectif principal de cette librairie est de faciliter la création d'applications Web d'une seule page.

1. Justification du choix du framework JS

Permet de créer des interfaces utilisateur ou des composants d’interface utilisateur rapides et interactifs pour les utilisateurs d’applications web et mobiles.

DOM Virtuel : générer le DOM ("Document Object Model", structure des éléments qui sont générés dans le navigateur web lors du chargement d’une page) de manière dynamique, ce qui nous permet de visualiser les changements de données sans devoir recharger/render à nouveau la page entière, mais seulement le composant qui a été mis à jour.

Grande communauté : soutenu par une large communauté, ce qui nous permet d’avoir un grand nombre de libraires disponibles.

Composants réutilisables : Elle est constituée de composants qui sont réutilisables, ce qui rend l’application plus évolutive et plus facile à maintenir car les erreurs se produisent dans la fonctionnalité du composant lui-même.

Ces avantages permettent d’améliorer l’expérience de l’utilisateur lors de la navigation dans l’application web, la rapidité du chargement des pages et facilitent la maintenance de l’application.

• On travaille avec des composants indépendants
• Programmation orienté composant
• Fortement utilisé en entreprise
• Large communauté => source = Point n°5 de la bibliographie

React vs Vue

• React est une bibliothèque or Vue est un framework
• React permet une manipulation du DOM, D'architecturer ses composants et de manager leurs états ce qui permet plus de liberté aux developeurs
• Vue évolue de plus en plus rapidement et est presque au même niveau que react grâce à sa communauté et ses nombreuses bibliothèques tierces.
• React à un style de programmation fonctionnelle : l'état des composants reste immuable or dans vue la mutation de l'objet d'état est possible et déclenche à chaque fois un nouveau rendu de l'interface.

React vs Angular

• React est une bibliothèque javascript construit à l'aide du JSX or Angular est un framework javascript construit à l'aide de typescript
• Angular est connu pour son ancienneté donc il a une version bien plus stable comparé à réact sortie tout récemment
• React est une bibliothèque or Angular est un framework

Sources

• Point n°6 de la bibliographie
• Point n°7 de la bibliographie
• Point n°8 de la bibliographie

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

Nous avons opté pour le css la bibliothèque style-components qui se rapproche plus du preprocesseur scss et nous permet d'écrire en même temps du css dans du javascript et inversement du javascript dans du css afin de faciliter la mise en oeuvre de certains styles complexe.

Comporaison par rapport à react-bootstrap

• Meilleur contrôle sur le style de nos composants.Avec styled-component nous ne dépendont pas de style externe comme avec react-bootstrap.
• Plus grande croissance. Styled components dispose d'une communauté 2 fois plus croissance que react-bootstrap Inconvénient
• Plus de code à écrire. Contrairement à bootstrap qui nous simplifi le code, styled-component demande une meilleur maitrise du css et du javascript

Source => Point n°9 de la bibliographie

Comparaison par rapport au scss

• styled component est inspiré très fortement du scss mais le fait qu'il peut être combiné avec du js lui procure une performance un peu plus élevé
• styled component peut être associé à de nombreuse autre bibliothèque de réact pour facilement modifier les styles
• styled component est plus léger et rapide que le scss
• l'ecriture du code avec du styled component est beaucoup plus lisible que le scss

source

3. Organisation du code

• /frontend : accueillera tous les dossiers et fichiers js du frontend de notre application
• /frontend/public : acceuillera tous les dossiers et fichiers utilisé par toute l'application
• /frontend/public/images : accueillera toutes les images et icônes qui seront utilisées sur l'interface de l'application
• /frontend/src : acceuillera tous les dossiers et fichiers js qui vont contenir le code source de notre application
• /frontend/src/action : acceuillera tous les fichiers js qui vont non seulement définir nos actions pour effectuer des requêtes sur le backend mais aussi contenir le code pour effectuer des requêtes vers le backend.
• /frontend/src/app : Contient le code qui va contenir la logique redux pour conserver l'état de nos composants react.
• /frontend/src/components : Contient tous les composants react de notre application : les composants administrateurs et clients
• /frontend/src/reducer : Contient les fichiers (reducteurs) qui vont nous permettre de modifier l'état de nos composants react à chaque nouvelles actions ex : lors du clique sur un bouton incrémenter, c'est dans ce dossier que l'état de la valeur va être modifié.

    /frontend
        /public
            car.js
        /src
            /action
                actionTypes.js
                carAction.js
            /app
                store.js
            /components
                /admin
                    ...
                ...
            /reducer
                carReducer.js
                index.js
                userReducer
        App.js
        index.js
        index.css

4. Apparence

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

Page d'affichage des voitures

Page d'accueil du site

Page d'ajout des voitures

Page de réservation

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]

Dans la partie Ajouter des voitures L'administrateur peut rajouter des voitures via le formulaire mis à sa disposition. Lorsqu'il clique sur le bouton envoyer, dans le cas où

• Tous les champs obligatoires ne sont pas complété: un message d'erreur adéquat est affiché à l'écrans
• Tous les champs obligatoires ont été complété:

1. Toutes les informations du formulaire sont mises dans un objet qui est tramis via un dispatch(addCarsProperty(property)) dans le fichier addCars.js à l'action asynchrone addCarsProperty

2. L'action addCarsProperty déclenche une requête asynchrone vers le backend sur le endpoint POST api/car qui va permettre l'insertion de la voiture

3. La requête est transmise au controllers addCars, qui transmet une requête sql vers la base de pour insérer les information de la voiture.

4. Une fois les infos du formulaire bien insérer une deuxieme requête est enclenché cette fois si pour insérer les images de la voiture si dans le formulaire d'insertion l'administrateur a uploadé des images du véhicule.

5. Une fois toutes les infos du véhicules bien inseré, celà déclenche le rafraichissement de la page cars qui fait une requete vers la db allant chercher toutes les nouvelles voitures dans la db.

6. Cette requête est enclenchée via le dispatch(getCarsProperty()) dans le fichier /frontend/src/components/cars.js qui exécute la fonction asynchrone getCarsProperty

7. Dans la fonction getCarsProperty on fait de nouveau une requête vers la db sur le endpoint GET api/cars qui va exécuter le controller getCars