 Est-ce que vous m'entendez bien ? Oui. Est-ce que, parmi vous, il y en a qui ont déjà visité le site www.wukunars.com ? Vous pouvez aller à la main. Très bien. Merci. Ça fait plaisir. Il va noter que www.wukunars.com va devenir www.wuk.com d'ici deux semaines. Petite information et ça va avoir des implications sur tout un tas de services. Mais je ne peux pas vous en dire plus aujourd'hui. Mais bon, restez à l'écoute de tout ça. Donc aujourd'hui, je vais vous présenter le site www.wukunars.com. Comment on le fait vivre ? Comment on fait en sorte que un site WordPress et un site www.wukunars.com avec une influence vraiment colossale arrive à tenir sous la charge ? Et ensuite, on verra comment on a retravé la page producte et comment vous pouvez, avec vos propres sites, apprendre de nos erreurs. Donc on prendra, on va faire un titre historique du site. On va avoir un petit travail sur le site. Les champs technologiques qu'on a décidé de prendre, on va parler du TEM, qui va faire une petite relation avec ce qu'on a vu tout à l'heure dans les conférences précédentes avec le FSE et avec le nombre de plugins, donc les extensions. On va parler des données qui fera une relation avec la conférence qui aura sur l'optimisation de la base de données avec Thomas de Benoît tout à l'heure. On va parler de réactes, évidemment. On va parler des workflows, comment on travaille, comment on bouge le code. Les défis qu'on a vu, quelques outils que je vous conseille. Ensuite, on passera sur la refonte de la page producte, qui est vraiment un gros gros travail, plus une petite conclusion à placer. Avant tout, je trouve que c'est important de rappeler qu'on est tous ici grâce à leur presse, comme ils mettent, la technologie. Et d'ailleurs, lorsqu'elle rassemble les gens, c'est la preuve. L'historique de vous-commerces. Avant vous-commerces, c'était une boutique de TEM. Et vous-TEM, c'était une boutique de TEM avec un site, tout ce qui a été classique. Et comme vous pouvez le voir, il n'était pas hyper sexy. Ensuite, on a fait évoluer tranquillement. Et puis, je m'excuse, par contre, pour la qualité des slides, c'est la première fois qu'on a un écran léger. Donc, le TEM a évolué. On a pris le pli de faire vivre le site avec les outils d'époque. On a mis la filiation en place déjà relativement tôt. C'était les choses qui étaient importantes et qui va revenir par la suite. Donc, vous-TEM continue de téléchargeur augmente. Et puis, on peut voir qu'en 2011, on a un autre domaine, vous-commerces.com n'est rien su. Je suis tout étonnant, mais ça a avancé quelque chose. Pourtant, en 2012, bien qu'on ait le domaine de vous-commerces.com, on est toujours sur vous-TEM. Donc, le choix stratégique de communiquer sur vous-TEM n'est pas sur vous-commerces, il n'est pas encore décidé. Et jusqu'à ce qu'en 2016, donc, c'est très longtemps après, on lance le site vous-commerces.com qui, au final, est toujours la base qu'on utilise aujourd'hui. Et ça, c'est important pour la suite de la présentation. En 2023, on est sur un site qui a utilisé la base de 2016, mais pourtant, qui utilise du React, du TypeScript, des blogs, des patterns. Et pourtant, c'est un site qui n'était pas optimisé du tout pour ce type de technologie d'époque. Alors, il faut rappeler que, je suis désolé pour les oppositions qui sont un peu écrasées, il faut rappeler quand même qu'une boutique sur quatre dans le monde s'est utilisé au commerce. Donc, il y a la trafic conséquent sur ce site et que derrière, il va falloir assumer en fait le trafic d'affluence qui est sur le site et il va falloir travailler sur chaque micro-optimisation. Alors pour ça, on a pas mal de monde à travailler sur le site. Notamment, on a 30 développeurs qui sont à temps plan sur un projet, donc commerce.com. On a 11 marketeurs et puis on a 5 designers et on a, je ne sais pas combien, des équipes dirigeantes qui nous demandent de faire tout un tas de choses. Alors, le nom des équipes, vous pouvez voir, c'est Fuelfire Desire pour les fans de Metallica. Ça m'en rappelera peut-être un des premiers équipes du groupe. Alors, les équipes de dev sont séparées en fait en pôle. Il va y avoir un qui va travailler sur tout ce qui est aimant être en action. Donc, ça va être très technique. Ça va être vraiment orienté, partenariat également avec les fastitues bancaires. On va avoir une autre équipe qui va être l'expérience d'achat dans le tunnel d'achat sur le commerce.com. Et donc, les partenaires et les marketplaces. Donc, il faut voir aussi que quand vous allez sur vos commerces, en votre commerce, et que vous avez dans l'extension, vous avez une liste de produits ou d'extensions qui s'affichent. Et ça, en fait, c'est géré depuis vos commerces.com. Donc, c'est en fait, la page s'affiche dans l'interface de votre presse. Mais elle est de portée en fait, sur nous, c'est un peu. Et en fait, ensuite, on va, pardon, le frontien de la marketing, qui est un équipe dont je fais partie et qui s'occupe vraiment de toute la partie visuelle du site. Le reste après, c'est la gestion de, comment dire, des tests aux produits qu'on va mettre sur la page de marché. Alors, l'avantage qu'on a par rapport à ça, c'est qu'on travaille directement avec les équipes de WooCommerce Core. Donc, on fait évoluer WooCommerce Core aussi en fonction des besoins de WooCommerce.com. Et ça, c'est important, c'est que, comme on a un besoin qui est un peu spécifique, on a des expertises qui peuvent servir, en fait, dans plus grand nombre. Donc, quand on identifie quelque chose pour pouvoir mettre en place sur WooCommerce.com, on va aller voir les équipes de WooCommerce Core, on va leur dire, écoutez, voilà. Nous, on a besoin de ça et ça pourra bénéficier à la majorité des utilisateurs. Donc, on a cette relation-là. On a également la relation avec les équipes de WooCommerce Core, surtout ce qui est bloc. Et évidemment, tous les blocs qui ont été créés sur WooCommerce Core ont découlé de travaux qui ont d'abord été fait sur WooCommerce.com. Ensuite, on travaille avec, évidemment, on va préciser, plus que nos serveurs sont émergés sur les équipes, qui ont en fait le très haut gamme des émergements dans WooCommerce.com. Donc, WooCommerce.com est évidemment pour l'émergence. Donc, toutes nos équipes sont dispatchées un peu partout. Alors, c'est pixelisé, désolé de l'eau. Voilà, donc on est partout et on travaille entre les travail. Les choix technologiques qu'on a décidé de prendre pour ce projet, vous allez voir, il n'y a rien vraiment de faux-dichon. Ça, c'est donc les stats qui sortent du récolte GitHub. Et puis, sur ce côté-ci, vous indiquez le nombre des fichiers. Donc, le nombre des fichiers de PHP, on est à 11 000. JavaScript, on est à 1 500 et TypeScript, on est à 450. Ça, c'est le projet global. C'est le site en entier. Et les technologies incluent également la partie CMI, la ligne de commande. Pourquoi ? Parce qu'en fait, pour des raisons de sécurité, on a décidé que certaines pages ne pourraient se faire que en CMI, donc en commande. Et, à chaque fois qu'on exécute une ligne de commande, elle va s'exécuter sur la partie CIME du site. Donc, elle permet la version de test et ensuite, si ça fonctionne bien, si on casse pas tout, là, on va se rendre production. Et des commandes comme ça, on en a quelques centaines, en fait. Donc, ça permet vraiment d'éviter de casser les domaines. Le thème, alors vous allez voir, ce qui est intéressant, c'est que, comme je vous dis tout à l'heure, c'est un thème classique. Donc, c'était pas un thème d'en réunter FSE à la base. Et le ratio entre le nombre d'efficiers PHP et le nombre d'efficiers JavaScript s'est renversé. Donc, c'est bien la preuve que, malgré le fait qu'on ait un thème classique, on ait réunter FSE avec du React et des composants et des paternes, etc. Alors, c'est un thème qui est un peu hybride. Donc, dans le sens où chaque élément que vous allez voir sur le site, en fait, c'est un élément qui est écrit, par exemple, en React, chargé soit depuis PHP, soit depuis des blocs. Donc, ça nous permet, en fait, qu'il veut faire d'écrire des blocs en React, de pouvoir charger soit dans les fichiers qui sont présents dans le thème d'activement, soit dans les blocs. Alors, les blocs et les paternes vous en avez parlé dans la conférence précédente, la première conférence. C'est en fait le gros du projet et ce qu'on fait, c'est que pour chaque besoin, on va créer un bloc. Vous pouvez voir, par exemple, l'effet bloc que j'ai mis en avant là, c'est un bloc tout simple, qu'il y a un bloc contenu qui va permettre de gérer des effets, des animations. Donc, en gros, on laisse un bloc et on a glissé tous les autres blocs qui ont besoin des animations à l'intérieur. Ce qui fait que tous les effets vont être centralisés dans un seul et un endroit réutilisant par tous les autres blocs que ce soit des blocs natifs ou des blocs de chez nous. Et donc, des blocs qu'on a, une quantité industrielle. Et donc, ce qu'on fait, c'est que ces blocs-là sont ensuite réutilisés dans des paternes, dans des compositions pour les équipes marketing. Donc, comme ça, il n'y a pas besoin de travailler avec les fichiers de l'HP. Une fois qu'on a tous nos paternes, tous nos blocs, on crée en fait du matériel réutilisable rapidement et sans avoir à nous venir donner un pouvoir de vos techniques. Donc, tous ces paternes et tous ces blocs sont en fait issus d'un design système qui est créé dans Filma. Donc, Filma, qui est un logiciel permettant de faire du voyeur framing et toutes les données de Filma sont en fait utilisées dans le thème de Tizen, le thème.jiz. Donc, le design système est vraiment existant au niveau de Qtember. C'est-à-dire que si on utilise, je ne sais pas, une dizaine de blocs avec des espacements, tous les espagnons de tous ces blocs sont basés sur une seule valeur qui est allemande d'écoute du design système de Filma, ce qui fait que si on peut changer l'intégralité de nos blocs en termes d'espacement, une valeur sera modifiée d'une seule fois et ça revient pas sur la totalité du site. C'est un peu le principe de on ne va pas se répéter dans le code et que les gens parleraient de tout à l'heure. Donc, on a également donc, pour que je parlais des espacements, on a également des polices qui sont fluides qui sont, comme tu disais tout à l'heure dans ta conférence, une grosse puissance de la prochaine version de leur presse, sauf que nous, on la fait en amont parce qu'on en avait besoin. On définit, finalement, dans le terme quelques tailles de police et à chaque taille d'écran, que ce soit l'extralar ou que ce soit le plus petit écran mobile que vous pouvez avoir, les tailles sont les mêmes pour tous les blocs et tous les batailles du système. Alors, les extensions à Montréal, on a parlé tout à l'heure, je pense que on n'est pas dans la calculerie base de plugins, pardon, 263, donc, 163, ce qui sont les extensions classiques, ce sont des extensions qui viennent, en fait, soit du repo officiel, soit de plugins qu'on a fabriqués, nous, ou qui sont rendus sur la place de marché du commerce.net. Et ensuite, on a 159 plugins qui sont des plugins vraiment dédiés à loup.com et qui exécutent soit des très petites tâches, soit des très grosses tâches et qui, dans tous les cas, sont séparés et ils sont surtout chargés d'une manière qu'on ne batille pas le système de chargement de WordPress des plugins de manière à optimiser le chargement, le temps de chargement des plugins. Alors, je vais pas rentrer dans le détail, mais en gros, on passe pas par l'interface plugin de WordPress, on passe par un loader qui va aller récupérer les fichiers des territoires. Et ensuite, on a des drogues d'Europeans, c'est des must-use. Voilà, donc c'était un exemple, par exemple, des plugins loader. Ça, c'est des plugins classiques, mais les plugins qui sont chargés par le loader de Custom ne sont pas affichés ici, puisque c'est une WordPress qui l'amène. Alors, l'important à savoir, c'est que WooCommerce.com utilise toujours la dernière version de WooCommerce Core et notamment des versions Meta, c'est-à-dire que en production, on va travailler avec nos produits Meta pour une certaine manière prouver la table pour être petit. Alors, les données, elles sont colossales sur le site de WooCommerce.com. Malheureusement, je ne peux pas vous donner énormément de détails sur la quantité de données et la rentature, puisque c'est des données stratégiques. Mais ce qui est important de savoir, c'est qu'on a travaillé sur des tables de correspondance, ce qu'on appelle des look-up TV, qui paraît courir dans les changements entre les différentes tables pour gagner une efficacité, sinon, on aurait des pages qui se changera en 2-3 minutes. Alors, là, on est sur l'ordre de la rentature en termes de recrutage. Donc, si ça vous intéresse et que l'optimisation des places de données n'est pas rentrée dans le détail, Thomas expliquera pourquoi Miniscule c'est un mauvais choix pour WooCommerce dès le départ. C'est aussi pour ça qu'on est passé sur les high-performance order storage qui vont devenir le standard pour WooCommerce pour les tables qui sortent du schéma classique des tables de represse. Le cache évidemment sur le site de correspondance comme tout est caché. C'est-à-dire que la moindre requête qui va être faite sur un API sera cachée. Tout élément affiché sur la page, à part quelques éléments et c'est vraiment un spécial de commande mais à part fin tout est caché. On n'a même pas le choix. Par exemple même la recherche en fait sur le site on a décidé d'expernaliser plutôt que d'aller faire des recherches sur des quantités de données colossales en utilisant Albalia qui a un super outil qui est beaucoup d'un brand pour étonner. Mais du coup c'est aussi une manière de gagner en chargement parce qu'on a des recherches un petit peu partout sur le site et on ne pourrait pas se permettre de faire nos propres requêtes sur ce type de données. Alors React et TypeScript c'est en fait le langage qui permet de créer des blocs et donc on utilise depuis vraiment un bon moment et comme je vous disais tout à l'heure on va créer des composants qui vont être utilisables en PHP ce qui est normalement pas le cas et qui vont être réutilisées pour des blocs donc on fait le code une seule fois et on peut le charger de la manière qu'on souhaite. Par exemple les blocs ça va être des boutons des boot, des togles des choses très classiques des choses de formulaire mais ça va être aussi des choses très compliquées par exemple on a fait un bloc MyStores qui permet de gérer de connecter tous ces stores dans le temps sur l'interface en fait et ça ça demande vraiment un travail assez énorme je vous ai mis quelques screenshots de quelques blocs qu'on a quelques composants vraiment gras quantitaire possible et l'avantage de ces blocs c'est que ils vont charger uniquement une partie de la page plutôt que de recharger l'intégralité de la page ça c'est l'avantage de React donc on a un thème classique avec des fichiers de PHP et à l'intérieur le contenu chaque élément est chargé indépendamment les uns des autres et ça c'est grâce à ma carte donc l'avantage du React c'est que c'est rapide mais ça requiert une syntaxe un petit peu particulière j'ai pas rentré dans le détail de comment fonctionne React mais en gros ce qu'il faut se dire c'est que ça fonctionne un petit peu comme des fonctions PHP dans lesquelles on passe des arguments en React et puis on a un système de hook qui permet en fait de faire évoluer l'état du composant de PHP et ses données et ça permet notamment de faire des composants enfants comme je disais tout à l'heure avec un effet de bloc donc le bloc qui concentre tous les effets épiciels et tous les animations et ensuite on va juste déposer tous les autres blocs qui ont besoin d'une animation dans ce bloc après bon le désavantage du React c'est que ça demande une compilation et que c'est pas forcément à la portée de tout le monde d'avoir un développement de développement React alors TypeScript c'est en fait une surcouche qui permet de pouvoir déterminer quels types de contenus on va mettre en composant React de manière à éviter d'avoir des données qu'il ne serait pas d'un type spécifique alors c'est quelque chose qui va peut-être sauter dans le futur il se pourrait que la gestion du type soit nativement présente dans les prochaines prochaines prochaines versions de JavaScript et pour finir sur TypeScript je n'ai vraiment pas tardé dessus mais l'avantage c'est que ça permet de vérification en temps réel des types d'informations pour rentrer dans le code donc si vous êtes dans votre éditeur avec Visual Studio Code par exemple dès que vous allez écrire votre code vous allez avoir une information qui va dire bah là si on n'utilise pas TypeScript il va falloir faire la compilation du code aller sur le site et là on va voir dans la console effectivement là il y a des données qui ne va pas donc comme je le disais les composants sont stockés à côté et réutilisés partout sur le site et chargés soit depuis PHP soit depuis Timber ça c'est hyper important parce que c'est en fait le plus ce qui ne se fait pas c'est pas assez la fait pour ça donc on a créé une classe spécifique qui va aller sur le site et on va aller utiliser un outil c'est-à-dire Storylook qui est en fait un package d'NPM et qui permet de tester toutes les combinations possibles d'un composant ça va être par exemple son contenu ça va être sa couleur ça va être sa taille ça va être s'il y a des requêtes les appellies les impôts etc donc ça va super utile ça va être ça va être ça va être ça va être ça va être donc c'est un super outil qui se convient très très bien avec React et tatscript donc là par exemple c'est un bloc vraiment très très classique c'est-à-dire et ce bloc est constitué d'un composant React donc c'est là où la logique est un petit peu bizarre c'est que ce bloc et ce composant en fait font la même chose et l'un peu de l'autre donc on réutilise pas le code on réutilise ce qu'on faisait jusque-là c'est que nous avons nos propres blocs quand on a besoin spécifiques et on s'est rendu compte que finalement le développement depuis travers allait finalement assez vite et que on pouvait au final réutiliser des blocs existants mais les étendants c'est-à-dire on va prendre je ne sais pas le bloc colonne et on va dire oui mais nous le bloc colonne il fait des choses sympa mais c'est pas assez puissant pour ce moment on attend tant qu'on va aller il va rajouter des attributes et on va approcher au maximum du code core de leur presse sans avoir à réécrire la route derrière et surtout ne pas avoir à maintenir plusieurs versions par exemple on a créé un bloc bouton et le bloc bouton nous il nous sert avant pour traquer les liens quand on crée sur le lien on a tout un tas de traquings derrière sauf que du coup on a un bloc bouton natif un bloc bouton au commerce.com donc c'est un peu problématique mais on l'utilise le bloc natif et on le customise alors les workflows c'est comment vous faites pour au final partir d'une idée et comment l'implémenter jusqu'à l'implémentation donc chez Automatique donc la société mer au commerce.com on a ce qu'on appelle des pitous les pitous c'est des blogs internes qui permettent une discussion sur du long terme sur un projet sur une idée sur la vie entreprise etc c'est là qu'on va commencer la discutibilité on va ensuite valider et on va en faire un design donc le design c'est avec du fitment dont je vous parlais tout à l'heure pour déterminer le design system et ensuite tout va se passer sur Git la totalité du code est sur Git et donc ce code avant qu'il soit pouché il va subir tout un tas de tests on va jamais pouvoir passer tous les éléments qui sont derrière donc on va commencer en fait on va regarder si la syntaxe du code est correcte donc on a tout un tas d'outils qui va nous dire là par exemple il y a un espace en trop là il y a une tabulation alors qu'il fallait avoir un point etc ça va se passer sur les fichiers de la script des fichiers de style donc le SCSS et les fichiers de l'HP évidemment il fois que le code semble correct qui fonctionne sur l'environnement de tests on va donc l'envoyer sur Git mais avant qu'il soit sur Git on va faire un pré-commit check c'est à dire qu'on va vérifier que le code est conforme à tout un tas d'éléments notamment la projection de branche c'est à dire qu'on va pas pouvoir envoyer si on n'a importé le branche on va pas pouvoir non plus bypasser si jamais il y a une erreur qui est passée un petit peu sous les aradards de l'éditeur donc dans Visual Code si on laisse passer une petite erreur de syntax elle sera récupérée dans le pré-commit check et puis il va y avoir des tests unitaires pour vérifier que ça va pas casser finalement ce qui se passe sur le site au niveau du panier au niveau de la soumission de produits dans la Marketplace etc donc il y a tout un tas d'éléments comme ça donc une fois que ça c'est fait le code part sur Git et on va faire des pierres donc les pierres ça va être des codes on va vérifier manuellement et par des humains que le code est conforme donc il y a toujours deux personnes qui vont aller vérifier le code de la personne qui a soumis le code donc au final ça commence à faire un nombre de tests assez importants et ensuite on va déployer sur le staging et si ça fonctionne là on va pas s'entrer donc ça fait un chemin entre l'idée l'idée initiale et la mise en route qui est assez longue donc évidemment il y a des partailles des filles qui sont liées à ce type de site notamment le fait que est-ce que ça scale ou pas est-ce que le site WordPress plus haut au commerce est-ce que c'est fait pour tenir une charge alors oui ça marche ça marche mais il faut des ajustements par exemple là c'est les commandes sur le site et même si c'est fixisé vous pouvez voir que finalement la donnée rentre rentre, rentre, rentre et là on parle de dizaines de millions d'entrées dans la base de données MySQL ce qui est colossal ce qui est pas forcément fait pour donc c'est pour ça qu'on a dû faire des types de correspondances donc voilà c'est pas adapté mais nous on s'adapte malgré malgré le fait qu'on est donc 273 pignes des millions d'entrées dans la table on a quand même des données qui sont relativement correctes et un temps de chargement vraiment qui est qui est plus qu'accepte table mais un autre défi qu'on a eu c'était l'accessibilité sur un site avec une affluence comme le site www.commerce.com on peut pas se permettre de pas être dans les clous en terme d'accessibilité c'est pour ça que le site est navigable 100% de la team donc ça ça va être pour tous les personnes malvoyantes on a également mis en place tout un tas d'éléments qui permettent aux valetoniens ou aux personnes qui ne peuvent pas vraiment gérer les contrastes visuellement de pouvoir naviguer sur le site donc on a mis en place la typographie fluide qui fait partie d'accessibilité on peut aussi naviguer la voix www.commerce.com c'est-à-dire que pour les yeux fermés vous pouvez être guidés dans le site des problèmes passés ou de commandes des yeux fermés c'est vraiment ensuite on a le contrôle des médias donc le lancement des médias tout ça sent la souris tout un tas d'éléments et on a l'ordre d'étabulation ça c'est quelque chose très classique par exemple on est sur tout en haut on peut en fait choisir de passer la barre de navigation pour la directement dans le contenu il y a plein de petits éléments comme ça d'accessibilité qui s'en mis en place et donc on a eu un audit d'accessibilité avec une société externe basée au PIVA qui nous a donc quelque sorte forcée à nous rendre 100% accessible malgré que le fait que 100% accessible c'est rarement techniquement parlant on a également un problème de langue sur le www.sibloquenars.com puisqu'on n'utilise aucun plugin de traduction ce qu'on fait c'est qu'on utilise bloodpress qui est donc l'outil voir press par défaut pour la traduction mais ce qu'on fait c'est que nous on stock en base de données donc tous les contenus du site sont stockés en base de données tous les tests sont ensuite envoyés sur bloodpress sont traduits par des humains sont renvoyés dans une autre table dans la base de données ce qui va même être utilisé via une retranscription XML utilisé au chargement de la page ça fait un peu compliqué j'avoue mais ça marche plutôt bien et on peut se passer de WML de polylandres de bulletin etc ça fonctionne très bien par contre maintenant il faut trouver des gens pour traduire parce qu'on a des milliers de pages on a également un souci enfin un défi plutôt la monnaie c'est à dire un site mondial on vend en une seule monnaie mais par contre on veut que n'importe qui dans n'importe quel pays puisse se dire voilà moi ça va prouter de temps dans ma monnaie donc on a fait en interne un système de glacule qui permet de dire voilà on va mettre à jour toutes les monnaies on va les afficher comme il faut pour que chaque utilisateur se sent un petit peu pris par la main j'ai pas n'importe qui j'ai pas à aller me dire voilà en dollars voilà ça c'est le général monnaie et on a donc un autre défi qui est le SEO alors pour l'instant on utilise Yoast donc Yoast c'est un petit intéressant dans le sens où ça a pas ça a pas tendu de faire ces preuves de réformement on sait que ça marche par contre c'est une gynagase et une gynagase de nous c'est ce qu'on essaie d'éviter donc ce qu'on fait c'est que on prend uniquement les parties qui nous intéressent donc on charge Yoast et on enlève une grosse quantité d'éléments qui sont des phases qui qui ralentissent ou qui nous nous servent parmi les défis on a également la gestion des incidents on se retrouve très régulièrement avec des problèmes tous types de problèmes et il faut savoir les gérer puisque derrière chaque seconde de perdu c'est potentiellement des milliers d'euros ou de dollars de perdu donc on ne peut pas se permettre d'avoir une gestion des erreurs ou des incidents qui sont mal faits et à chaque fois chaque incident est répartorier documenté et derrière analysé en terre pour qu'on puisse ensuite avoir un apprentissage sur ce qu'il s'est passé comment on peut éviter et du coup tout ça c'est une partie d'une base de mental qui est assez gigantesque alors les outils qu'est ce qu'on utilise pour faire tout ça c'est les p'tout les p'tout donc les blogateurs on a 2 000 blogateurs avec l'équivalent de 2 millions d'articles 4 millions et demi de commentaires ça discute énormément à l'interne pour l'utiliser ce lac donc on parle un petit peu plus tout à l'heure mais ça commence à faire beaucoup de de channels beaucoup de messages les e-mails très très peu en fait la principale les principalement c'est des e-mails qui sont envoyés par YouTube ou par Cirque du CRI mais sinon on discute pas par e-mail et puis également des outils classiques de vision pour ce qui concerne le le développement on est sur du docker donc le docker ça permet de faire des conteneurs qui permettent de créer un environnement spécifique sur la machine et ensuite tout le code que j'ai dit il est sur YouTube on a 2600 repos donc là c'est pareil il faut être un petit peu organisé et ensuite on en a des visiteurs voilà et on a Cirque du CRI Cirque du CRI c'est un outil qui nous permet de tester encore une fois après qu'on est tout le code sur YouTube avant de le balancer sur la production de s'assurer à 200% que tout va bien se faire donc c'est un outil vraiment professionnel tout comme donc un autre outil qu'on a créé en internet qui permet de faire de vivre et bien testing ça évidemment on va pas faire de mise en place de fonctionnalité si derrière on est pas sûr que ça nous rapporte quelque chose donc on va faire du testing je vais passer vite fait sur Kibana, Grafana et New Relic qui sont des outils très pointus qui permettent de traiter les données de checker par secteur chronologique l'évolution de ces données et puis la surveillance des performances mais si ça vous intéresse je voudrais vraiment aller les voir c'est vraiment des outils très, très, très pointus on utilise également Slack comme un gestionnaire de tout type de choses en fait puisqu'on va recevoir des éléments relatifs au server par exemple dès qu'il y a un petit bug sur serveur ça va être apporté dans Slack dès qu'on a un problème de base de données ça va être apporté dans Slack dès qu'on a un abonnement qui ne se renouvelle pas par exemple sur Slack on va avoir une alerte donc Slack est vraiment plus qu'un outil juste de communication c'est un outil aussi de réception et de tout ce commentaire en fait alors là on vient de travailler sur la refonte de la page produit la page produit c'est vraiment la page qui va permettre un client d'essayer voilà moi c'est ce produit dont j'ai besoin et c'est à partir de ce moment-là que la décision va aller couler d'un achat donc la page produit ça c'est la page actuelle donc on peut se rendre compte qu'il y a des éléments intéressants par contre il y a des choses qu'on peut améliorer donc le but c'est de se dire on va revoir toute la page c'est un petit peu fou je suis désolé et donc on va raccler chaque bloc chaque élément par les temps de pouvoir optimiser cette page on va commencer par des petites icônes ça paraît tout bête mais ce genre d'icône donc c'est marqué de trending c'est le genre d'éléments qui va susciter une curiosité chez l'acheteur potentiel puisqu'on va se rendre compte que c'est un produit qui est à la mode alors à la mode derrière il y en a une qui va définir pourquoi ou comment un produit est à la mode et puis du coup on va voir que sur la barre latérale on a également fait des changements que je vais détailler un petit peu plus tard donc la page produit il y en a également des fonctionnalités qui sont on va dire moins importantes par exemple la mise d'un produit dans une liste de souhaits ou des confirmations d'actions qui vont être faites par exemple sur le style de c'est là sur le style les putains mèbres c'est à dire que quand on va valider une action on va l'afficher comme le visuel des putains mèbres quand vous faites une modification sur le putain mèbres vous avez un petit bleu noir qui apparaît en bas à gauche on a repris ce visuel pour ne plus perdre l'utilisateur tout à l'heure on avait vu qu'on avait une zone qui était un petit peu typée zone alerte alors que pas du tout c'était une zone qui permettait d'avoir une information donc c'était la chose qu'on a modifiée notamment par la couleur un petit peu et la mise en place des éléments c'est à dire que souvent quand on a une page produit on a une image on vient d'une image et on a la description tout de suite sauf que les personnes qui arrivent sur le site en général elles veulent savoir tout de suite à quoi va servir un produit donc c'est pour ça que la description du produit mais en fait elle est assez bas dans le dans le déroulé de la page on va commencer par les points forts donc les areas et ensuite on va aller sur les features donc les fonctions du produit et seulement après on va la description donc au final on sait tout de suite ce que fait telle ou telle produit alors après il y a un élément qui est important c'est donc les avis clients les avis clients on a décidé de créer un système qui va permettre d'avoir une certaine granularité c'est à dire qu'on va pas juste avoir une note il va y avoir plusieurs notes qui vont faire une compilation d'informations est-ce que c'est facile à utiliser est-ce que c'est facile à installer est-ce que c'est facile à documenter etc. et donc à partir de là on aura une note qui permettra au client de savoir si c'est un produit qui est recommandé je ne sais pas si il fait une nouvelle section faible également mais l'idée c'est quand même de se dire voilà on arrive sur la page produit on a toutes les informations on n'a pas besoin d'aller d'ailleurs donc le produit associé et chose nouvelle on inclut également des articles du blog qui sont en rapport avec le produit donc là au final on a totalité des informations de manière bien bien écrite et on va encore plus loin on se disant voilà on est sur la page produit maintenant le but c'est quand même d'acheter mais il ne faut pas plus faire peur au client souvent on a un prix qui est affiché en haut et puis on se dit voilà on va payer ton donc nous ce qu'on a dit c'est que on va vendre des produits annuellement qu'on va afficher en tarif mensuel ça va faire un petit peu moins moins on va même pousser les listes un peu plus blanc un tarif journalier donc là on se retourne avec les plus de choses à 2$ au final 2$ au final 2$ au point 365 ça fait 5% c'est une petite technique comme ça pareil toujours le but c'est pas de faire peur c'est de dire voilà on va derrière on va derrière vendre avant on utilisait le mot install de download donc télécharger maintenant on va dire install au final sur un site donc quand on clique sur ce bouton-là au final on va pouvoir installer le produit sans même être passé par l'interface de WordPress donc ça c'est une processus mais au final depuis le site on va pas parter son produit alors les prix promo c'est un petit peu la même chose c'est-à-dire qu'on essaie de pas faire peur parce que le but c'est pas de tirer au client vous allez faire une fortune donc voilà on va pas faire peur on va afficher les tarifs qui sont un petit peu je sais pas j'ai pas à dire mon son mais ils font plus ou moins peur dans le nouvel tarif journalier et puis donc on a essayé quelque chose d'également c'est quand on scroll souvent quand on scrolla pas et le prix va rester un petit peu perdu en roue donc on a mis une deepbox qui est en fait en sticky et puis c'est-à-dire un peu plus vite nous avons des éléments qui sont très spécifiques à mon commerce.com la compagnie militaire et les autres produits là je pense un peu plus vite puisque c'est vraiment spécifique à d'autres sites mais encore une fois le but ici c'est de dire voilà vous êtes sur la page produit vous avez toutes les infos n'allez pas voir ailleurs c'est pas la peine la version actuelle par exemple si je vous remercie en arrière ici on a toutes les infos qui sont affichées alors qu'avant on avait des infos qui s'appellent don't make me click en gros ne me fais pas clicker et une idée c'est ça en fait on a pas besoin de rajouter des clics dès qu'il y a un clic il faut se poser la question est-ce qu'on en a besoin si on peut afficher la donnée sans avoir à clicker eh ben c'est mieux comme on est un petit peu court en termes de temps je vais passer ça ça c'est vraiment spécifique par contre ce qui est important c'est que sur cette vidéo on a une balle à terral qui s'affiche et on a décidé après vraiment un grand nombre d'expériences de dire toutes les modales toutes les pop-ups qui vont arriver sur front noire on va les remplacer par des panneaux latéraux qui vont venir sur le côté et on s'est rendu compte que c'était ça convertissait le plus mieux que le modal on a la tendance à avoir un effet un peu pervers alors que le panneau latéral est plus apprécié par les visiteurs en général donc on l'a utilisé pour une analyse un peu plus approfondie des avis clients pour le change log des produits qui avancent souvent dans une banale également d'ailleurs c'est une fonction que je vais développer à la base en feu de main à z et on s'est rendu compte que le fait d'afficher le change log par-ci comme ça comme vous le savez pas avant ça l'a rendu un peu plus sexy et ça convertissait normalement pour les features request par exemple on avait un site externe qu'on a réussi à déporter direct à pays et donc on affichait également dans ce panneau latéral donc encore une fois là on vous avait le change log vous avez les avis vous avez les features request tout ça sur la main page donc vraiment il n'y a aucun besoin d'aller voir à l'heure donc voilà le site c'est enfin c'est un tel classique orienté FSE et utilisant des blocs l'avantage et le dos avantage c'est que quand on crée vraiment conséquent de blocs et de composants on va créer énormément de JavaScript et tout s'est fiché pour être concédé pour en fait me créer si je simplifie qu'un seul fiché final c'est quelque chose qu'on appelle le bundle et qu'on a décidé de séparer plusieurs morceaux qu'on charge uniquement au moment où on a besoin mais ça c'est vraiment très particulier et ça permet de vraiment de charger uniquement le minimal alors en conclusion ça incite un petit peu en termes de quantité de données en termes de quantité de blocs en termes de quantité de composants réels et pourtant ça incite classique c'est à dire que c'est pas un site qui est à la base de l'utiliser pour le FSE donc comme quoi c'est possible on se posait la question tout à l'heure de dire bah voilà moi j'ai un code classique un client codé en PHP est-ce que je peux passer en FSE soit on passe 100% en FSE soit on fait comme nous dans ce position au milieu c'est faisable mais derrière comment dire un côté technique un peu un peu un peu chaud mais bon voilà ça c'est prêt donc un petit memo classique sur ce que je vous ai dit alors c'est pas réinventé la route dans l'idée c'est réduire le nombre de plugins en fait c'est pas forcément réduire le nombre de plugins ça se posait la bonne question de savoir est-ce que j'en ai besoin est-ce que je peux juste utiliser une certaine partie du plugin se relancer par le FSE matif et finalement dire au pouvoir à la plupart des gluteurs donc cacher les données évidemment ne pas surcharger l'install ça c'est vraiment très très global ne jamais répéter son code ça c'est quelque chose qui est juste intolérable sur un site internet c'est d'abord un code qui est enfin toutefois la même chose que ce soit du CSS que ce soit de la vascite etc toujours toujours toujours se poser la question de savoir est-ce qu'il y a pas quelque chose qui fait déjà exactement la même chose se baser sur le thème par JSON alors ça évidemment c'est cette culture de WordPress vous devez tous vous poser la question de dire voilà est-ce que je ne devrais pas utiliser ce système-là dans la réponse et puis en termes un peu plus juste sur la partie page produit c'est donner aux visiteurs ceux qui veulent ça ne vous fait pas cliquer jamais jamais jamais chaque clic comme j'ai dit tout à l'heure vous devez vous poser la question de savoir est-ce que ce clic est nécessaire ou pas pour la pratique tarif air c'est un peu spécial mais il faut se dire voilà moi je vais voir un produit en ligne est-ce que je vais afficher un produit classique est-ce que je vais essayer de faire en sorte de prendre le client un petit peu pour un ami qui dirait coûter si cher que ça au final voilà c'est quelque chose qu'il faut réfléchir et puis prendre le client par la main c'est exactement ce que je dis sur la page produit c'est on va partir sur une page avec l'intégralité des données et de surtout jamais le faire en sorte que le client aille voir ailleurs une petite citation pour finir voilà c'est je trouvais ça intéressant de dire que finalement si on veut que l'écosystème noir presse de manière très globale évolue de la bonne manière je pense que tout le monde doit l'être dans la main direction et donc la révolution de l'escarant c'est bien c'est de l'étinceau il faut tendre là ce que tout le monde devrait essayer de faire je vous remercie tout à l'heure vous aurez que d'autres conférences à suivre dont je vous intervierai ici et si vous avez des questions n'hésitez pas j'essaierai d'y répondre avec plaisir merci merci pour la con c'est super intéressant ça a l'air assez challenger de travailler avant ça le reste je reviens sur les bases des données en fait je disais la SQL c'est bon c'est n'importe le début parce qu'à un moment c'est pas posé la question de est-ce qu'on a l'autre type de base de données c'est une très bonne question et la réponse sera dans la confe de tomates tout à l'heure ce qui va te donner exactement l'arrêt ok bon je m'attends à quelle scène de c'est tout à l'heure cet après-midi ça sera dans la suite ça tomates ou non pour ça merci alors une question très importante pourquoi ne faut-il pas s'assoir à droite pourquoi ne pas s'assoir à droite parce que j'avais supposé qu'il y aurait un peu plus de monde sur cette partie comme la majorité du texte était de ce côté-là et du coup il s'assoirait avec toi ok c'est bien d'autre merci c'était super j'ai deux questions en vrai pourquoi du coup opté pour un thème non en fait non juste un thème classique orienté à FSE et pas totalement à FSE et deux éléments quand tu le fais pour le tendre FSE c'est quoi c'est l'ajout du thème point de jéson à l'intérieur alors première réponse c'est la bête technique tout simplement on ne peut pas toujours au lendemain passer sur l'incident cet ordre là 100% FSE c'est pas possible et ensuite comment on passe d'un thème classique à un thème orienté à FSE c'est évidemment la foule du thème point de jéson et après la création de blog c'est exactement ce qu'on a vu dans la première conférence sur la FSE mais clairement comme tu l'as dit tout de l'heure c'est un vrai challenge de passer d'un thème classique à un thème FSE et il peut que dans certains cas ce soit encore plus simple de juste exporter la donnée texte en fait d'un thème classique et de l'abattre dans un thème FSE plutôt que de repartir sur la même instance et ça sera pas un débat Merci Merci Une autre question c'est fini Merci Merci à tous Ah, d'accord Une autre question Une question comment on fait pour avoir un groupe d'omènes qui s'appelle Est-ce que ce n'est pas c'est un couple et sinon est-ce que ça coûte une blinde ? Je pense que la réponse c'est dans la question Mais après après nous je ne sais pas dans cette évacuation-là j'ai cru qu'il est vraiment dans la partie dans la partie Ok, et une autre question elle a démontré qu'il y avait plus de canaux slack de membres de l'espace est-ce que qu'est-ce qui justifie en fait ce résultat Alors ça sort un peu du cadre de cette présentation mais en gros chez Automatique on est 2000 personnes sur les 2000 personnes il va y avoir des gens qui vont avoir des obis par exemple et ces obis par exemple il faut nous faire l'objet de la création de chaines slack pour les musiciens pour les amateurs de cuisine tout ça il est putain de vous ça fait beaucoup une chaine slack par vartekamp par exemple et alors une chaine slack par projet donc ça va très très vite donc c'est quelque chose qui Ok, c'est pour le télétravail finalement que ça justifie la Marseille C'est que pour ça et toute dernière question j'en profite par rapport à la passe de données le fait que Maya SQL ça pose un problème et que vous avez compensé finalement les lacunes aujourd'hui est-ce que là vous êtes en mode on peut tenir plusieurs années et c'est cool parce que tout est stabilisé et on va encore scaleer ou on se pose déjà la question dans 4-5 ans il va falloir qu'on a encore plusieurs millions de lignes en plus ça ne passera plus et on va devoir trouver de nouvelles techniques On a une infrastructure qui permet de tenir ça c'est sûr on est sur un épargement un vieil pivot donc les élargements à peu près les plus sophistiqués qu'on peut savoir chez WordPress.com donc ça peut tenir maintenant il faut voir aussi que WordPress en tout cas elle voulut dans la bonne direction à l'expo de table vraiment dédiée ça va aider pas mal mais voilà nous on a compensé par des temps de correspondance pour l'instant et ça marche extrêmement bien d'ailleurs je sais que tu as fait des tests sur ce type de ce type d'activisation donc peut-être pour la prochaine course ce sera toi si on parle avec lui Non sûrement pas J'ai peut-être coupé le début donc tout ce que à quoi vous faites des évolutions sur WordPress.com est-ce que c'est est-ce que c'est repris sur la version de WordPress de vous-commerdes pardon est-ce que c'est repris sur WordPress.com oui on fait on fait des évolutions en fait on fait évoluer vous-commerdes score pour nos besoins en sachant que ces besoins-là auront probablement des des bénéfices pour la communauté et donc on va aller voir les équipes on va voir voilà ce qu'on a fait est-ce que ça match avec vos objectifs si oui est-ce qu'on peut l'implementer c'est souvent le cas donc souvent les scores obtiennent des mises à jour qui est dans le fait de nos objectifs de questions peut-être je pensais pas avoir autant de questions je pensais que c'était vraiment chiant la présentation par contre c'est une idée prochaine comment t'as fait quoi résolution 1500 5700 5700 5700 300 merci beaucoup