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

**Dynames** · 06/09/2017, 10h32

Oui, c'est vrai que Observable,je ne comprends pas encore totalement son fonctionnement. Mais c'est aussi parce que j'ai l'impression que c'est une surcouche à notre code. Quand on pourrait manipuler des Article[] et Article directement.

Maintenant ok,je vais apprendre à l'utiliser.

Remarque sur le load/get. Je vois bien que tu veux loader les articles dnas le buffer, mais a quel moment le service sait que this.articles charge ses données?

Tu utilise le load et fait un return direct.
Dans le get tu cherches un this.articles. mais jamais tu n'affectes une valeur a this.articles.

Au final ton load ne fait qu'aller chercher les données, les retourne, mais n'en fait rien (aucune affectations).

Ne manque t'il pas une affectation dans le load du service?

Une remarque sur le code de update (et delete du coup) dans le service.

this.articles étant un ReplaySubject de Article[], le findNext (a => a) ramène logiquement un Article[].

Comme this.articles ne contient qu'un enregistrement, j'ai fait

Code:

this.articles[0].findNext()

qui corrige le soucis.

Un ppoint, qui vient de moi ici sur le GetArticle.

Je l'ai écrit tel quel car ca semblait être la norme partout mais au final, je n'ai pas de fichier JSON spécifique pour un Article.

Sur un id spécifique, mon code cherche un assets/articles.json/1 qui n'existe pas.

Donc,est ce que ma manière de faire n'est pas la bonne ici?

J'imagine que ce système est pour prévoir la future utilisation d'un vrai WS. Maintenant, comment faire pour mon cas en json uniquement?

**Flipmode** · 06/09/2017, 10h33

Salut je post peut-être dans la mauvais section mais je tente :

Y'a un canard qui pourrais me faire une site e-commerce(simple) ? un canard pro(parce que création d'entreprise) et j'ai un budget.

Au cas ou : https://graphiste.com/projects/9152-...ogo-entreprise

Pour plus de détails MP !

Merci ou désolé

**Orhin** · 06/09/2017, 14h22

@Flipmode : je pense que c'est ici que t'aura le plus de chance de croiser quelqu'un de compétent pour ça en effet.
gl & hf !

Envoyé par Dynames

Oui, c'est vrai que Observable,je ne comprends pas encore totalement son fonctionnement. Mais c'est aussi parce que j'ai l'impression que c'est une surcouche à notre code. Quand on pourrait manipuler des Article[] et Article directement.

T'as déjà fait de la programmation fonctionnelle ? Si non, effectivement t'as quelques trucs qui peuvent être déroutants.
Oui on pourrait manipuler les Article[] et Article directement, mais c'est bien pour des données qui sont gérées à un seul endroit.
L'intérêt des Observable c'est de faire des flux de données auxquels tous les services/component qui les utilisent peuvent s'abonner.
Comme ça tu peux réagir au changement de ta liste d'Article[] sans devoir faire des boucle d'update et des appels explicites.

Envoyé par Dynames

Remarque sur le load/get. Je vois bien que tu veux loader les articles dnas le buffer, mais a quel moment le service sait que this.articles charge ses données?

Je ne suis pas sur de comprendre la question.
Le service n'a rien à "savoir".
this.articles c'est un bête tuyau, tu mets des données en entrée et tu les récupères en sortie.

Envoyé par Dynames

Tu utilise le load et fait un return direct.
Dans le get tu cherches un this.articles. mais jamais tu n'affectes une valeur a this.articles.

Au final ton load ne fait qu'aller chercher les données, les retourne, mais n'en fait rien (aucune affectations).

Ne manque t'il pas une affectation dans le load du service?

Ah oui effectivement j'ai zappé le .next().
En même temps j'ai tout écris dans mon post sans tester en vrai, donc c'pas étonnant si il manque des choses.

Version corrigée de loadArticles :

Code:

loadArticles(): Observable<Article[]> {
  return this.http.get(this.articlesUrl)
      .map(response => {
         const res = response.json();
         this.articles.next(res);
         return res;
       })
      .catch(this.handleError);
  }

Du coup, lorsque tu fais un loadArticles, ça envoie une valeur dans ton ReplaySubject.
Et tous ceux qui ont souscris à ce ReplaySubject recevront cette nouvelle valeur.

Envoyé par Dynames

Une remarque sur le code de update (et delete du coup) dans le service.

this.articles étant un ReplaySubject de Article[], le findNext (a => a) ramène logiquement un Article[].

Comme this.articles ne contient qu'un enregistrement, j'ai fait

Code:

this.articles[0].findNext()

qui corrige le soucis.

Envoyé par Dynames

J'imagine que ce système est pour prévoir la future utilisation d'un vrai WS. Maintenant, comment faire pour mon cas en json uniquement?

Ah oui effectivement, l'appel tel qu'il est écrit est prévu pour un des WS REST.
Dans ton cas le plus simple c'est de faire :

Code:

getArticle(id: number): Observable<Article> {
   return this.articles.map(articles => {
      return articles.find(article => article.id === id);
   })
  }

En gros tu retournes ta liste d'articles (venant de ton buffer) filtrée.
Comme ça, dès que tu mets à jour le buffer, ça va aussi propager le changement dans l'Observable<Article> récupéré via getArticle().

**Dynames** · 06/09/2017, 15h11

En même temps j'ai tout écris dans mon post sans tester en vrai, donc c'pas étonnant si il manque des choses.

C'est pour ça que je reste sous la forme de questions, ça aurait pu être aussi une erreur de ma part.

Envoyé par Orhin

Une remarque sur le code de update (et delete du coup) dans le service.

this.articles étant un ReplaySubject de Article[], le findNext (a => a) ramène logiquement un Article[].

Comme this.articles ne contient qu'un enregistrement, j'ai fait
Code:
this.articles[0].findNext()
qui corrige le soucis.

Me suis trompé, il s'agit bien d'un Observable<Number> qui est ramené.

En fait sur ton code

Code:

const index = this.articles.findIndex(a => a.id === article.id);

j'obtiens une preière erreur sur

Code:

a.id

, me disant que id n'existe pas sur Article[] et j'obtiens une erreur sur

Code:

if(index !== -1)

juste après.

Car l'opérateur !== n'est pas applicable entre un Observable<Number> et un Number. Logique.Comme j'ai mal interprété l'erreur, j'ai cru qu'un [0] sur this.articles reoudrait le problème. Mais non.

Sur le load, je n'ai toujours aucune données affichées dans ma liste. Je vois bien qu'il doit me manquer un truc mais je ne sais pas quoi.

Encore une fois, je ne vois pas l'affectation dans this.articles.

On met les données dans res. On dit this.articles.next(res), alors que res est vide pour moi, puisque jamais affecté. Et on dit retourne res.

En fait, moi j'imaginais dans le map, plus quelque chose comme

Code:

this.articles = response.json()

: en bon code TS evidemment, pas code à l'arrache. Mais en fait dnas le map actuel, je ne vois pas comment on affecte les données dans this.articles. Du cou la variables est vide, donc le getArticles renvoi également du vide.

J'ai commit.

**Orhin** · 06/09/2017, 15h32

Envoyé par Dynames

Me suis trompé, il s'agit bien d'un Observable<Number> qui est ramené.

En fait sur ton code

Code:

const index = this.articles.findIndex(a => a.id === article.id);

j'obtiens une preière erreur sur

Code:

a.id

, me disant que id n'existe pas sur Article[] et j'obtiens une erreur sur

Code:

if(index !== -1)

juste après.

Ah oui, c'est pas this.articles.findIndex qu'il faut mais articles.findIndex.
En fait c'est pas très clair car beaucoup de variables locales ont le même nom que le membre de la classe.
Forcément si j'écris de la merde, ça va pas t'aider à comprendre.

J'ai refait une version plus propre à ce niveau (dans mon IDE cette fois-ci pour éviter les erreur de syntaxe

) :

Spoiler Alert!

Code:

@Injectable()
export class ArticleService {

  private headers = new Headers({'Content-Type': 'application/json'});
  private articlesUrl = './assets/articles.json';

  // buffer qui va stocker la dernière version de la liste des articles
  // les components et les autres services peuvent s'y abonner
  private articlesBuffer: ReplaySubject<Articles[]> = new ReplaySubject<Articles[]>(1);

  constructor(private http: Http) {
  }

  loadArticles(): Observable<Article[]> {
    return this.http.get(this.articlesUrl)
      .map(response => {
        const res = response.json();
        this.articlesBuffer.next(res);
        return res;
      })
      .catch(this.handleError);
  }

  getArticles(): Observable<Article[]> {
    return this.articlesBuffer;
  }

  getArticle(id: number): Observable<Article> {
    const url = `${this.articlesUrl}/${id}`;
    return this.http.get(url)
      .map(response => response.json().data as Article)
      .catch(this.handleError);
  }

  createArticle(article: Article): Observable<Article> {
    // on récupère la dernière liste des articles dans le buffer et on la met à jour pour propager cette opération
    // le take(1) est là pour éviter une boucle infinie
    this.articlesBuffer.take(1).subscribe(articleList => {
      articleList.push(article);
      this.articlesBuffer.next(articleList);
    });
    return this.http
      .post(this.articlesUrl, JSON.stringify(article), {headers: this.headers})
      .map(res => res.json().data as Article)
      .catch(this.handleError);
  }

  updateArticle(article: Article): Observable<Article> {
    this.articlesBuffer.take(1).subscribe(articleList => {
      const index = articleList.findIndex(a => a.id === article.id);
      if (index !== -1) {
        articleList[index] = article;
        this.articlesBuffer.next(articleList);
      }
    });
    const url = `${this.articlesUrl}/${article.id}`;
    return this.http
      .put(url, JSON.stringify(article), {headers: this.headers})
      .map(() => article)
      .catch(this.handleError);
  }

  deleteArticle(article: Article): Observable<void> {
    this.articlesBuffer.take(1).subscribe(articleList => {
      const index = articleList.findIndex(a => a.id === article.id);
      if (index !== -1) {
        articleList.splice(index, 1);
        this.articlesBuffer.next(articleList);
      }
    });
    const url = `${this.articlesUrl}/${article.id}`;
    return this.http.delete(url, {headers: this.headers})
      .map(() => null)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

Envoyé par Dynames

Encore une fois, je ne vois pas l'affectation dans this.articles.

L'affectation de this.articles est faite à la déclaration du membre de la classe :

Code:

private articles: ReplaySubject<Articles[]> = new ReplaySubject<Articles[]>(1);

Envoyé par Dynames

On met les données dans res. On dit this.articles.next(res), alors que res est vide pour moi, puisque jamais affecté. Et on dit retourne res.

C'pas vraiment compatible ces 2 phrases.

**Dynames** · 06/09/2017, 15h47

C'pas vraiment compatible ces 2 phrases.

Oui je ne sais pas comment j'ai réussi à taper ça, mais du coup, je ne sais plus ce que je voulais dire...

En fait c'est pas très clair car beaucoup de variables locales ont le même nom que le membre de la classe.

Question d'habitude, mais c'est vrai que je m'y perds un peu de temps en temps ^^

Par contre, j'ai toujours rien d'affiché dans ma liste (idem si j'ajoute /1 à l'url). Donc, c'est bien que le this.articlesBuffer renvoyé par getArticles est vide non? Et que donc, il manquerait quelque chose dans le service non? Puisque c'est lui qui est utilisé dans le init du component, via getArticles().

**Orhin** · 06/09/2017, 15h56

Ah oui, encore un oubli de ma part (mais que tu aurais du repérer si tu suivais

).
Le buffer est bien vide en effet, car le load n'est jamais fait.

Dans ton component, le ngOnInit contient :

Code:

this.articleService.loadArticles();

Ce bout de code ne fait rien, vu qu'il retourne un Observable qui n'est pas souscrit.
Il faut donc mettre à la place :

Code:

this.articleService.loadArticles().subscribe();

**Dynames** · 06/09/2017, 16h03

Envoyé par Orhin

Ah oui, encore un oubli de ma part (mais que tu aurais du repérer si tu suivais

).
Le buffer est bien vide en effet, car le load n'est jamais fait.

Dans ton component, le ngOnInit contient :

Code:

this.articleService.loadArticles();

Ce bout de code ne fait rien, vu qu'il retourne un Observable qui n'est pas souscrit.
Il faut donc mettre à la place :

Code:

this.articleService.loadArticles().subscribe();

Ah, oui, le réflexe subscribe...

J'étais en train de me demander pourquoi le détail n'tait pas affiché. J'avais oublié que je n'ai pas typé dans ma classe Article. Donc mon id était un string...

Du coup, pas sur que ma classe (et le json) soient vraiment écrite comme il faut, même si elle joue son rôle.

Après, un simple String(id) règle l'affaire (pas forcément l'idéal, mais pour le moment, ça permet d'avoir la donnée.

**Mayalabielle** · 06/09/2017, 21h40

Ça à l'air extrêmement compliqué vos histoires, une raison de plus pour ne pas approcher ce framework.

**William Vaurien** · 07/09/2017, 09h39

sinon tu as le topic de l'assembleur de l'autre côté

Il manque un topic pour les devs non masochistes.

**Mayalabielle** · 07/09/2017, 09h53

Ouais j'ai vu

**Mayalabielle** · 07/09/2017, 10h20

Au fait, je me posais une question, quid du SEO pour les pages générées en client side par des frameworks (genre vuejs) ?

**Orhin** · 07/09/2017, 10h24

Non mais c'est surtout que le forum n'est pas vraiment le meilleur medium pour expliquer ce genre de chose.

En présentation IRL ça aurait pris 2h max ce que j'ai dit.

En gros faut voir le système comme ça :

1) Le service se charge de récupérer les données et les file au component pour que celui-ci les affiche.
service ---[données]---> component

2) Le component récupère les input utilisateur et transmet au service l'action à faire
service <---[action]--- component

3) Le service modifie lui même les données et renvois la version à jour au component
service ---[données]---> component

L'intérêt d'utiliser des Observable/ReplaySubject c'est que l'étape 3 est automatique, y'a pas besoin que le component face un appel explicite au service (ou que le service face un appel explicite au component) pour récupérer les nouvelles données.
Quand les données fournies par ton service sont utilisées par plein de component différent, ça simplifie grandement ton code (et donc sa maintenabilité et son évolutivité).

Par exemple si j'ai un 2ème component qui transmet un input utilisateur à mon service pour modifier les données, bah mon component récupère les nouvelles données sans que lui, le component 2 ou le service face quoique ce soit.

D'ailleurs ce fonctionnement n'est pas spécifique à Angular hein (ni au Typescript/Javascript).

Envoyé par William Vaurien

Il manque un topic pour les devs non masochistes.

Fake news ça n'existe pas.

**Nattefrost** · 07/09/2017, 12h18

Envoyé par Orhin

Il manque un topic pour les devs non masochistes.

Fake news ça n'existe pas.

J'écris du shell en ce moment, j'y prendrai presque plaisir si ce n'est les 50% de temps ou je rage sur la syntaxe et les quirks de ce langage de merde. Mais c'est tellement pratique...

**PaulPoy** · 07/09/2017, 13h27

Envoyé par Mayalabielle

Au fait, je me posais une question, quid du SEO pour les pages générées en client side par des frameworks (genre vuejs) ?

A l'époque quand j'avais pratiqué du Angular 1, j'avais mis en place un outil en utilisant Zombie pour générer des fichiers html des pages publiques qui étaient ensuite servis aux moteurs de recherche. Depuis, je crois que ça a évolué, et que les moteurs (ou que google ?) savent interpréter directement les vues de ce genre de frameworks. Mais je dis peut être une connerie, je n'ai pas suivi le sujet depuis un bon moment.

**Orhin** · 07/09/2017, 15h53

Envoyé par Mayalabielle

Au fait, je me posais une question, quid du SEO pour les pages générées en client side par des frameworks (genre vuejs) ?

Comme dit au dessus, les bot google se démerdent bien mieux qu'avant à ce niveau.
Mais c'est quand même moins efficace que pour les sites statiques.
C'pour ça que les projets comme https://universal.angular.io/ existent.

Envoyé par Nattefrost

J'écris du shell en ce moment, j'y prendrai presque plaisir si ce n'est les 50% de temps ou je rage sur la syntaxe et les quirks de ce langage de merde. Mais c'est tellement pratique...

Ça pourrait être pire, tu pourrais faire du Perl.

**Mayalabielle** · 07/09/2017, 17h09

Envoyé par Orhin

Comme dit au dessus, les bot google se démerdent bien mieux qu'avant à ce niveau.
Mais c'est quand même moins efficace que pour les sites statiques.
C'pour ça que les projets comme https://universal.angular.io/ existent.

Ça pourrait être pire, tu pourrais faire du Perl.

**Teocali** · 07/09/2017, 18h31

Envoyé par Orhin

Comme dit au dessus, les bot google se démerdent bien mieux qu'avant à ce niveau.
Mais c'est quand même moins efficace que pour les sites statiques.
C'pour ça que les projets comme https://universal.angular.io/ existent.

Ça pourrait être pire, tu pourrais faire du Perl.

Putain, Perl... *Retourne en pls*

**Nattefrost** · 07/09/2017, 18h34

Honnêtement jme demande si je préfère pas perl5, y a des trucs super cryptiques mais en shell y c'est vraiment wtf. La gestion des blocs de contrôle m'est quand même plus familière, la syntaxe plus souple.

Par contre on a les mêmes problèmes des params d'une fonction passés par indice dans un array @_ au lieu de $1 $2
Ca reste assez archaique.

En perl6 par contre ils ont changé ça, en plus d'une foultitude de trucs

.

**Teocali** · 07/09/2017, 20h22

Perso, la première (et dernière) fois que j'ai touché Perl, c'était pour un outil de génération de graphique... Le trio magique bash/Perl/svg, avec la logique repartie partout... Ça vous collerait un PTSD aux plus solides...

**William Vaurien** · 07/09/2017, 20h57

J'ai fait pas mal de maintenance de shell cette année et je m'en serais bien passé... entre les différentes 'saveurs' (ksh / csh / bash) et les différentes versions des commandes systèmes (Solaris et Linux) et le côté un peu ésotérique de ces langages préhistoriques, j'avais souvent envie de m'arracher les cheveux et de trucider des gens.
Heureusement pas de perl

Par contre, pour moi, le pire c'est les Makefile: j'ai arrêté d'essayer de comprendre et je fais des copié/collé (heureusement je n'ai pas à faire ça trop souvent...): je suis complètement hermétique et ça me rappelle mes heures les plus sombres en première année d'IUT...

**Mayalabielle** · 08/09/2017, 08h41

Envoyé par William Vaurien

J'ai fait pas mal de maintenance de shell cette année et je m'en serais bien passé... entre les différentes 'saveurs' (ksh / csh / bash) et les différentes versions des commandes systèmes (Solaris et Linux) et le côté un peu ésotérique de ces langages préhistoriques, j'avais souvent envie de m'arracher les cheveux et de trucider des gens.
Heureusement pas de perl

Par contre, pour moi, le pire c'est les Makefile: j'ai arrêté d'essayer de comprendre et je fais des copié/collé (heureusement je n'ai pas à faire ça trop souvent...): je suis complètement hermétique et ça me rappelle mes heures les plus sombres en première année d'IUT...

Makefile ça passe, ça permet de faire des choses sympas.

**Gillete** · 08/09/2017, 14h49

Est-ce que certain sont familier avec Selenium ?

J'ai écrit plusieurs centaines de tests (orientés fonctionnels) afin de valider nos différentes pages et les différentes interaction entre elles. Ils fonctionnent tous très bien sur Chrome, aucun soucis.
Dans une optique d'optimisation, je suis en train d'essayer de passer mes tests sur Chrome en mode Headless histoire de soulager un petit peu notre serveur de test. Ils continuent tous de très bien fonctionner, sauf sur l'un d'entre eux : il n'arrive pas à atteindre un élément pour écrire dedans et j'ai le message "OpenQA.Selenium.InvalidElementStateException : invalid element state". En repassant sur un mode classique, de nouveau aucun problème.

Certes, cet élément possède initialement une propriété disabled qu'il perd suite à quelques actions, mais c'est le cas pour une dizaine d'autre éléments sur cette même page. J'ai essayé plein de truc pour attendre de façon plus ou moins implicite, mais rien à faire. Vous avez une idée/piste par hasard ?

**Orhin** · 08/09/2017, 15h03

Ce serait pas une question de synchronisation ?
Sous chrome, le temps que tu arrives sur ce sélecteur le disabled n'est plus actif sur ton élément, mais en headless browser ça se passe trop vite et du coup Selenium essaie d'intéragir avec l'élément lorsqu'il est encore disabled ?

**Gillete** · 08/09/2017, 17h18

J'ai bien essayé d'ajouter des attentes implicites et/ou explicites, fait des grosse boucles while bien crados pour attendre qu'un élément avec les bonnes règles xpath soit présent, mettre une taille de fenêtre ... mais rien à faire, il bloque sur cet unique champ.

**raaaahman** · 08/09/2017, 19h22

Salut,

la petite argumentation avec Monsieur Phal sur le topic du Coin du Jeu a éveillé ma curiosité sur les méthodes de protection contre le spam/les meuchants robots. A part imposer des restrictions sur les liens hypertextes, y'a quoi comme méthode qui fonctionne bien? Si je laisse des numéro/adresse mail dans un lien 'tel:' ou 'mailto:', comment je peux éviter que les bots s'en serve?

**TarteAuxFleurs** · 08/09/2017, 20h28

Envoyé par raaaahman

Salut,

la petite argumentation avec Monsieur Phal sur le topic du Coin du Jeu a éveillé ma curiosité sur les méthodes de protection contre le spam/les meuchants robots. A part imposer des restrictions sur les liens hypertextes, y'a quoi comme méthode qui fonctionne bien? Si je laisse des numéro/adresse mail dans un lien 'tel:' ou 'mailto:', comment je peux éviter que les bots s'en serve?

L'astuce c'est d'utiliser du javascript pour concaténer ton addresse mail, comme ça les crawlers ne peuvent pas la voir.
Ils ne peuvent pas la voir parce qu'ils tournent souvent sans JS, pour des raisons de performances.
Après est-ce que c'est encore d'actualité, je ne sais pas.

**gros_bidule** · 08/09/2017, 23h43

Un bot en NodeJS ou Electron ça doit faire le taf sans soucis

Même Java a un moteur Javascript (Nashorn). Pour avoir bossé dessus, c'est franchement performant.

Je pense que le soucis est plutôt à chercher du côté de l'humain et des comptes piratés. Ex : tu as des contacts chez Yahoo ? Bah félicitations, tu n'y pourras rien mais tu es déjà dans plein d'annuaires de spammeurs (vu que Yahoo s'est fait ouvrir le bide bien comme il faut il y a quelques années). Ajoutons tous les autres sites qui se sont fait, se font et se feront pirater, et tu comprendras pourquoi malgré tous tes efforts tu va continuer de recevoir des propositions d'accueil téléphonique personnalisé ou des plans fesses à deux pas de chez toi.
Le seul conseil que je saurais donner : prends-toi une adresse chez Gandi ou autre, et fais-toi plein d'alias. Un alias pour les potes, un pro, un pour les sites legits, d'autres pour les services chiants mais obligatoires type "inscription chez Origin, Ubisoft..." etc. Un alias c'est facile à supprimer et ça confine le spam.

**raaaahman** · 09/09/2017, 12h31

Merci des conseils.

Pour les alias mail, pourquoi spécialement chez Gandi?

Si pour afficher une adresse ou un numéro de téléphone, j'utilise une image en svg (pour garder le site dynamique), est-ce que vous pensez qu'un bot ira chercher dedans?

**gros_bidule** · 09/09/2017, 12h42

Gandi car j'avais ce nom en tête et je suis chez eux. Mais yes, je n'aurais pas du citer de nom, en plus il y a moins cher pour tout aussi bien

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

Outils de la discussion

Règles de messages