Frontend chez Sportmaster Lab

salut! Je m'appelle Sergey, je suis le chef du département de développement front-end. À une époque où les conférences hors ligne de profil étaient chose courante, nous avions des badges: le nom de l'entreprise - "Sportmaster", - le prénom et le nom. Si des collègues d'autres entreprises nous ont approchés, alors lorsqu'ils ont regardé ces badges, ils ont été surpris: après tout, "Sportmaster" est un magasin de vente de matériel de sport, qu'est-ce que l'IT a à voir avec ça?



Peu de gens savent que Sportmaster réunit tout un groupe d'entreprises, qui comprend Ostin, FunDay et d'autres. La division SMLab, qui emploie près de 1 500 personnes, est chargée de maintenir le fonctionnement de l'ensemble de cette machine. Parmi ceux-ci, environ 400 sont des développeurs et 25 à 30 développeurs frontaux. Tout le monde est impliqué dans le support informatique pour la fabrication, la logistique, les finances, et cela comprend également le développement Web, l'assurance qualité et bien d'autres.



Tous nos développeurs font à peu près la même chose que leurs collègues d'autres grandes entreprises: développer de nouveaux systèmes et maintenir les anciens. Nous avons une très grande pile technologique, ainsi qu'un large éventail d'applications que nous soutenons et développons. Sur nos épaules se trouvent le développement et le support de tels sites: Sportmaster, Ostin, FunDay, Columbia, Fila, Demix, UrbanVibes. En plus de tout cela, nous avons une forte implantation pour l'automatisation interne. En général, pour les développeurs, il y a là où déployer, pour pomper leurs compétences.



Cuisine interne



image








Comme je l'ai déjà dit aux développeurs de notre division d'environ 400 personnes, afin de gérer efficacement une division aussi importante, l'entreprise a lancé un processus de transformation il y a deux ans. Maintenant, nous travaillons sur Agile, nous avons actuellement environ 30 équipes de produits, et jusqu'à 100 devraient développer et maintenir leurs projets. Chaque équipe dispose de compétences variées: métier, analystes, développeurs, testeurs, ingénieurs en automatisation, méthodologistes. Nous avons créé un portail spécial où nous suivons les métriques des équipes, et les méthodologistes, à leur tour, aident les équipes à configurer les flux. Dès que l'équipe devient suffisamment indépendante, les méthodologistes se tournent vers les autres équipes.



Frontend dans sa bonne compréhension est né dans SMLab il y a deux ou trois ans. Avant cela, il y avait un zoo de frameworks, un grand nombre de bibliothèques différentes telles que knockout, jquery. Tout cela a imposé de nombreuses restrictions au développement, à la recherche de nouveaux collaborateurs et à la rotation entre les projets.



La première chose que nous avons faite a été de démonter tous les logiciels de l'entreprise, en quoi ils consistent et sur quoi ils sont écrits, et nous avons fait un radar technologique, grâce auquel nous contrôlons actuellement la liste des technologies disponibles dans l'entreprise. Nous avons des règles claires pour ajouter de nouvelles technologies à la liste des technologies disponibles. S'il est nécessaire d'introduire une nouvelle technologie dans le radar, un RND est formé, une équipe de spécialistes est recrutée pour mener cette étude. Sur la base des résultats, l'équipe crée une présentation de la technologie et forme la documentation RND puis la défend au comité technique. Si le comité décide que la technologie est importante pour un développement ultérieur, il élargit la portée des technologies disponibles pour l'entreprise.



Nous avons également fait beaucoup de recherches sur le choix du framework pour toute l'entreprise, ce qui a abouti au choix de Vue. Maintenant, un nouveau logiciel est écrit dessus, et tout l'ancien est progressivement réécrit.



Pour l'ensemble du Sportmaster dans son ensemble, nous utilisons plus de 200 systèmes qui automatisent toutes les activités internes de l'entreprise. Par exemple, nous avons automatisé l'ensemble du processus commercial de marchandisage: le processus d'affichage des marchandises dans le magasin, la vérification, etc. Maintenant, nous travaillons sur l'automatisation des studios photo et d'un centre d'appels, beaucoup de gens sont impliqués dans ce domaine.



Tout le commerce électronique dans Sportmaster est divisé en deux grands groupes:

Le premier groupe est les sites géants: tels que Sportmaster et Austin, et le second est un groupe de sites tout aussi importants, mais avec des charges beaucoup plus faibles, comme FunDay et le groupe de sites mono-marque.



Ostin est devenu le tout premier géant à être entièrement écrit sur de nouvelles technologies comme NodeJS, Vue, SSR, Kotlin, etc. et est entré en production. La version actuelle du site Web de Sportmaster a été écrite il y a environ 4 ans. Maintenant, le développement d'une nouvelle version 3.0 est en cours sur de nouvelles technologies avec un nouveau design, et bientôt elle remplacera l'ancienne. La situation est similaire avec le site Funday du deuxième groupe, le site est actuellement activement développé en utilisant une nouvelle pile, nous verrons bientôt un nouveau site.



Le groupe de sites mono-marque était la deuxième itération du développement de sites sur la nouvelle pile. J'ai été temporairement présenté à l'équipe au stade de sa formation et j'ai occupé le poste de chef d'équipe, actuellement j'ai quitté l'équipe et je continue à travailler avec l'équipe en tant que commissaire.



Sites Web Monobrand



image



Un peu de fond. Avant de passer à l'informatique, j'ai travaillé en entreprise pendant environ 5 ans. Plus d'une fois, je suis tombé sur un logiciel nouvellement créé, à partir duquel il y avait le sentiment que les programmeurs l'écrivaient exclusivement pour eux-mêmes. Et puis je suis arrivé à la conclusion que le produit devrait être pratique pour tout le monde: pour les utilisateurs de l'extérieur et pour tous les participants au processus de développement de l'intérieur.



Quand ce fut le tour des sites mono-marques. Un mois avant, en effet, le début du développement, mon équipe et moi sommes allés étudier des sites déjà créés par d'autres entreprises, et avons relevé deux problèmes principaux.



Premièrement, les entreprises négligent les métriques utilisateur: nous avons remarqué que, par exemple, une fiche produit est ouverte pendant 20 secondes, tout filtre est appliqué pendant 10 à 15 secondes. Autrement dit, il ne s'agit pas d'un achat, mais d'une sorte de lutte avec le site.



Deuxièmement, il existe des problèmes d'affichage du site sur les appareils mobiles. Ils sont tous tordus.



Par conséquent, lorsque notre tour est venu, nous avons tout d'abord commencé à créer un diagramme de composants, dessiné tous les blocs et connexions qui auraient dû l'être, puis avons commencé à travailler sur l'optimisation de chaque bloc séparément et ses connexions avec d'autres blocs. Nous avons convenu avec le backend que toute la logique, travaillant avec des microservices, des calculs, des agrégations nécessaires, etc. tombe sur ses épaules, et le front est engagé dans l'affichage et la logique de l'interaction avec les utilisateurs.



Grâce à cela, nous avons minimisé la taille de la réponse et normalisé considérablement l'API, ce qui facilite la navigation de l'équipe dans le processus et dans l'accord de travail sur de nouvelles fonctionnalités, nous nous entendons très rapidement sur un contrat.



Dans la deuxième activité mondiale, nous avons discuté et convenu au sein de l'équipe comment nous travaillons avec la statique des applications. Statique nous a causé des problèmes sur d'autres projets plus d'une fois, quand il devient soudainement ingérable et sa taille est calculée en gigaoctets. En général, nous avons accepté d'abandonner ce dossier: il sera automatiquement généré et collecté par notre application. Le projet a déjà environ un an et tout le contenu statique ne pèse pas plus de 30 Mo.



Quand nous sommes arrivés à la mise en page, nous avons décidé de mener le développement afin qu'il n'y ait pas de duplication de code - nous avons fait la mise en page afin de pouvoir l'adapter à différents appareils. Les experts du référencement ont fait un excellent travail sur cette question, en indiquant quels blocs sont dépendants du référencement et lesquels ne le sont pas. Nous avons mis en évidence le CSS critique. Toutes ces actions minimales ont conduit au fait que la page du site Web mono-marque ne pèse en moyenne pas plus de 20 Ko et s'ouvre presque instantanément.



Il y a également eu des résultats inattendus. Au début du projet, nous avons commencé à compiler la documentation pas sous la forme que tout le monde écrit habituellement, avec une liste de composants et une liste de leurs fonctions. Nous avons tout documenté en général: commandes de démarrage, dépendances, environnements, styles de code, etc. Et ils ont fait tout cela, dans l'ensemble, uniquement pour eux-mêmes. Mais quand tout ne faisait que commencer, il y avait cinq personnes dans le projet, et maintenant il y en a 20.



Et maintenant, il est beaucoup plus facile pour nous de mettre les nouveaux employés à jour - nous les laissons simplement étudier la documentation pendant quelques jours, après quoi ils sont tout à fait prêts à se lancer seuls dans des missions de combat.



All Articles