Design & Développement web - Le topic des canards qui mangent des cookies

**Orhin** · 09/01/2023, 19h10

Envoyé par deathdigger

J'ai un peu simplifié le code, pour ça que je passe par des any.

Pas de soucis, pour des tests ça se fait sans soucis, mais je conseille d'éviter au maximum.
On a l'impression de gagner du temps au départ, sauf qu'on se retrouve rapidement à ne plus savoir quelles structures de données on manipule vraiment (surtout lors des refactoring).

Envoyé par Awake

Par contre Orhin, je trouve ton code un peu difficile à decoder, je l'aurais fait de facon complètement différente pour le même resultat, en 10 lignes au lieu de 3 par contre.

Question d'habitude je suppose, perso c'est plus vos exemples avec des variables intermédiaires que je trouve plus complexes, car il faut garder mentalement plus d'éléments en tête pour comprendre le flow complet de la fonction.
Je préfère l'approche "fonctionnelle" où ne fait qu'enchainer des opérations de transformation.

Le fait que ce soit en 10 lignes ou 3 ne change pas grand chose pour le coup, car ça va dépendre des conventions d'écritures (garder systématiquement les { ou non, quantité de saut de ligne, etc).

Après c'est peut être le mix await/then qui rend la lecture moins facile.

On peut modifier pour n'utiliser que l'un ou l'autre :

Code:

const items = await this.getData()
this.datagrid.dataset = await Promise.all(items.map(async item => {
    const y = await this.getData2(item.TOTO, '001')
    return {...item, TATA: '001', TUTU: y.TUTU}
})

vs

Code:

this.getData().then(items =>
    Promise.all(items.map(item =>
        this.getData2(item.TOTO, '001').then(y => ({...item, TATA: '001', TUTU: y.TUTU}))
    )
).then(result => this.datagrid.dataset = result)

**deathdigger** · 10/01/2023, 08h21

J'aime bien la dernière version, ça permet de ne pas passer par un "objet intermédiaire", merci !

Par contre, pour le Promise.all, il ne s'exécute que si tout est résolu. Mais imaginons que getData2 envoie une erreur non bloquante. Si je veux mettre 0 à TUTU dans ce cas, il faut que je fasse un resolve({TUTU=0}), je ne peux pas faire un reject({TUTU=0}), c'est bien ça ?

Question subsidiaire: le ...item, ça veut dire quoi ? C'est un pointeur ?

**Fastela** · 10/01/2023, 10h38

Envoyé par deathdigger

Question subsidiaire: le ...item, ça veut dire quoi ? C'est un pointeur ?

C'est le spread operator.

**Awake** · 10/01/2023, 11h45

Envoyé par deathdigger

J'aime bien la dernière version, ça permet de ne pas passer par un "objet intermédiaire", merci !

Par contre, pour le Promise.all, il ne s'exécute que si tout est résolu. Mais imaginons que getData2 envoie une erreur non bloquante. Si je veux mettre 0 à TUTU dans ce cas, il faut que je fasse un resolve({TUTU=0}), je ne peux pas faire un reject({TUTU=0}), c'est bien ça ?

Question subsidiaire: le ...item, ça veut dire quoi ? C'est un pointeur ?

Si tu as un getData2 edt rejeté, tu peux l'intercepter avec un .catch et faire le traitement qui va bien. Vu que l'exception a été interceptée, la Promise est considérée résolue et passe dans Promise.all().

Tu peux aussi regarder du côté de https://developer.mozilla.org/en-US/...ise/allSettled si tu veux que le rejet ne soit pas intercepté.

**deathdigger** · 10/01/2023, 11h51

Envoyé par Fastela

C'est le spread operator.

Merci, faut que je regarde un peu plus pour comprendre par rapport à l'écriture d'Orhin.

Envoyé par Awake

Si tu as un getData2 edt rejeté, tu peux l'intercepter avec un .catch et faire le traitement qui va bien. Vu que l'exception a été interceptée, la Promise est considérée résolue et passe dans Promise.all().

Tu peux aussi regarder du côté de https://developer.mozilla.org/en-US/...ise/allSettled si tu veux que le rejet ne soit pas intercepté.

Oui, c'est ce que j'ai fait (avec un resolve).

**William Vaurien** · 10/01/2023, 11h57

@Awake il faut que tu branches un nouvel expertCPC ici

Je viens de m'amuser à balancer vos questions et bouts de code dans chatGPT, c'est très impressionant !

que signifie ...item ?

...item est une syntaxe de décomposition (ou spread) d'objet en JavaScript. Il permet de copier les propriétés d'un objet existant vers un nouvel objet.

Dans ce cas précis, l'opérateur de décomposition est utilisé pour créer un nouvel objet qui a les mêmes propriétés que l'objet d'origine appelé "item", et qui ajoute également les propriétés TATA et TUTU.

En utilisant l'opérateur de décomposition, il permet de ne pas muter l'objet original, cela crée un nouvel objet qui contient les même propriétés de l'objet d'origine et les propriétés supplémentaires TATA et TUTU
Cela permet d'éviter de modifier accidentellement les données originales et de maintenir l'intégrité des données.

**Orhin** · 10/01/2023, 16h05

Envoyé par deathdigger

J'aime bien la dernière version, ça permet de ne pas passer par un "objet intermédiaire", merci !

À noter que la première version que j'avais proposé faisait la même chose.
J'ai juste remplacé un await pas le finally.
D'ailleurs le "finally" ici pourrait tout à fait être remplacé par un "then" vu qu'on veut catch les erreurs avant.

Envoyé par deathdigger

Par contre, pour le Promise.all, il ne s'exécute que si tout est résolu. Mais imaginons que getData2 envoie une erreur non bloquante. Si je veux mettre 0 à TUTU dans ce cas, il faut que je fasse un resolve({TUTU=0}), je ne peux pas faire un reject({TUTU=0}), c'est bien ça ?

Faut que tu catches l'erreur de ton "getData2" :

Code:

this.getData().then(items =>
    Promise.all(items.map(item =>
        this.getData2(item.TOTO, '001')
            .then(y => ({...item, TATA: '001', TUTU: y.TUTU}))
            .catch(() => ({...item, TATA: '001', TUTU: 0}))
    )
).then(result => this.datagrid.dataset = result)

À noter que si TUTU n'a pas de valeur valide lors du catch mieux vaut lui mettre comme valeur undefined ou null.
Mais ça va dépendre de ton code métier ça, c'est peut être tout à fait logique d'avoir 0 dans ce cas.

Envoyé par deathdigger

Question subsidiaire: le ...item, ça veut dire quoi ? C'est un pointeur ?

Comme l'a dit Fastela, c'est le spread operator.
Je te conseille d'apprendre son fonctionnement car c'est quelque chose que tu peux rencontrer très souvent dans le JS/TS moderne.

Ce qui se passe lorsque j'écris "{...item, TATA: '001', TUTU: y.TUTU}" :
1) je créé un nouvel objet (avec les {})
2) je colle dedans tous les membres de "item" (avec le "...item")
3) je déclares d'autres membres ("TATA: '001'"), si certains sont déjà présents dans l'étape 2 alors les valeurs sont écrasées

Là c'est on utilisation pour un objet.

Tu vas le trouver dans 5 autres cas principalement :
1) Pour faire la même chose avec des tableaux.

Code:

const toto = [1, 2]
const titi = [4]

const tutu = [...toto, 3, ...titi, 5]
// tutu vaut [1, 2, 3, 4, 5]

2) Pour destructurer partiellement un tableau

Code:

const toto = [1, 2, 3, 4]
const [titi, tutu, ...tata] = toto

// titi vaut 1, tutu vaut 2, tata vaut [3, 4]

3) Pour destructurer partiellement un objet

Code:

const toto = { tata: 1, titi: 2, tutu: 3 }
const { tata, ...tete } = toto

// tata vaut 1, tete vaut { titi: 2, tutu: 3 }

4) Pour récupérer les arguments d'une fonction dans un tableau

Code:

const maFonction = (...args) => {
    console.log(args)
}

maFonction(1, 2, 3)
// args vaut [1, 2, 3]

C'est pratique pour les fonctions qui prennent un nombre non déterminé d'arguments (par exemple pour faire le max parmis N nombres)

5) À l'inverse pour passer un tableau en arguments distinct d'une fonction

Code:

const maFonction = (a, b, c, d) => {
    console.log(a, b, c, d)
}

const args = [1, 2, 3]
maFonction(...args)
// a vaut 1, b vaut 2, c vaut 3, d vaut undefined

Envoyé par William Vaurien

@Awake il faut que tu branches un nouvel expertCPC ici

Je viens de m'amuser à balancer vos questions et bouts de code dans chatGPT, c'est très impressionant !

Pas mal en effet, par contre la réponse devrait quand même prévenir que ça ne fait pas de copie en profondeur.

**deathdigger** · 10/01/2023, 16h37

Ce qui n'est pas logique (selon mon cerveau

), c'est que tu crées un nouvel objet et que malgré ça, le result te renvoie le bon résultat.
Si je devais faire une analogie de ce que je comprends en le mettant en C#, j'interprète ce que tu me dis comme ça :

Code:

List<Toto> totos = new List<Toto>();
totos.add(new Toto {TATA=1, TITI="CACA"});
Toto xx= new Toto();
xx= totos[0];
xx.TITI = "CUCU";

Valeur de totos[0].TITI : "CUCU"

Alors que pour que ça soit vrai il faudrait le faire comme ça :

Code:

List<Toto> totos = new List<Toto>();
totos.add(new Toto {TATA=1, TITI="CACA"});
Toto xx = totos[0];
Toto.TITI = "CUCU";

**Orhin** · 10/01/2023, 16h52

Je ne suis pas sur de comprendre ce que tu ne comprends pas.
Ce code :

Code:

this.getData().then(items =>
    Promise.all(items.map(item =>
        this.getData2(item.TOTO, '001').then(y => ({...item, TATA: '001', TUTU: y.TUTU}))
    )
).then(result => this.datagrid.dataset = result)

Ne fait pas ce que tu as marqué (que ce soit dans l'exemple 1 ou 2).

Il fait plutôt un truc du genre si tu as des fonctions synchrones :

Code:

List<Item> items = getData();
List<IItemOUT> result = new List<IItemOUT>();

for (item of items) {
   Y yy = getData2(item.TOTO, '001');
   IItemOUT xx= new IItemOUT();
   xx.TOTO = item.TOTO;
   xx.TITI = item.TITI;
   xx.TATA = '001';
   xx.TUTU = x.TUTU;
   totos.add(xx);
}

this.datagrid.dataset = result

**deathdigger** · 10/01/2023, 16h58

Oui j'ai capté, c'est le map qui fait le boulot (et va combiner item avec le nouvel objet crée)

**Orhin** · 10/01/2023, 17h21

Oui, map prend un tableau et une fonction en entrée et renvoi un nouveau tableau dont les éléments sont ceux du premier tableau modifié par la fonction.

Je te conseille de bosser un peu les fonctions standard des Array en JS, avec le spread c'est un truc que tu vas croiser souvent en JS moderne.
Les plus utiles/courantes : map, filter, some, join, slice, reduce, sort.

À noter que "reverse" et "sort" modifient le tableau original au lieu d'en renvoyer un nouveau (oui, c'est complètement con).

**deathdigger** · 11/01/2023, 08h14

Je pense qu'ils sortiront, en standard, une fonction qui renverra un nouveau tableau à un moment. Ce qui me fait un peu flipper, c'est que ça évolue tout le temps et en profondeur. Je pensais que ça s'était calmé il y'a quelques années, mais non.
Aussi, j'en ai besoin pour certains développements ponctuels dans mon taf, mais je suis plus sur d'autres technos 99% du temps. Du coup, faut que je me force à pratiquer pour garder ça frais. J'avais suivi une formation sur Material Design qui était assez cool et les formations Pluralsight sont vraiment top sur le sujet, mais si je ne pratique pas pendant plus d'un an ou deux, c'est mort, je perds tout. Enfin, je serai capable de reprendre du code, mais pas de repartir from scratch.

**war-p** · 11/01/2023, 23h33

Envoyé par deathdigger

Je pense qu'ils sortiront, en standard, une fonction qui renverra un nouveau tableau à un moment. Ce qui me fait un peu flipper, c'est que ça évolue tout le temps et en profondeur. Je pensais que ça s'était calmé il y'a quelques années, mais non.
Aussi, j'en ai besoin pour certains développements ponctuels dans mon taf, mais je suis plus sur d'autres technos 99% du temps. Du coup, faut que je me force à pratiquer pour garder ça frais. J'avais suivi une formation sur Material Design qui était assez cool et les formations Pluralsight sont vraiment top sur le sujet, mais si je ne pratique pas pendant plus d'un an ou deux, c'est mort, je perds tout. Enfin, je serai capable de reprendre du code, mais pas de repartir from scratch.

Map() en JS correspond grosso modo au select en C#

- - - Mise à jour - - -

Envoyé par Orhin

Oui, map prend un tableau et une fonction en entrée et renvoi un nouveau tableau dont les éléments sont ceux du premier tableau modifié par la fonction.

Je te conseille de bosser un peu les fonctions standard des Array en JS, avec le spread c'est un truc que tu vas croiser souvent en JS moderne.
Les plus utiles/courantes : map, filter, some, join, slice, reduce, sort.

À noter que "reverse" et "sort" modifient le tableau original au lieu d'en renvoyer un nouveau (oui, c'est complètement con).

Reverse() et sort() ne font pas partie de la même famille de fonctions, les autres sont des lambdas, celles-ci sont des restes des anciennes version de JS

**deathdigger** · 12/01/2023, 11h31

Je reviens avec une question

:
J'envoie un objet entre un composant et un autre. Pour ce faire, je me suis basé sur cette méthode : https://stackblitz.com/edit/angular-cy6e69

Ça me convient et ça fait ce que je veux, mais… Est-ce la bonne façon de faire ?
En l'occurrence, j'ai une sélection dans un tableau, qui va lancer une méthode dans le deuxième composant. N'y a t'il pas possibilité à partir du deuxième composant de s'abonner à l'event du premier (y'a un EventEmitter) ? Si oui, une méthode est-elle meilleure qu'une autre ou est-ce juste une question de goût ?

**Fastela** · 12/01/2023, 16h19

Comme toujours, c'est souvent un mix entre ta façon de faire personnelle et la modularité du truc.

J'y connais rien en Angular, mais dans le monde Vue, tu peux passer des données d'un composant parent à un composant enfant via des props, et tu peux trigger des événements d'un composant parent depuis un composant enfant via des Events.

Dans un contexte simple ça suffit, mais dès que tu veux agrandir cette communication à une génération plus grande (grands-parents / petits enfants), ou que tu as besoin de données transverses à ton application, il est conseillé de passer par un state manager (un Store).

**Dross** · 12/01/2023, 16h31

Dans Angular on a des services aussi, pour ce genre d'appel entre deux composants qui ne sont pas directement reliés, ça peux être une bonne idée. Et tu pourra y mettre en place des événements sur lesquels t'abonner.

Sinon tu peux toujours chaîner avec les @Input/@Output comme tu as fait, mais dans ce cas là ne passe pas le composant lui même et chaîne les deux à partir du composant qui fait le lien (pas toujours top, et dans ce cas là le service est plutôt recommandé).

**Orhin** · 12/01/2023, 17h08

Alors je dirais déjà que tu es parti sur la pire solution possible.

Un composant ne doit jamais manipuler un autre directement comme tu le fais.
Ça lie beaucoup trop l'implémentation de tes 2 components et ça rend les refactoring très chiant.

Comme l'a dit Dross, il te faut un intermédiaire pour les faire communiquer entre eux.
En Angular (et de façon assez similaire en React ou Vue), t'as globalement 2 choix :
- soit c'est un component parent
- soit c'est un objet/classe en dehors de l'arborescence des components (Service Angular, Context React, Store Redux/NGRX/NGINX/truc en Angular/React/Vue)

Dans ton cas simple, le mieux reste de passer par le parent.
C'est ce qu'on fait en général pour des données à faire passer de façon "locale" (component proche dans l'arborescence).

J'ai fork ton exemple pour montrer le résultat : https://stackblitz.com/edit/angular-njzpjd

Autre chose, c'est le type "string" qu'il faut utiliser, pas "String".

Envoyé par war-p

Reverse() et sort() ne font pas partie de la même famille de fonctions, les autres sont des lambdas, celles-ci sont des restes des anciennes version de JS

Yep je sais, mais ils auraient pu profiter de ES20XX pour améliorer ça.
Pas changer leur comportement par souci de retrocompatibilité mais à minima proposer des méthodes alternatives.

**deathdigger** · 12/01/2023, 17h30

Ok, je comprends, merci ! Ça me semble plus propre ainsi, effectivement. Pour l'exemple, à la base il ne vient pas de moi, je l'ai récupéré sur StackOverflow.

**Awake** · 15/01/2023, 12h17

Bon, je déchante pas mal pour trouver une mission freelance. Je suis inscrit sur comet et creme de la creme, mais les missions demandent toutes du présentiel partiel, ce qui me gave. mais surtout je me rend compte que mes skills ne sont pas "sexy" : en full stack js, tout le monde cherche du nest + angular ou react. Cerise sur le gâteau, j'ai supprimé mon compte linked in avec les contacts de 10 ans de CDI il y a quelques années (oui, c'était très très con

), donc c'est la galère pour être crédible.

Si y'a un truc auquel je m'attendais pas, c'est à galérer à trouver du taff.

**Orhin** · 15/01/2023, 12h30

Tu cherches quoi comme combo full stack si c'est pas indiscret ?

Pour le full-remote ça m'étonne pas, quand j'ai changé de taf en aout l'année dernière la majorité des offres demandaient aussi du présentiel partiel.
J'ai fini par trouver mais c'est plus l'exception que la règle.

J'ai l'impression que c'est surtout les startup et les boites américaines qui étaient ouvertes à ça.
D'ailleurs tu cherches que des missions en France ou t'es ouvert à l'international ? Si t'as un niveau correct d'anglais (et que ça t'emmerdes pas^^) ça doit pas mal augmenter les possibilités.

**Awake** · 15/01/2023, 12h37

Voilà ce que je mets en avant sur mon CV :

Oui j'ai une bonne maîtrise de l'anglais, mais ça me semble encore plus difficile de trouver une mission à l'international, je ne saurais pas par où commencer (candidatures spontanées ?).

**Orhin** · 15/01/2023, 12h57

Envoyé par Awake

Voilà ce que je mets en avant sur mon CV :

https://media.discordapp.net/attachm...115-123338.png

Joli.
Mais si t'as pas de framework JS moderne (React, Angular ou Vue), le côté full-stack JS risque d'être compliqué en effet.
Après tu peux peut être chercher des missions plus orientées backend mais en étant amené à toucher au front de temps en temps ?

Envoyé par Awake

Oui j'ai une bonne maîtrise de l'anglais, mais ça me semble encore plus difficile de trouver une mission à l'international, je ne saurais pas par où commencer (candidatures spontanées ?).

Alors pour le freelance je sais pas trop, mais doit surement y avoir des plateformes dédiées.
Mais le plus simple reste encore de ré-ouvrir un compte linkedin, de bien le remplir et de le marquer en mode "recherche d'emploi" (normalement tu peux préciser que tu cherches du freelance et pas un CDI).
C'est ce que j'avais fait pour un poste senior frontend React/Angular et j'étais spammé d'offres avec en gros ~1/5 d'inter.

**tenshu** · 15/01/2023, 18h16

Rouvre un compte LinkedIn, rajoute quelques contacts, mets toi e n mode "open to work".
Avec cette liste de skills tu vas rapidement crouler sous les.messages de recruteurs bien relous.

**Dross** · 16/01/2023, 07h43

Ça manque un peu le framework JS en effet, si ça t'intéresse je peux te filer un cookbook sur Angular, avec un peu d'expérience (que tu semble avoir) tu pourra couvrir les bases très rapidement et rajouter une petite ligne qui te fait peut-être défaut.

**deathdigger** · 16/01/2023, 08h05

Sinon, tu peux te prendre 1 mois d'abonnement sur PluralSight et torcher les formations Angular. Vu que tu connais déjà TypeScript, ça va être réglé en même pas une semaine.

**Awake** · 16/01/2023, 11h16

Merci pour vos réponses !

Je vais tenter la solution "recherche un job" sur linked in.

En fait j'ai jamais été convaincu par les frameworks JS... je trouve l'approche composant obsolète, souvent on se retrouve avec des soucis de perf sur les gros projets. Et j'ai l'impression que dans 99% des cas du vanilla JS fera plus que largement l'affaire.

Mais bon, si il faut ça

Vous diriez que quel framework est le plus populaire ? J'ai toujours trouvé Vue plus sexy, mais autant se former sur celui qui aura le plus de chances de me trouver un job sympa.

PluralSight à l'air sympa, mais ils ne donnent pas de certifications, si ? Je préfère me former sur un projet concret, seul, si c'est le cas.

**deathdigger** · 16/01/2023, 11h26

Ça peut te préparer aux certificats, mais pas sur les devs (à part Java, sinon c'est plus les certifs réseaux, infra et cloud). Je propose ce site car j'y ai trouvé les formateurs très clairs et très compétents (ce n'est pas un placement de produit

). Il y'a des formations Vue.js également, mais je ne les ai pas testé.
T'as un essai gratuit de 10 jours si besoin de te faire un avis (ça se trouve, ça te suffira pour être formé

).

**Orhin** · 16/01/2023, 12h15

Envoyé par Awake

En fait j'ai jamais été convaincu par les frameworks JS... je trouve l'approche composant obsolète, souvent on se retrouve avec des soucis de perf sur les gros projets. Et j'ai l'impression que dans 99% des cas du vanilla JS fera plus que largement l'affaire.

Y'a zéro soucis de perfs si les projets sont bien foutus.
Par contre, comme avec toutes les grosses boites à outil, c'est facile de faire de la merde.

Et pour les component, au contraire je trouve ça totalement essentiel dans le web moderne (même sans framework en fait).
C'est ce qui permet de séparer au mieux la manipulation des données de celle du dom (que tu ne manipules même plus directement avec React/Angular/Vue).

C'est très pratique pour faire une architecture de type "one way dataflow" :

Ce qui, d'expérience, est le plus maintenable et debugable sur le web.

Envoyé par Awake

Vous diriez que quel framework est le plus populaire ? J'ai toujours trouvé Vue plus sexy, mais autant se former sur celui qui aura le plus de chances de me trouver un job sympa.

Dans l'ordre : React > Angular > Vue

**Awake** · 16/01/2023, 12h34

Envoyé par Orhin

Y'a zéro soucis de perfs si les projets sont bien foutus.
Par contre, comme avec toutes les grosses boites à outil, c'est facile de faire de la merde.

Et pour les component, au contraire je trouve ça totalement essentiel dans le web moderne (même sans framework en fait).
C'est ce qui permet de séparer au mieux la manipulation des données de celle du dom (que tu ne manipules même plus directement avec React/Angular/Vue).

C'est très pratique pour faire une architecture de type "one way dataflow" :
https://d33wubrfki0l68.cloudfront.ne...4b94e55b97.png
Ce qui, d'expérience, est le plus maintenable et debugable sur le web.

Dans l'ordre : React > Angular > Vue

J'ai longtemps été éduqué à l'ancienne, avec une séparation très claire des vues, metier, data et style (renforcé par mon xp backend). Chacun sa fonction, chacun dans des fichiers différents, chacun compilé avec des outils différents

Je regarde les composants React là, le JSX/HTML est renvoyé par une fonction javascript, avec les events bindés sur les tags HTML

. Je sais pas, je trouve ça brouillon.

Enfin c'est surement plus une question d'habitude qu'autre chose.

**Dross** · 16/01/2023, 18h38

Regarde Angular alors, la séparation MV* est plus propre que React et le framework est clairement influencé par les pratiques d'architecture du monde du desktop/backend.

(j'ai jamais été impressionné par React pour les mêmes raisons)

L'intérêt d'un framework par rapport à du pur js c'est surtout la normalisation : pour une entreprise, prendre un dev sur le framework X c'est l'assurance que le gus ne sera pas dépaysé quand il arrivera sur le projet. Alors qu'avec du pur js t'est forcément face à la cuisine local que tu dois commencer à comprendre avant de faire quoi que ce soit.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages