الواجهة الأمامية في Sportmaster Lab

مرحبا! اسمي سيرجي ، أنا رئيس قسم تطوير الواجهة الأمامية. في الوقت الذي كانت فيه مؤتمرات الملفات الشخصية غير المتصلة بالإنترنت أمرًا شائعًا ، كان لدينا شارات: اسم الشركة - "Sportmaster" ، - الاسم الأول والأخير. إذا اتصل بنا زملاء من شركات أخرى ، فعندما نظروا إلى هذه الشارات ، فوجئوا: بعد كل شيء ، Sportmaster هو متجر لبيع المعدات الرياضية ، فما علاقة تكنولوجيا المعلومات بها؟



قلة من الناس يعرفون أن Sportmaster توحد مجموعة كاملة من الشركات ، بما في ذلك Ostin و FunDay وغيرها. قسم SMLab ، الذي يوظف ما يقرب من 1500 شخص ، مسؤول عن الحفاظ على تشغيل هذا الجهاز بالكامل. ومن بين هؤلاء ، هناك حوالي 400 مطور و 25-30 مطورًا للواجهة الأمامية. يشارك كل شخص آخر في دعم تكنولوجيا المعلومات للتصنيع واللوجستيات والتمويل ، وهذا يشمل أيضًا تطوير الويب وضمان الجودة والعديد من الأمور الأخرى.



يقوم جميع المطورين لدينا تقريبًا بنفس الشيء مثل زملائهم في الشركات الكبيرة الأخرى: تطوير أنظمة جديدة والحفاظ على الأنظمة القديمة. لدينا مجموعة تقنية كبيرة جدًا ، بالإضافة إلى نطاق كبير من التطبيقات التي ندعمها ونطورها. يقع على عاتقنا تطوير ودعم مثل هذه المواقع: Sportmaster و Ostin و FunDay و Columbia و Fila و Demix و UrbanVibes. بالإضافة إلى كل هذا ، لدينا نقطة انطلاق كبيرة للأتمتة الداخلية. بشكل عام ، للمطورين هناك مكان لنشر ، لضخ مهاراتهم.



مطبخ داخلي



صورة




كما أخبرت المطورين في قسمنا الذي يضم حوالي 400 شخص ، من أجل إدارة مثل هذا القسم الكبير بشكل فعال ، أطلقت الشركة عملية التحول منذ عامين. نحن نعمل الآن على Agile ، ولدينا حاليًا حوالي 30 فريق منتج ، ومن المتوقع أن يقوم ما يصل إلى 100 بتطوير مشاريعهم وصيانتها. كل فريق لديه مجموعة متنوعة من الكفاءات: الأعمال التجارية ، والمحللين ، والمطورين ، والمختبرين ، ومهندسي الأتمتة ، والمنهجيين. لقد أنشأنا بوابة خاصة حيث نتتبع مقاييس الفريق ، وعلماء المنهج ، بدورهم ، يساعدون الفرق في إعداد التدفقات. بمجرد أن يصبح الفريق مستقلاً بدرجة كافية ، يتحول علماء المنهج إلى مساعدة الفرق الأخرى.



ولدت Frontend في فهمها الجيد في SMLab قبل عامين أو ثلاثة أعوام. قبل ذلك كانت هناك حديقة للحيوانات ، عدد كبير من المكتبات المختلفة مثل خروج المغلوب ، مسج. كل هذا فرض قيودًا كثيرة على التطوير والبحث عن موظفين جدد والتناوب بين المشاريع.



أول شيء قمنا به هو تفكيك جميع برامج الشركة ، ومكوناتها وما هي مكتوبة عليها ، وإنشاء رادار تكنولوجي ، بفضله نتحكم حاليًا في قائمة التقنيات المتاحة في الشركة. لدينا قواعد واضحة لإضافة التكنولوجيا الجديدة إلى قائمة التقنيات المتاحة. إذا كان من الضروري إدخال تقنية جديدة في الرادار ، يتم تشكيل RND ، ويتم تعيين فريق من المتخصصين لإجراء هذه الدراسة. بناءً على النتائج ، ينشئ الفريق عرضًا تقديميًا للتكنولوجيا ويشكل وثائق RND ثم يدافع عنها في اللجنة الفنية. إذا قررت اللجنة أن التكنولوجيا مهمة لمزيد من التطوير ، فإنها توسع نطاق التقنيات المتاحة للشركة.



لقد أجرينا أيضًا الكثير من الأبحاث حول اختيار إطار العمل للشركة بأكملها ، مما أدى إلى اختيار Vue. الآن تمت كتابة برنامج جديد عليه ، وتتم إعادة كتابة كل القديم تدريجيًا.



بالنسبة إلى Sportmaster ككل ، نستخدم أكثر من 200 نظام لأتمتة جميع الأنشطة الداخلية للشركة. على سبيل المثال ، قمنا بأتمتة عملية التجارة بالكامل: عملية عرض البضائع في المتجر ، والتحقق ، وما إلى ذلك. نعمل الآن على أتمتة استوديوهات الصور ومركز الاتصال ، ويشارك الكثير من الأشخاص في هذا المجال.



تنقسم التجارة الإلكترونية في Sportmaster إلى مجموعتين كبيرتين:

المجموعة الأولى هي المواقع العملاقة: مثل Sportmaster و Austin ، والثانية هي مجموعة من المواقع التي لا تقل أهمية ، ولكن مع حمولات أقل بكثير ، مثل FunDay ومجموعة من المواقع أحادية العلامة التجارية.



كان أوستين أول عملاق تمت كتابته بالكامل في التقنيات الجديدة NodeJS و Vue و SSR و Kotlin وما إلى ذلك. ودخلت حيز الإنتاج. تمت كتابة الإصدار الحالي من موقع Sportmaster منذ حوالي 4 سنوات. الآن يتم تطوير الإصدار الجديد 3.0 على تقنيات جديدة بتصميم جديد ، وقريبًا سيحل محل القديم. الوضع مشابه لموقع Funday من المجموعة الثانية ، الموقع قيد التطوير حاليًا باستخدام مكدس جديد ، سنرى قريبًا موقعًا جديدًا.



كانت مجموعة المواقع أحادية العلامة التجارية هي التكرار الثاني لتطوير الموقع على المكدس الجديد. تعرفت مؤقتًا على الفريق في مرحلة تشكيله وشغلت منصب قائد الفريق ، وغادرت الفريق حاليًا وأواصل العمل مع الفريق من منصب أمين.



مواقع الويب أحادية العلامة التجارية



صورة



القليل من الخلفية. قبل الانتقال إلى قسم تكنولوجيا المعلومات ، عملت في مجال الأعمال لمدة 5 سنوات تقريبًا. صادفت أكثر من مرة برنامجًا تم إنشاؤه حديثًا ، وكان هناك شعور بأن المبرمجين كانوا يكتبونه حصريًا لأنفسهم. ثم توصلت إلى استنتاج مفاده أن المنتج يجب أن يكون مناسبًا للجميع: للمستخدمين من الخارج ، ولكل المشاركين في عملية التطوير من الداخل.



عندما جاء دور المواقع أحادية العلامة التجارية. قبل شهر ، في الواقع ، من بداية التطوير ، ذهبت أنا وفريقي لدراسة المواقع التي تم إنشاؤها بالفعل من قبل شركات أخرى ، وأظهرنا مشكلتين رئيسيتين.



أولاً ، تهمل الشركات مقاييس المستخدم: لاحظنا ، على سبيل المثال ، فتح بطاقة منتج لمدة 20 ثانية ، ويتم تطبيق أي مرشح لمدة 10-15 ثانية. وهذا يعني أنه ليس عملية شراء ، ولكن هناك نوع من الصراع مع الموقع.



ثانيًا ، هناك مشاكل في عرض الموقع على الأجهزة المحمولة. كلهم معوجون.



لذلك ، عندما جاء دورنا ، كان أول شيء فعلناه هو إنشاء مخطط مكون ، ورسم كل الكتل والوصلات التي كان ينبغي أن تكون ، ثم بدأنا العمل على تحسين كل كتلة على حدة واتصالاتها مع الكتل الأخرى. اتفقنا مع الواجهة الخلفية على أن كل المنطق ، والعمل مع الخدمات المصغرة ، والحسابات ، والتجميعات اللازمة وما إلى ذلك تقع على أكتافهم ، والجبهة تشارك في عرض ومنطق التفاعل مع المستخدمين.



بفضل هذا ، قمنا بتقليل حجم الاستجابة وقمنا بتوحيد واجهة برمجة التطبيقات بشكل كبير ، مما يسهل على الفريق التنقل في العملية وفي سلسلة العمل على الوظائف الجديدة ، نتفق بسرعة كبيرة على العقد.



في العمل العالمي الثاني ، ناقشنا واتفقنا في الفريق على كيفية عملنا مع إحصائيات التطبيق. تسبب Static لنا في مشاكل في مشاريع أخرى أكثر من مرة ، عندما أصبح فجأة غير قابل للإدارة وتم حساب حجمه بالجيجابايت. بشكل عام ، اتفقنا على التخلي عن هذا المجلد: سيتم إنشاؤه وجمعه تلقائيًا بواسطة تطبيقنا. يبلغ عمر المشروع بالفعل حوالي عام ، ولا يزن كل المحتوى الثابت أكثر من 30 ميغابايت.



عندما وصلنا إلى التخطيط ، قررنا إجراء التطوير بحيث لا يكون هناك تكرار للرمز - قمنا بالتخطيط حتى نتمكن من تكييفه مع الأجهزة المختلفة. لقد قام متخصصو تحسين محركات البحث بعمل رائع في هذه المشكلة ، وأخبروا الكتل التي تعتمد على تحسين محركات البحث وأيها لا تعتمد. لقد أبرزنا CSS الحرجة. أدت كل هذه الإجراءات البسيطة إلى حقيقة أن الصفحة على موقع الويب أحادي العلامة التجارية لا يزيد وزنها في المتوسط ​​عن 20 كيلوبايت ويتم فتحها على الفور تقريبًا.



كانت هناك أيضًا نتائج غير متوقعة. في بداية المشروع ، بدأنا في تجميع الوثائق ليس بالشكل الذي يكتبه الجميع عادةً ، مع قائمة بالمكونات وقائمة بوظائفها. قمنا بتوثيق كل شيء بشكل عام: أوامر بدء التشغيل ، التبعيات ، البيئات ، أنماط الكود ، إلخ. وفعلوا كل هذا ، بشكل عام ، لأنفسهم فقط. ولكن عندما كان كل شيء قد بدأ للتو ، كان هناك خمسة أشخاص في المشروع ، والآن أصبح هناك 20 منهم.



والآن أصبح من الأسهل بكثير علينا تحديث الموظفين الجدد - لقد سمحنا لهم فقط بدراسة الوثائق لبضعة أيام ، وبعد ذلك أصبحوا جاهزين تمامًا للانخراط في مهام قتالية بمفردهم.



All Articles