🎵 🧔🏻 👨‍👦‍👦 طرق التعامل مع التعليمات البرمجية القديمة باستخدام GitLab كمثال 📦 🙁 👤

يمكنك الغش إلى ما لا نهاية في ما إذا كان GitLab منتجًا جيدًا. من الأفضل إلقاء نظرة على الأرقام: وفقًا لنتائج جولة الاستثمار ، كان تقييم GitLab 2.7 مليار دولار ، بينما كان التقييم السابق 1.1 مليار دولار. وهذا يعني نموًا سريعًا وستوظف الشركة المزيد والمزيد من المطورين الأماميين.

هذه هي قصة ظهور الواجهة الأمامية في GitLab.

هذا رسم بياني لعدد البائعين الأماميين في GitLab ، بدءًا من عام 2016 ، عندما لم يكونوا موجودين على الإطلاق ، وينتهي في عام 2019 ، عندما كان هناك بالفعل عشرات منهم. لكن GitLab نفسها كانت موجودة منذ 7 سنوات. لذلك ، حتى عام 2017 ، تم كتابة الرمز الرئيسي على الواجهة الأمامية بواسطة مطوري الواجهة الخلفية ، والأسوأ من ذلك ، مطورو الواجهة الخلفية على Ruby on Rails (لا نريد بأي حال من الأحوال الإساءة إلى أي شخص وشرح أدناه ما نتحدث عنه).

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

حول المتحدث: إيليا كليموف (xanf) مهندس الواجهة الأمامية في GitLab. قبل ذلك ، كان يعمل في الشركات الناشئة والاستعانة بمصادر خارجية ، وقاد شركة صغيرة الاستعانة بمصادر خارجية. ثم أدركت أنه لم يكن لدي الوقت للعمل على المنتج بعد ، وجئت إلى GitLab.

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

في GitLab ، كما هو الحال في العديد من المشاريع الأخرى ، يهاجرون تدريجيًا من التقنيات القديمة إلى شيء أكثر صلة:

كوفسكريبت في جافا سكريبت. لم يتمكن المطورون على Ruby on Rails ، عندما بدأوا المشروع ، من المساعدة ولكن الانتباه إلى CoffeeScript ، الذي يشبه إلى حد كبير Ruby.
JQuery Vue. , JQuery. GitLab SPA. server-side rendering progressive enhancement, Vue-. , : Vue-, .
Karma Jest. Jest - . Karma , , .
REST GraphQL , , Vuex Apollo. Vuex, Redux Vue, Apollo local state , . GraphQL , .

في نفس الوقت ، يتم الاستبدال في عدة اتجاهات في وقت واحد ، في المشروع يوجد في وقت واحد رمز قديم في مراحل مختلفة.

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

علاوة على ذلك: فصول مكتوبة ذاتيًا في jQuery ومكونات Vue ، وكأعلى نقطة ، ميزات حديثة جديدة مكتوبة مع Vuex و Apollo و Jest ، إلخ.

هذا هو شكل الرسم البياني للمساهمة على GitLab.

في ذلك - وهذا مهم جدًا لفهم جوهر القصة وكل آلامي - يمكن تمييز عدة أجزاء:

الإعداد في منطقة أبريل. "شهر العسل" عندما بدأت العمل في GitLab. في هذا الوقت ، يتم إعطاء المبتدئين مهام أسهل.
من نهاية أبريل وحتى منتصف مايو ، لم يكن هناك سوى عدد قليل من الانتهاكات - فترة من الإنكار : "لا ، لا يمكن أن يكون كل شيء يتم بهذه الطريقة!" حاولت أن أفهم أين لا أفهم شيئًا ، لذلك هناك عدد قليل من الالتزامات.
النصف الثاني من شهر مايو هو الغضب : "أنا لا أهتم بكل شيء - أحتاج إلى نقل الإنتاج ومشاركة الميزات ومحاولة القيام بشيء حيال ذلك."
بداية حزيران (صفر) هي حالة من الاكتئاب . لم تكن هذه عطلة ، شاهدت وفهمت أن يدي كانت تتساقط ، ولا أعرف ماذا أفعل بها.
بعد ذلك ، اتفقت مع نفسي ، وقررت أنني تم تعييني كمحترف ، ويمكنني تحسين GitLab. في شهري يونيو ويوليو ، عرضت عددًا كبيرًا من التحسينات. لم يكن لكل منهم صدى لأسباب نتحدث عنها.
أنا الآن في مرحلة التبني وأفهم بوضوح: كيف وأين ولماذا وماذا تفعل بكل هذا.

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

لذا ، في ثلاثة أشهر فعلت:

تحكم مجزأ - ثلاثة أزرار.
سلسلة البحث التي تخزن التاريخ المحلي هي مكون أكثر تعقيدًا قليلاً.
سبينر. ولم يتم تجميد هذا المكون حتى الآن.

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

انظر: غاب 12.1 ، غاب 12.2 ، غاب 12.3. يستمر العدو لمدة شهر ، والتحكم المجزأ - 3 العدسات. ما زال سبينر رحل ، سيكون الشخصية الرئيسية لدينا.

ظلت مشكلة إعادة البناء وفلسفة إعادة البناء تواجه الإنسانية منذ فترة طويلة جدًا - منذ آلاف السنين. الآن سأثبت:

« ; , , ; ; , .

, , , : ».

يخبرنا الكتاب المقدس عن كيفية الجمع بين الوظائف القديمة والجديدة. الجزء الثاني من الاقتباس ذو قيمة من وجهة نظر الإدارة: بغض النظر عن كيفية الخروج مع المبادرات ، ستواجه مقاومة كبيرة.

في مرحلة الاكتئاب ، شاهدت الكثير من التقارير حول إعادة هيكلة المشاريع الكبيرة ، لكن حوالي 70 ٪ منهم ذكروني بنكتة.

حديث Javist:
- كيف نسرع تطبيق Java الخاص بنا؟
- أوه ، لذلك كان لدي تقرير عن ذلك! هل تريد ان تقول؟
- لأقول ويمكنني ، سأسرع!

إذا كنت لا تزال تقرر الشروع في مسار إعادة الهيكلة الخطير والهش ، فلدي بعض الوصفات البسيطة التي طورتها لنفسي والتي تعمل في ظروف قريبة من الواقع.

1. العزل

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

مثال بسيط: لقطات من نفس المكان في GitLab ، تم التقاطها بفارق يوم واحد.

كنت مستاء للغاية ، لأنني كنت أعمل على هذا الزر ، وهذا كله بطريقة أو أخرى مشاكل في الزر.

ماذا حدث؟ الأمر بسيط: نقوم بتطوير نظام تصميم ، وكجزء من أداة منفصلة لكتاب القصة لاختبار نظام التصميم ، قمنا بتعطيل CSS GitLab العالمي للتحقق من كيفية عزل مكونات CSS عن CSS العالمية.

التلخيص: لم تعد CSS محفوظةعلى الأقل في GitLab.

أعمل مع جافا سكريبت لمدة 14 عامًا ولم أر أبدًا مشروعًا يحافظ لمدة عام أو عامين على الأقل على CSS مُدار بالكامل. بالمناسبة ، لا يمكن حفظ HTML سواء (في GitLab بالتأكيد).

تم تطوير GitLab لفترة طويلة وخلفية. لقد اتخذوا قرارًا مثيرًا للجدل لاستخدام Bootstrap لأن Bootstrap قدم نظام تخطيط مناسب للخلفية.

ولكن ما هو Bootstrap من حيث فلسفة عزل المكونات؟ هذا هو حوالي 600-700 فئة عالمية (في الواقع ، كل فئة CSS عالمية) تتخلل التطبيق بالكامل. من حيث الإدارة ، لن يأتي أي شيء جيد منه.

الإجراء التالي (دعنا لا نطلق عليه خطأ) - أخذ GitLab Vue.js. كان الاختيار معقولًا ، نظرًا لأن الإطارات الثلاثة ، فإن Vue هو الذي يسمح لك بإعادة كتابة شيء بسلاسة أكبر. لست بحاجة إلى التخلص من تطبيق صفحة واحدة كبير وقصه على الفور ، ولكن يمكنك إعادة كتابة العقد الصغيرة الفردية. الآن يمكن القيام بذلك على Angular ، ولكن قبل 3-4 سنوات ، عندما ظهرت Angular 2 ، لم يكن من الممكن أن تتواجد في صفحة في أكثر من حالة واحدة. التفاعل ممكن أيضًا الآن ، ولكن كل هذا السحر مع عدم وجود خطوة بناء وما إلى ذلك يميل المقاييس نحو Vue.

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

أرى الآن أن هناك المزيد والمزيد من أنظمة التصميم الخاصة بنا ، وهذا أمر جيد.

يتضمن نظام التصميم عزلًا ، ولكن نظرًا لأن GitLab قد كتب بالفعل في Bootstrap ، فإن ما يقرب من 50-60٪ من نظام التصميم الخاص بنا عبارة عن غلاف فوق مكونات Bootstrap / Vue مع انخفاض في وظائفها. يعد ذلك ضروريًا بحيث لا يسمح لك نظام التصميم باستخدام المكون بشكل غير صحيح. إذا تحدثنا عن مكتبة مجردة ، فإن المرونة مهمة هناك ، على سبيل المثال ، القدرة على عمل أي زر تريده. إذا كان بإمكان المغازل في GitLab الحصول على أربعة أحجام معتمدة من قبل المصممين ، فأنت بحاجة إلى عدم السماح للآخرين بالقيام بذلك.

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

يمكنك القول أن React يحتوي على وحدات CSS ، وأنماط Vue تحتوي على أنماط تقوم بنفس الشيء. كن حذرًا جدًا معهم: لا توفر وحدات CSS عزلًا بنسبة 100٪ لأنها تعمل فقط مع الفئات. وباستخدام الأنماط المحددة في Vue ، يمكن تحقيق سيناريو مثير للاهتمام للغاية عندما تقع أنماط المكون العلوي في العنصر الجذر للأصل ، ويتم استخدام سمات البيانات هناك التي تبطئ.

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

العودة إلى الدوار. من الأشهر الثلاثة التي قاتلت معه ، كنت لبعض الوقت منخرطًا في عمل مثير: التنظيف.

الفئة loading-containerهي تفاصيل تنفيذ لغزل ، أي أنها فئة داخل تطبيق غزل. قررنا ، نظرًا لأن CSS لا يتم حفظه ، في Pajamas لإنشاء CSS منفصل يعتمد على Atomic CSS. أنا شخصياً لا أحب مفهوم Atomic CSS ، لكن لدينا ما لدينا.

بمعنى ، كنت منخرطًا في تنظيف الأنماط في رمز المنتج الرئيسي الذي تم تعليقه على العناصر التي هي تفاصيل التنفيذ. يبدو كل شيء بسيطًا جدًا - لأنه ، بالطبع ، هناك اختبارات في GitLab.

2. الاختبارات

تغطي الاختبارات في GitLab كل التعليمات البرمجية وتوفر الموثوقية. وبذلك يكتمل خط الأنابيب خلال 98 دقيقة.

يجمع GitLab 40٪ من وقت العداء العام على GitLab.com لأن GitLab يجمع خطوط الأنابيب لكل طلب دمج.

لقد ألهمتني كثيرًا: حصلت أخيرًا على مشروع حيث يتم تغطية كل شيء في الاختبارات! تغطية رمز الواجهة الخلفية قريبة من 100 ٪ ، وتمت تغطية رمز الواجهة الأمامية في وقت وصولي بنسبة 89.3 ٪.

لسوء الحظ ، اتضح أن معظم هذه التغطية هي قمامة للأسباب التالية:

ينهار عند إجراء تغييرات لا تتعلق بالمكونات ؛
لا ينكسر عند إجراء التغييرات.

سأشرح بأمثلة. أخذنا Jest لأننا اعتقدنا أنه سيسمح لنا في بعض الحالات بعدم كتابة التأكيدات ، ولكن استخدام اللقطات. تكمن المشكلة في أنه إذا لم تقم بتكوين Jest وإضافة المتسلسل الصحيح ، فإن Vue Test Utils يقوم ببساطة بإخراج الدعائم بتنسيق HTML. ثم ، على سبيل المثال ، اتضح الدعائم مع اسم المستخدم ، الذي كان يحتوي على دعائم في المعلمات مع بيانات الاسم ، والتي تم تمرير كائن الكائن إليها. لا تؤدي أي تغييرات في تنسيق البيانات المرسلة إلى فشل اللقطة.

اعتاد مطورو روبي على إجراء الاختبارات ، بشكل تقريبي ، يغطي جميع الأساليب.

عندما نجري اختبارات لمكونات Vue أو React ، نحتاج إلى اختبار سلوك API العام.

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

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

اختبار التثبيت

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

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

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

ونتيجة لذلك ، فإن طلبات الدمج الـ 18 الخاصة بي مع اختبارات إعادة البناء لما مجموعه 8-9 آلاف سطر ، تحول إجمالي التغيير إلى حوالي 20 ألفًا ، لأنه تم قطع 11 ألفًا.

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

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

3. المقاومة

هناك وظيفة أخرى ينتظرها المزيد من المغازل في نظام تصميم GitLab - وهي رموز SVG عادية.

لدينا أيقونات رسمها المصمم المستخدمة في المشروع الرئيسي ، لكنها ليست في نظام التصميم ، لأن GitLab يعاني من طفولة صعبة. على سبيل المثال ، في عام 2019 لا يتم جمع CSS من خلال Webpack ، ولكن بقطعة تسمى Sprockets - هذا هو خط الأنابيب روبي ، لأننا بحاجة إلى إعادة استخدام نفس CSS على الواجهة الأمامية والواجهة الأمامية. ولهذا السبب ، يجب ربط الرموز بمشاريع مختلفة بطرق مختلفة. لذلك ، قام شخص ما بإعادة هيكلة قاعدة التعليمات البرمجية الرئيسية لمدة ثلاثة أشهر حتى تتمكن من ربط الرموز من نظام التصميم بالمشاريع ذات الصلة.

هناك نقطة مهمة هنا ستواجهها حتمًا. إعادة الهيكلة هي عملية التحسين المستمر. ولكن عاجلاً أم آجلاً عليك التوقف.

من الطبيعي تمامًا التوقف ، وليس استكمال إعادة البيع ، ولكن الحصول على تحسينات ملموسة قابلة للقياس.

ولكن إذا كنت تعمل على مشروع قديم ، فسوف تصادف حتمًا أشخاصًا يفعلون ذلك.

هذا يعني أنهم يكتبون بالطريقة القديمة ، لأنهم معتادون عليها. على سبيل المثال ، يقول دعاةنا: "لا أريد أن أعلم هذا الدعابة. لقد كتبت اختبارات لـ Karma لمدة ثلاث سنوات ، ولست بحاجة إلى إضافة وظائف جديدة ، وبما أنها لن تأخذ وظائف بدون اختبارات ، فإليك اختبارًا لـ Karma ".

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

وهذا يعني استبدال عكاز جديد ببساطة لأنه لأسباب معينة لا يمكن إنهاء إعادة البيع إلى النهاية. على سبيل المثال ، إذا كانت لدينا مشاكل في دمج الرموز في قاعدة التعليمات البرمجية الرئيسية ، فيمكننا ترك فئة الأداة المساعدة التي سيتم سحبها من تطبيق CSS العالمي. من الناحية الرسمية ، سيتم حل مهمة العمل ، ولكن من الناحية العملية ، كما هو الحال في تاريخ Lernean hydra: كان هناك 8 أخطاء ، و 4 ثابتة ، و 13 متبقية.

إعادة البناء ، مثل إصلاح المنزل - من المستحيل الانتهاء منه ، يمكنك إيقافه فقط.

أول 80٪ من إعادة البناء تستغرق 20٪ من الوقت ، 80٪ المتبقية من إعادة البناء (تمامًا مثل ذلك) تستغرق 80٪ أخرى من الوقت.

من المهم عدم إدخال عمليات اختراق جديدة أثناء عملية إعادة الهيكلة. صدقوني ، أثناء عملية التطوير ، سيظهرون هم أنفسهم.

4. الأدوات

لحسن الحظ ، حتى قبل وصولي ، شرع GitLab في المسار الصحيح لتقديم أدوات جيدة: Prettier و Vue Test Utils و Jest. على الرغم من أن Prettier نفذت بشكل منحرف.

سأشرح ما هو على المحك. بينما اكتشفت ماذا ولماذا تاريخياً ، جاءت 80٪ من عمليات البحث عبر التزام من 37 ألف سطر من كود التحسين. كان من شبه المستحيل استخدام السجل ، واضطررت إلى تكوين المكون الإضافي لـ VS Code بحيث يستبعد هذا الالتزام عند البحث عن محفوظات التغييرات.

من المؤكد أن الأدوات مهمة ، ولكنك تحتاج إلى اختيارها بعناية. على سبيل المثال ، لدينا Vue ، ولدى Vue أداة اختبار جيدة - Vue Test Utils. ولكن إذا تم إصدار Vue 2 قبل 2-3 سنوات ، فإن Vue Test Utils لم يخرج بعد من الإصدار التجريبي. علاوة على ذلك ، وفقًا للمعلومات الداخلية ، في الوقت الحالي لا يكتب المطور الوحيد لـ Vue Test Utils على Vue.

في عملية اختيار الأدوات ، تلعب القذف بالمصير ، وتحاول حقًا الفوز.

تعرض GitLab لإصابة في مرحلة الطفولة باستخدام CoffeeScript. هذا هو السبب في أنه من المستحيل دفع حتى الفكرة النظرية للكتابة في TypeScript في GitLab. كل شيء ينقسم إلى حجة واحدة بسيطة: ألا تكون هي نفسها كما في CoffeeScript عندما تنتهي اللغة التي يتم تجميعها في JavaScript.

عند اختيار الأدوات ، جرب حتى يمكن استبدال الأداة ، أو ، في الحالات القصوى ، صيانتها بشكل مستقل.

نحن في GitLab نستخدم شيئًا رائعًا يسمى Danger.

هذه لقطة شاشة حقيقية لموقعهم على الويب في عام 2019. لكن ، قال الزملاء أنه في الواقع في عام 2019 قد يبدو الموقع مثل أي شيء.

الخطر هو روبوت يحتل حالة وسيطة بين اللتر في CI الخاص بك والمبادئ التوجيهية المكتوبة. يمكن توسيع هذا البوت وسيأتي لسحب الطلب أو ، كما يتم الاتصال بنا بشكل صحيح ، دمج الطلب وترك التعليقات مثل:

"يوجد تعليق تعطيل ESlint في هذا الملف ، قم بإصلاحه."
"كان هذا الملف يحكمه هذا الشخص. ربما تحتاج إلى مراجعة ذلك ".

في رأيي ، هذا إطار جيد جدًا ومهم وقابل للتوسيع لرصد حالة قاعدة التعليمات البرمجية.

5. التجريد

سأبدأ بمثال. قبل بضعة أشهر ، رأيت الأخبار: "تخلص GitHub من jQuery. لقد قطعنا طريقًا صعبًا ولم نعد نستخدم jQuery ". بطبيعة الحال ، اعتقدت أننا بحاجة أيضًا إلى التخلص من jQuery في GitLab.

أظهر بحث سريع أن jQuery يستخدم في 300 ملف. يبدو الأمر مخيفًا ، ولكن لا شيء - العيون خائفة ، والأيدي تفعل. لكن لا! jQuery هو غراء متكامل في قاعدة كود GitLab ، لأن لدينا Bootstrap.

تمت كتابة Bootstrap في الأصل في jQuery. هذا يعني أنه إذا كنت بحاجة ، على سبيل المثال ، للقبض على حدث الافتتاح المنسدل في Bootstrap ، فهذا حدث jQuery. لا يمكنك اعتراضها أصلاً.

هذا هو أول شيء يجب عليك تجريده عند العمل مع التعليمات البرمجية القديمة. إذا كان لديك jQuery لا يمكنك التخلص منه ، فاكتب Event Emitter الخاص بك ، والذي سيختبئ داخل العمل مع أحداث jQuery.

عندما يأتي المستقبل المشرق ، يمكننا إزالة jQuery ، ولكن الآن ، آسف ، تحتاج إلى تركيز govnokod. في مشروع إرث عادي ، يتم نشره بالتساوي في جميع أنحاء التعليمات البرمجية. اجمعها في اختناقات عليها علامات "لا تدخل بدون بدلة حماية كيميائية".

6. المقاييس

لا يمكنك فعل شيء لا يمكن قياس نتائجه. في GitLab ، نقيس كل ما نقوم به لمعرفة موضوعية أن الشفرة تعمل بشكل أفضل.

على سبيل المثال ، لدينا جدول ترحيل من اختبارات Karma (باللون الأزرق) إلى Jest (باللون الأخضر):

ترى أن هناك تقدمًا تدريجيًا. ولدينا الكثير من هذه الجداول. ولكن من المهم أن نفهم أنه ليس كل شيء ينتهي دائمًا بشكل جيد.

سأعطي مثالاً آخر (يبدأ العرض التوضيحي في التقرير من هذه اللحظة).

فيما يلي واجهة طلب الدمج المعتادة في إنتاج GitLab. من الواضح أنه يمكننا طي الملفات ، والنقر على العنوان وسيبدأ الملف في الانهيار.

ما رأيك ، كم من الوقت يستغرق لطي ملف من 50 سطرًا ، في حين أن الجهاز مع الجيل الثامن Core i7 ملتوي لتحقيق أقصى أداء؟ كم من الوقت يستغرق النشر؟

الوقت الذي يستغرقه الملف في الانهيار يتراوح من 7 إلى 15 ثانية. يحدث النشر على الفور. قبل إعادة البيع ، عمل كلاهما بسرعة متساوية.

هذا هو السبب في أنه من المهم جدًا أن يكون لديك مقاييس.

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

عند إغلاق طلب الدمج ، على سبيل المثال ، يجب تحديث 20 ألف اشتراك في المتجر عند تحديث المتجر. إذا تم حذف الصف ، يجب إزالته من التبعيات. ثم الرياضيات البسيطة: تحتاج إلى النظر إلى مجموعة من 20 ألف عنصر للعثور على العناصر التي تحتاج إلى إزالتها. لنفترض أن هناك 500 خط من هذا النوع ، ولكل سطر عدة مكونات. والنتيجة هي عملية رياضية O (N) ، أي O (20000) * 500. تم تشغيل JavaScript طوال هذا الوقت.

يحدث النشر على الفور ، لأن إضافة التبعية ما هي إلا دفعة إلى الصفيف ، أي عملية رياضية O (1).

يؤدي تحسين جودة الشفرة أحيانًا إلى تدهور الأداء والمقاييس الأخرى. من المهم جدا قياسها.

باختصار: عزل الكود السيئ وتتبع المقاييس.

legacy — . , – TechLead Conf — , . – , legacy Python, PHP.

, ++, , FrontendConf. .

طرق التعامل مع التعليمات البرمجية القديمة باستخدام GitLab كمثال