Skip to content

Stack technique

aweaver edited this page Sep 5, 2023 · 1 revision

Liste non exhaustive

Cote Front

  • ReactJs : boiler plate cree avec ViteJs
  • HTML
  • CSS
  • Preprocesseur CSS
  • Axios : recuperation des donnees API
  • socket.io : communication en temps reel
  • Systeme de double auth, gAuth par exemple
  • Redux, Redux-persist, redux-thunk

Cote back

  • NestJs
  • Envoi de mail : nodemailer && handlebars]
  • Creation d'UUID: uuid dans sa version non deprecated
  • bcrypt
  • Creation de token : JsonWebToken (JWT)
  • Reverse Proxy : NGINX
  • PostgreeSQL
  • Prisma

Manipulation de la donnee

  1. Create
  2. Read
  3. Update
  4. Delete

Ce sont la les 4 operations de base sur la donnee. Si notre API permet de creer un "user" par exemple, elle doit permettre les autres modifications. Ca nous fait un bon CRUDite (ref. salade).

Differents grades

  • Administrateur
  • Utilisateur

Ces deux grades (liste non exhaustive) permettent d'avoir differents niveau d'autorisations. Cela autorise l'acces a une route API par exemple.

Documentation de route API.

Il est fortement recommande de documenter les routes API que l'on cree, afin de pouvoir creer les test End2End (e2e).

Postman: creation de la documentation

Postman est largement utilisee pour tester son API pendant le developpement. Il permet donc de developper son API sans que la partie Front soit implementee. Il permet aussi de creer de belles documentations fortement apreciees : https://www.postman.com/api-documentation-tool/

Les Tests

Jest && Cypress : Tests fonctionnels

Jest permet de tester le back, et Cypress permet de simuler graphiquement un utilisateur. Les deux outils ont la meme syntaxe.

Artillery: Test de charge (optionnel)

Artillery permet de simuler une charge sur le serveur avec N utilisateurs et avec plusieurs scenarii possible.

Architecture Redux

L'architecture Redux est une approche populaire pour gérer l'état global d'une application. Elle suit le principe de flux, qui utilise unidirectional data flow pour gérer les données de l'application. La bibliothèque Redux est généralement utilisée en conjonction avec React, mais peut également être utilisée avec d'autres frameworks JavaScript.

Dans l'architecture Redux, il y a un store unique qui contient l'état global de l'application. Les composants envoient des actions au store, qui les transmet aux reducers pour mettre à jour l'état global de l'application. Les middlewares sont des fonctions qui interceptent les actions avant qu'elles n'atteignent les reducers et peuvent effectuer des opérations supplémentaires telles que la journalisation, la validation ou l'appel à une API.

Les reducers prennent l'état actuel de l'application et une action, et retournent un nouvel état. Les reducers sont des fonctions pures, ce qui signifie qu'elles ne modifient pas l'état actuel de l'application, mais plutôt qu'elles retournent un nouvel état. Cela permet de garantir la prévisibilité de l'état de l'application.

Les composants peuvent accéder à l'état global de l'application en utilisant des selectors. Les selectors sont des fonctions qui prennent l'état global de l'application et retournent une partie de cet état. Les composants peuvent s'abonner à des selectors pour être informés lorsque la partie de l'état qui les concerne change.

L'utilisation de Redux avec TypeScript permet de garantir la sécurité du TypeScript en ce qui concerne les types, les fonctions et les interfaces, ce qui facilite la création de code plus robuste et plus maintenable. TypeScript ajoute une couche de sécurité supplémentaire en vérifiant les types de données à la compilation. Cela permet de détecter les erreurs de types et les erreurs de syntaxe avant l'exécution du code, ce qui facilite grandement la maintenance et la correction des bugs.

Les avantages de l'architecture Redux sont nombreux : elle permet de gérer l'état global de l'application de manière prévisible et sûre en utilisant unidirectional data flow. Cela facilite la maintenance et la compréhension du code, et permet de créer du code plus robuste et plus maintenable en utilisant TypeScript.

Les limites concrètes d'un projet React sans Redux peuvent être multiples. En effet, Redux est une bibliothèque open-source JavaScript qui permet de gérer l'état de l'application de manière prévisible et de faciliter grandement la maintenance et la compréhension du code. Sans Redux, la gestion de l'état local peut devenir difficile à mesure que l'application se développe en taille et en complexité, car l'état est souvent géré dans les composants. Cela peut entraîner des problèmes de lisibilité, de maintenabilité et de réutilisabilité.

En outre, sans Redux, il peut être difficile de gérer les actions asynchrones et les effets de bord, ce qui peut rendre le code difficile à comprendre et à déboguer. Les composants peuvent devenir plus difficiles à maintenir et à réutiliser, car ils peuvent devenir dépendants de l'état local et devenir plus difficiles à tester. Cela peut rendre la maintenance et l'extension de l'application plus difficiles, car il peut être nécessaire de modifier plusieurs composants pour effectuer des changements d'état.

Enfin, l'utilisation de Redux avec TypeScript permet de garantir la sécurité du TypeScript en ce qui concerne les types, les fonctions et les interfaces, ce qui facilite la création de code plus robuste et plus maintenable. TypeScript ajoute une couche de sécurité supplémentaire en vérifiant les types de données à la compilation. Cela permet de détecter les erreurs de types et les erreurs de syntaxe avant l'exécution du code, ce qui facilite grandement la maintenance et la correction des bugs.

En fin de compte, l'utilisation de Redux dans un projet React peut aider à améliorer la maintenabilité, la réutilisabilité et la lisibilité du code, ainsi qu'à faciliter la gestion de l'état global de l'application. En utilisant Redux avec TypeScript, il est possible de créer du code plus robuste et plus maintenable, ce qui facilite la maintenance et la correction des bugs à long terme.

Voici un schéma exhaustif de l'architecture Redux :

           +-----------------+
           |   React/Other   |
           |    Components   |
           +--------+--------+
                    |
                    v
           +-----------------+
           |      Actions    |
           +--------+--------+
                    |
                    v
           +-----------------+
           |     Middleware  |
           +--------+--------+
                    |
                    v
           +-----------------+
           |      Reducers   |
           +--------+--------+
                    |
                    v
           +-----------------+
           |       Store     |
           +-----------------+

Description technique de la phase de développement

Objectif

L'objectif de cette phase de développement est de mettre en place la gestion du store Redux pour l'application. Cette phase est cruciale pour garantir une gestion de l'état global de l'application prévisible et sûre en utilisant unidirectional data flow.

Structure de code fournie

Au départ de la phase de développement, une structure de code minimal sera fournie à l'équipe pour faciliter la mise en place de Redux dans l'application. Cette structure de code doit être suffisamment claire et concise pour permettre à l'équipe de comprendre rapidement les principes fondamentaux de Redux.

Prise en main de la gestion du store Redux

Au fur et à mesure de l'avancement du projet, l'équipe sera en mesure de prendre en main pleinement la gestion du store Redux. Cette prise en main nécessitera une bonne connaissance de l'architecture Redux et des principes de l'architecture Flux.

Connexion des composants au store Redux

Plus précisément, les premiers jours de la phase de développement, l'équipe devra connecter les composants au store Redux pour récupérer l'état (state) et connecter les fonctions de mise à jour du state. Cette étape est cruciale pour permettre à chaque composant de l'application d'accéder à l'état global et le modifier de manière centralisée. Cette approche facilite grandement la maintenance et la compréhension du code, car chaque composant peut accéder à l'état global et modifier les données de manière prévisible.

Utilisation de TypeScript

L'utilisation de TypeScript avec Redux permet de garantir la sécurité du TypeScript en ce qui concerne les types, les fonctions et les interfaces. TypeScript ajoute une couche de sécurité supplémentaire en vérifiant les types de données à la compilation. Cela permet de détecter les erreurs de types et les erreurs de syntaxe avant l'exécution du code, ce qui facilite grandement la maintenance et la correction des bugs.

Conclusion

En résumé, la phase de développement de la gestion du store Redux est une étape cruciale pour garantir une gestion de l'état global de l'application prévisible et sûre en utilisant unidirectional data flow. Cette phase permettra également de garantir la sécurité du code et faciliter la maintenance et la compréhension du code en utilisant TypeScript. La connexion des composants au store Redux permettra également de faciliter la maintenance et la compréhension du code en utilisant un arbre d'état unique. Les développeurs pourront ainsi accéder à l'état global de l'application en utilisant des selectors pour être informés lorsque la partie de l'état qui les concerne change.