{"id":38,"date":"2019-08-22T13:35:18","date_gmt":"2019-08-22T13:35:18","guid":{"rendered":"https:\/\/newblog.siteground.com\/fr\/?p=38"},"modified":"2025-10-03T08:14:31","modified_gmt":"2025-10-03T08:14:31","slug":"derriere-la-technologie-derriere-nouvel-espace-client-et-nos-site-tools","status":"publish","type":"post","link":"https:\/\/fr.siteground.com\/blog\/derriere-la-technologie-derriere-nouvel-espace-client-et-nos-site-tools\/","title":{"rendered":"Les technologies derri\u00e8re notre nouvel espace client et nos nouveaux outils de site"},"content":{"rendered":"
\n\n\n

Nous avons r\u00e9cemment annonc\u00e9 le lancement de notre nouvel espace client et de nos nouveaux outils de site. Notre COO en a parl\u00e9 d’un point de vue commercial<\/a> et de l’importance de ce projet pour notre croissance future. Je voudrais vous donner la perspective technique et pourquoi nous consid\u00e9rons que ces nouvelles interfaces sont \u00e9galement une \u00e9tape technique pour SiteGround. <\/p>\n\n\n\n

SiteGround a toujours \u00e9t\u00e9 avant tout une entreprise de services.\u00a0Cependant, depuis de nombreuses ann\u00e9es, la croissance de notre activit\u00e9 est \u00e9troitement corr\u00e9l\u00e9e \u00e0 notre \u00e9volution technique.\u00a0Plus nous d\u00e9veloppons de logiciels en interne, plus la qualit\u00e9 de notre service augmente et plus notre r\u00e9putation grandit.\u00a0Non seulement cela, mais nous avons d\u00e9velopp\u00e9 la confiance en soi d’une entreprise de haute technologie qui produit des solutions logicielles puissantes et intelligentes et qui est toujours parmi les premi\u00e8res \u00e0 mettre en \u0153uvre les technologies les plus innovantes.\u00a0<\/p>\n\n\n\n

Ainsi, lorsque nous avons r\u00e9alis\u00e9 que bon nombre de nos id\u00e9es commerciales \u00e9taient ralenties ou rendues impossibles par les limites de notre plate-forme sous-jacente actuellement utilis\u00e9e, nous avons eu le courage de voir plus grand que ce qui est disponible sur le march\u00e9 et avons os\u00e9 tout recr\u00e9er \u00e0 partir de z\u00e9ro<\/p>\n\n\n\n

<\/span>Le d\u00e9fi<\/span><\/h2>\n\n\n\n

D’un point de vue commercial, nous voulions g\u00e9rer une plate-forme (frontend et backend) qui fonctionnerait sur n’importe quel appareil, aurait un look moderne, serait l\u00e9g\u00e8re, rapide, s\u00e9curis\u00e9e et facilement \u00e9volutive. En traduisant cela en termes techniques, nous avons d\u00e9fini les objectifs suivants :<\/p>\n\n\n\n

1. Vitesse et UX avanc\u00e9e<\/h3>\n\n\n\n

Nous avons d\u00e9cid\u00e9 d’utiliser des applications d’une seule page car c’est LA technologie incontournable pour une exp\u00e9rience Web plus rapide.  <\/p>\n\n\n\n

2. \u00c9volutivit\u00e9 et s\u00e9curit\u00e9<\/h3>\n\n\n\n

Nous avons d\u00e9cid\u00e9 d’adopter la philosophie des micro-services et de tout baser sur l’API afin que le syst\u00e8me puisse \u00e9voluer plus facilement et en cas d’incidents, avoir une port\u00e9e de dommages plus petite.<\/p>\n\n\n\n

Cependant, lorsque vous avez de nombreux services, l’authentification et l’autorisation sont un gros probl\u00e8me.\u00a0Nous avions donc besoin d’une solution s\u00e9curis\u00e9e, rapide et simple pour le probl\u00e8me de partage de ressources cross-origin, o\u00f9 nous avons choisi d’utiliser des jetons web JSON.<\/p>\n\n\n\n

Op\u00e9rer \u00e0 grande \u00e9chelle lorsque vous avez des millions de sites h\u00e9berg\u00e9s sur des centaines de milliers de conteneurs n\u00e9cessite \u00e9galement une orchestration, une d\u00e9couverte de services et une couche de messagerie fiable o\u00f9 nous introduisons Consul et NSQ.<\/p>\n\n\n\n

Enfin, une bonne observabilit\u00e9, surveillance et alerte sont cruciales compte tenu de la complexit\u00e9 du syst\u00e8me. Nous avons donc mis Prometheus et Grafana en action.<\/p>\n\n\n\n

<\/span>Les solutions<\/strong><\/span><\/h2>\n\n\n\n

1. Applications monopage avec React et Redux<\/h3>\n\n\n\n

Il y a trois ans, lorsque nous avons commenc\u00e9 \u00e0 travailler sur le projet, nous savions que les applications d’une seule page devenaient de plus en plus populaires car elles permettaient une meilleure exp\u00e9rience utilisateur, des temps de chargement de page plus rapides, l’unification des principes de conception, la conception modulaire, etc. L’\u00e9cosyst\u00e8me SPA \u00e9voluait \u00e9galement rapidement. Il existait de nombreux frameworks JavaScript tels que AngularJS, ReactJS et Vue.js. Il semblait naturel et \u00e9vident que lorsqu’il s’agissait de quelque chose de l\u00e9ger, rapide et bas\u00e9 sur une API, l’application d’une seule page \u00e9tait la r\u00e9ponse. Apr\u00e8s quelques tests avec diff\u00e9rents frameworks, nous avons d\u00e9cid\u00e9 d’utiliser ReactJS + Redux pour notre nouvel espace client et nos outils de site, car il a montr\u00e9 les meilleurs r\u00e9sultats de performance. <\/p>\n\n\n\n

Chargement rapide des pages<\/h3>\n\n\n\n

Nous avons deux applications principales d’une seule page. L’une est l’application Espace client et l’autre est notre application Outils du site. Ils sont tous deux utilis\u00e9s toutes les heures par des milliers de personnes et leur nombre ne cesse d’augmenter. D\u00e9placer une partie de la logique d’application vers les navigateurs des utilisateurs, o\u00f9 JS est ex\u00e9cut\u00e9 localement, a rendu les choses plus rapides. Cela s’explique en partie par le fait que nous avons moins de manipulations de donn\u00e9es effectu\u00e9es dans le backend. L’autre partie vient du fait que nos applications vivent sur une solution de mise en cache d’objets avec CDN devant. Cela permet aux utilisateurs du monde entier de charger rapidement l’application et de commencer \u00e0 l’utiliser.<\/p>\n\n\n\n

Guide de style unifi\u00e9 <\/h3>\n\n\n\n

Les applications d’une seule page vous permettent de travailler avec des composants pr\u00eats \u00e0 l’emploi qui sont r\u00e9utilisables et de faire en sorte que vos interfaces respectent certaines normes. Pour la n\u00f4tre, nous avons \u00e9crit un guide de style, qui rend nos interfaces homog\u00e8nes et nous permet d’\u00e9crire du nouveau code plus facilement et plus rapidement. Le compromis est que seul le d\u00e9p\u00f4t du guide de style avec tous les exemples repr\u00e9sente environ 550 000 lignes de code !<\/p>\n\n\n\n

\u00c9tant donn\u00e9 que notre d\u00e9veloppement est assez important et en croissance et que le code avec lequel nous travaillons est assez volumineux, nous devions nous assurer que nos normes seraient respect\u00e9es et non r\u00e9gress\u00e9es par les changements.\u00a0C’est pourquoi nous avons couvert le code avec des tests visuels et e2e (Cypress).\u00a0Si un changement de code modifie visuellement une certaine page de mani\u00e8re significative, nous avons un drapeau rouge et nous pouvons m\u00eame arr\u00eater automatiquement le d\u00e9ploiement de code et les builds.<\/p>\n\n\n\n

<\/span>2. API RESTful et microservices<\/span><\/h2>\n\n\n\n

Nous avons maintenant plus de 100 appels API qui peuvent \u00eatre utilis\u00e9s pour g\u00e9rer un seul site h\u00e9berg\u00e9 sur nos serveurs. Des choses comme l’installation de WordPress, l’\u00e9mission d’un certificat SSL priv\u00e9, la cr\u00e9ation de comptes de messagerie, la cr\u00e9ation de nouvelles bases de donn\u00e9es MySQL, l’ajout de cl\u00e9s SSH et m\u00eame la migration de sites entre serveurs se font toutes via des appels API. Ces API nous offrent les avantages suivants :<\/p>\n\n\n\n

Favorise l’utilisation de diff\u00e9rentes langues<\/h3>\n\n\n\n

Nous avons des ing\u00e9nieurs logiciels qui \u00e9crivent dans les langages\/frameworks suivants pour notre plate-forme :<\/p>\n\n\n\n