# Frontend: Amélioration diverses / Expérience développement

**URL:** <https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125>\
**Category:** Développement\
**Created:** [Avril 28, 2023, 5:17 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125 "2023-04-28T05:17:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Avril 28, 2023, 5:17 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/1 "2023-04-28T05:17:08Z")

</div>

Salut les développeurs Gladys 🙂

Le projet «&nbsp;frontend&nbsp;» de Gladys 4 a été créé en 2018/2019, et certain points de la configuration deviennent vieillissant/plus adapté avec le recul.

J’aimerais qu’on discute ensemble des différentes choses qui peuvent être mise à jour pour que le code soit plus au goût du jour, et pour itérer sur ce qui a marché/pas bien marché dans le frontend.

**Mettre à jour ESLint**

Mettre à jour la configuration ESLint pour autoriser les dernières améliorations JS ES2023 (opérateur ?. par exemple, on en parlait avec @bertrandda sur sa dernière PR)

Ca me fait penser qu’il faudrait le faire sur le backend aussi car certaines erreurs liés à JSDoc sont impossible à comprendre, et dans une version plus récente c’est beaucoup plus compréhensibles !

**Stopper l’utilisation des décorators `@connect` utilisé par unistore**

C’était la mode à l’époque et au final unistore ne le recommande plus, c’était un «&nbsp;hack&nbsp;» autorisé par le transpiler, je ne crois même pas que ce soit dans la spec JS en 2023.

Fini :

![Screenshot 2023-04-28 at 11.59.24](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/0/0d5516bd543bdd94d078e97833af383333038854.png)

Maintenant :

 ![Screenshot 2023-04-28 at 12.00.17](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/7/763a3f5519f4623a3b9415ca1a1aefbacf6c40c4.png)

Il faut que j’ajoute une règle ESLint pour bannir ce comportement.

**Restreindre grandement l’utilisation du store global unistore**

Je l’avoue, c’est de ma faute, au début de la v4 je pensais qu’un store global serait une bonne idée, sûrement par manque d’expérience à l’époque en développement front React. Le résultat : on a eu de nombreux bugs liés au store global, car forcément des variables se polluaient entre elle inter-components.

**Ma recommandation:** Limiter l’utilisation du store aux variables «&nbsp;globales&nbsp;»: user, session, httpClient, et c’est tout.

Le reste doit être des states de classe, local à la classe. ça évite la pollution entre components.

De même, il faudrait voir si ESLint pourrait nous aider à prévenir le développeur.

**Unification du comportement des styles**

Le styling dans le frontend n’a pas nécessairement été enforce au niveau eslint, et c’est une erreur à mon sens.

Certains components utilisent du style inline (`style={{}}`), ce qui est une mauvaise pratique en terme de performance car un objet est re-créé à chaque render.

Aussi, ces styles sont difficilement modifiable pour gérer le responsive.

**Ma recommandation** : des fichiers de style en .css (un pour chaque feature en gros), qui sont importés dans le component.

Les media queries deviennent possible et permettent de gérer les petits/grands devices:

![Screenshot 2023-04-28 at 12.08.20](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/9/98f07dc53e77c1b7187484384614238e6b6e57d5.png)

**Plus de règles ESLint pour accélérer les reviews de PR**

Je me suis rendu compte en faisant la review de la dernière PR de @bertrandda que je faisais souvent les mêmes remarques sur le code front dans les PRs (attention aux fonctions inline, style inline, etc…), et que ces feedbacks pourraient être dans ESLint pour que les reviews aillent plus vite 🙂

[@contributors](https://community.gladysassistant.com/groups/contributors) : Qu’en pensez-vous ? D’autres retours sur le frontend ? 🙂

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 1, 2023, 4:38 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/2 "2023-05-01T04:38:18Z")

</div>

Bon je me suis chauffé aujourd’hui, j’ai mis à jour ESLint server-side notamment côté JSDoc

> <https://github.com/GladysAssistant/Gladys/pull/1764>
>
> \### Pull Request check-list
> 
> To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items:
> 
> \- \[\] If your changes affects code, did your write the tests?
> \- \[\] Are tests passing? (\`npm test\` on both front/server)
> \- \[\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front)
> \- \[\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to \[the community\](https://community.gladysassistant.com/) for testing before merging.
> \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)
> \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com).
> \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com).
> 
> NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.
> 
> \### Description of change
> 
> Please provide a description of the change here. It's always best with screenshots, so don't hesitate to add some!

ça fait beaucoup de changements, mais les erreurs sont beaucoup plus claires maintenant

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 1, 2023, 6:36 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/3 "2023-05-01T06:36:49Z")

</div>

J’ai commencé une PR pour rajouter un warning sur l’utilisation du decorator `@connect` (et remplacer par l’appel de fonction)

113 warnings pour l’instant :

 ![Screenshot 2023-05-01 at 13.36.17](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/e/eb46025edbfed1367edee3776aa3eab31659bc63.png)

Travail de fourmi mais j’avance vite 😛

> <https://github.com/GladysAssistant/Gladys/pull/1766>
>
> \### Pull Request check-list
> 
> To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items:
> 
> \- \[\] If your changes affects code, did your write the tests?
> \- \[\] Are tests passing? (\`npm test\` on both front/server)
> \- \[\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front)
> \- \[\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to \[the community\](https://community.gladysassistant.com/) for testing before merging.
> \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)
> \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com).
> \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com).
> 
> NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.
> 
> \### Description of change
> 
> Please provide a description of the change here. It's always best with screenshots, so don't hesitate to add some!

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 1, 2023, 8:21 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/4 "2023-05-01T08:21:22Z")

</div>

Du coup pour l’instant j’ai rajouté 2 règles :

 ![Screenshot 2023-05-01 at 15.19.46](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/c/c766ee734a77798f28a32bc08c465c7e3f2fdae4.png)

1. Un warning pour les styles inline
2. Une erreur pour les décorateurs `@connect`
3. Pour plus tard, mettre un gros warning sur l’utilisation du `store.setState` pour pousser à l’utilisation des setState locaux aux components

Tout est fixé dans cette PR : [Upgrade front Eslint, add warning on @connect decorator by Pierre-Gilles · Pull Request #1766 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/pull/1766)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 1, 2023, 8:35 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/5 "2023-05-01T08:35:09Z")

</div>

J’ai mergé ces 2 PRs !

Ceux qui travaillent sur des PRs Gladys en ce moment (@AlexTrovato, @bertrandda, @Pti_Nico, @euguuu, @Romuald_Pochet ), je vous recommande de rebase vos branches, faire un coup de npm install (server/front), et faire un coup d’Eslint pour vérifier que votre code est à jour 🙂

Si vous avez un souci pour faire les changements, n’hésitez pas !

---

<div class="post-metadata">

**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\
**Post date:** [Mai 1, 2023, 6:49 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/6 "2023-05-01T18:49:39Z")

</div>

Super, je soutiens ton action.  
Maintenant à nous de faire en sorte de corriger les warning intégration par intégration, ou t’es chaud et tu t’en charges @pierre-gilles ?

---

<div class="post-metadata">

**Author:** ![Romuald\_Pochet](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/romuald_pochet/32/6441_2.png) [@Romuald\_Pochet](https://community.gladysassistant.com/u/Romuald_Pochet)\
**Post date:** [Mai 1, 2023, 7:31 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/7 "2023-05-01T19:31:38Z")

</div>

Bonsoir,

J’ai commencé à inclure les modifications dans l’intégration zwave-js-ui et j’ai un soucis avec la méthode suivante:

```auto
/**
* @description Return array of Nodes.
* @param {string} orderDir - Ordering.
* @param {string} search - Keyword to match.
* @returns {Array} Return list of nodes.
* @example
* const nodes = zwaveManager.getNodes();
function getNodes({ orderDir = undefined, search = undefined } = {}) {

```

Suite à la mise à jour de SE Lint, j’ai l’erreur suivante:

```auto
  30:1 error @param "search" does not match an existing function parameter jsdoc/check-param-names

```

Une idée?

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 2, 2023, 2:42 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/8 "2023-05-02T02:42:22Z")

</div>

@Romuald_Pochet Oui, ce n’est pas des paramètres de fonction que tu décris, c’est un objet !

Il faut donc faire de cette manière :

 ![Screenshot 2023-05-02 at 09.41.30](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/3/3ce8afaabd79864ed004b37e0a86c071548a6e5b.png)

D’ailleurs petit feedback, le `= undefined` n’est pas utile, car si tu ne spécifie pas de orderDir, ça sera undefined de toute façon 🙂

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 2, 2023, 2:46 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/9 "2023-05-02T02:46:56Z")

</div>

> [@AlexTrovato](#):
>
> Maintenant à nous de faire en sorte de corriger les warning intégration par intégration, ou t’es chaud et tu t’en charges @pierre-gilles ?

J’ai tout corrigé dans les 2 PRs hier 🙂

La seule chose que je n’ai pas faite, c’est d’activer la règle ESLint pour mettre un warning sur les utilisations de unistore (fichier `actions.js`), car ça créeait 600 warnings

A l’avenir, essayez de ne plus utiliser ces fichiers `actions.js` au profit des states locaux, et si vous avez un peu de temps, migrez progressivement les components existants 🙂 Après, c’est pas non plus la priorité, c’est plus une guideline pour le futur

---

<div class="post-metadata">

**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\
**Post date:** [Mai 2, 2023, 6:18 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/10 "2023-05-02T18:18:45Z")

</div>

Je parlais d’aider à fixer les 146 warnings côté front, principalement sur l’utilisation de l’attribut «&nbsp;style&nbsp;» : «&nbsp;Using inline style is not recommended. Please use a .css file&nbsp;»  
Il y a également les warning des promises pour «&nbsp;Prefer await to then()/catch()/finally()&nbsp;»

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Mai 3, 2023, 2:06 UTC](https://community.gladysassistant.com/t/frontend-amelioration-diverses-experience-developpement/8125/11 "2023-05-03T02:06:04Z")

</div>

Ah effectivement ! Oui sur ceux là je suis preneur d’aide, après pour moi c’est pas une priorité de faire tout d’un coup, on peut faire en progressif au fil de l’eau 🙂

Pour moi il y a d’autres priorités de DEV en ce moment, typiquement le chantier Zigbee que t’as commencé pour sélectionner la marque de clé USB, c’est un truc avec plus de valeur ajouté pour l’utilisateur parce que ça bloque tous ceux qui commencent sur Gladys (vu que Domadoo ne vend plus que le Dongle Sonoff-E) 😛