يوم مظلم ل Vue.js

لقد اندهشت اليوم من الكيفية التي انزلق بها مجتمع Vue.js الإيجابي والودي عادة في مواجهة حزينة. منذ أسبوعين ، نشر مُنشئ Vue Ewan Yu اقتراحًا (RFC) مع واجهة برمجة التطبيقات لميزة جديدة للمكونات في Vue 3.0 القادمة. اليوم ، تسبب نقاش نقدي حول Reddit وتعليقات مشابهة على Hacker News في تدفق المطورين إلى RFC الأصلي مع غضب ، وأحيانًا قاسية جدًا.

ذكرت شيئا مثل ما يلي:

• يجب إعادة كتابة رمز Vue بطريقة جديدة تمامًا ، لأنه سيتم إزالة بناء الجملة الموجود
• تبين أن كل الوقت الذي يقضيه الأشخاص في دراسة Vue كان بلا جدوى ، لأن كل شيء سيتغير
• تحول بناء الجملة الجديد إلى ما هو أسوأ من القديم ، ولا يعطي بنية واضحة ويولد رمز معكرونة
• نشر فريق Vue تغييرًا كبيرًا دون استشارة أي شخص
• فو يتحول إلى رد فعل!
• أم لا ، في AngularJS / الزاوي!
• جميع HTML يجب الآن أن تكون مكتوبة في سطر واحد ضخم!

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

كنت الشخص الذي كتب هذا التعليق الأول. اتضح أنني تلقيت إشعارًا حول RFC الجديد ، وقرأته فورًا ووجدت أن هذا هو بالضبط ما أود من Vue 3.0 وكتب تعليقًا عليه في غضون 15 دقيقة بعد نشر RFC للتعبير عن امتناني. في هذا المنشور ، آمل الكشف عن هذا الموضوع ، لماذا اعتبر واجهة برمجة التطبيقات الجديدة فكرة جيدة. لكن أولاً ، دعني أجيب على تصريحات النقاد.

أظن أن الكثير من الناس أصبحوا محرجين بعد قراءة Hacker News أو Reddit ، حيث كان هناك العديد من التعليقات غير الموثوقة التي كانت مضللة ، لكنهم لم يقرؤوا الجملة الأصلية . أضاف إيفان بالفعل قسم الأسئلة والأجوبة الذي يجيب على معظم الأسئلة:

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

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

تخيل مكونًا يسمح للمستخدم بإدخال معلومات حول حيوانه الأليف ويتم تحديثه عند إدخال البيانات. في هذه الحالة:

• يتم تحديث نص العنوان اعتمادا على اسم حيوان أليف.
• يعتمد لون الحد على اللون المحدد للحيوان ، بما في ذلك الظل ، ويتم حساب لونه بناءً على اللون المحدد.
• يعتمد حجم خط الرأس ونمط الحد على حجم الحيوان المحدد من قبل المستخدم

مظهر المكون

يمكنك رؤية العرض التوضيحي المباشر مع المكون هنا ، وكذلك الاطلاع على التعليمات البرمجية المصدر لبرنامج Vue 2.x هنا (ملف المكونات / Vue2.vue).

النظر في جزء جافا سكريبت من هذا المكون:

data() { return { petName: "", petColor: "#000", petSize: "" }; }, computed: { header: function() { if (this.petName) { return "My Pet " + this.petName; } return "Enter Pet Details"; }, petColorDarker: function() { return tinycolor(this.petColor) .darken() .toString(); }, shadow: function() { return "2px 2px " + this.petColorDarker; }, borderStyle: function() { switch (this.petSize) { case "Small": return "dotted"; case "Medium": return "dashed"; default: return "solid"; } }, headerSize: function() { switch (this.petSize) { case "Small": return "12px"; case "Large": return "60px"; default: return "30px"; } } } 

في الأساس ، لدينا نوع من البيانات والخصائص المختلفة المحسوبة من هذه البيانات. لاحظ أنه في Vue 2.x لا توجد طريقة لوضع الأشياء ذات الصلة معًا. لا يمكننا وضع petColor بجوار petColorDarker محسوب ، لأنه في Vue 2.x يتم تجميعها حسب النوع.

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

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

  setup() { // Pet name const petName = value(""); const header = computed(() => { if (petName.value) { return "My Pet " + petName.value; } return "Enter Pet Details"; }); // Pet color const petColor = value("#000"); const petColorDarker = computed(() => { return tinycolor(petColor.value) .darken() .toString(); }); const shadow = computed(() => "2px 2px " + petColorDarker.value); // Pet size const petSize = value(""); const borderStyle = computed(() => { switch (petSize.value) { case "Small": return "dotted"; case "Medium": return "dashed"; default: return "solid"; } }); const headerSize = computed(() => { switch (petSize.value) { case "Small": return "12px"; case "Large": return "60px"; default: return "30px"; } }); // All properties we can bind to in our template return { petName, header, petColor, shadow, petSize, borderStyle, headerSize }; } 

لاحظ أن:

• من السهل بشكل مثير للدهشة تجميع الكيانات ذات الصلة معًا.
• بالنظر إلى القيمة المرجعة لوظيفة الإعداد ، نرى على الفور ما يمكننا الوصول إليه في القالب.

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

 function usePetName() { const petName = value(""); const header = computed(() => { if (petName.value) { return "My Pet " + petName.value; } return "Enter Pet Details"; }); return { petName, header }; } function usePetColor() { const petColor = value("#000"); const petColorDarker = computed(() => { return tinycolor(petColor.value) .darken() .toString(); }); return { petColor, petColorDarker }; } function petSizeToBorderStyle(sizeWrapper) { const borderStyle = computed(() => { switch (sizeWrapper.value) { case "Small": return "dotted"; case "Medium": return "dashed"; default: return "solid"; } }); return { borderStyle }; } function petSizeToHeaderSize(petSizeWrapper) { const headerSize = computed(() => { switch (petSizeWrapper.value) { case "Small": return "12px"; case "Large": return "60px"; default: return "30px"; } }); return { headerSize }; } export default { setup() { const { petName, header } = usePetName(); const { petColor, petColorDarker } = usePetColor(); const shadow = computed(() => "2px 2px " + petColorDarker.value); const petSize = value(""); const { borderStyle } = petSizeToBorderStyle(petSize); const { headerSize } = petSizeToHeaderSize(petSize); return { petName, header, petColor, shadow, petSize, borderStyle, headerSize }; } }; 

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

هل كان لدى Vue يوم أكثر قتامة؟ على الأرجح لا. المجتمع السابق حول تقسيم المشروع. لكن لدي أمل في أن ينظر الناس مرة أخرى إلى RFC ، الذي لا يكسر أي شيء ، لأنه يسمح للأشخاص بتجميع الكيانات حسب النوع ، إذا أعجبهم ذلك ، ولكنه يسمح أيضًا بالكثير - رمز أكثر قابلية للنظافة ونظيفة ، والمزيد من الخيارات لـ المكتبات والدعم الكامل Typescript.

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