الزاوي مقابل رد الفعل مقابل فو - المقارنة

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

Javascripts في 2017 - الأمور ليست سهلة هذه الأيام!

لذا ، كيف يفترض بنا أن نقرر؟

قبل أن نبدأ - SPA أم لا؟

يجب أولاً اتخاذ قرار واضح بشأن ما إذا كنت تحتاج إلى تطبيق من صفحة واحدة (SPA) أو إذا كنت تفضل اتباع نهج متعدد الصفحات.

بداية اليوم: الزاوي ، رد فعل و Vue

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

فيما يلي الأسئلة التي سنتناولها اليوم:

  • ما مدى نضج الأطر / المكتبات؟
  • هل من المحتمل أن تكون الأطر موجودة لفترة من الوقت؟
  • ما مدى شمول ومساعدة مجتمعاتهم المقابلة؟
  • ما مدى سهولة العثور على مطورين لكل إطار عمل؟
  • ما هي مفاهيم البرمجة الأساسية للأطر؟
  • ما مدى سهولة استخدام الأطر للتطبيقات الصغيرة أو الكبيرة؟
  • كيف يبدو منحنى التعلم لكل إطار؟
  • أي نوع من الأداء يمكن أن تتوقعه من الأطر؟
  • أين يمكنك إلقاء نظرة فاحصة أسفل الغطاء؟
  • كيف يمكنك البدء في تطوير مع الإطار المختار؟

1. دورة الحياة والاعتبارات الاستراتيجية

1.1 بعض التاريخ

الزاوي هو إطار جافا سكريبت القائم على TypeScript. تم تطويرها وصيانتها من قِبل Google ، ووصفت بأنها "خارقة JavaScript MVWFramework". الزاوي (أيضًا "الزاوي 2+" أو "الزاوي 2" أو "ng2") هو الخلف الذي تمت إعادة كتابته ، وهو غير متوافق في الغالب مع AngularJS (أيضًا "Angular.js" أو "AngularJS 1.x"). بينما تم إصدار AngularJS (الإصدار القديم) في البداية في أكتوبر 2010 ، إلا أنها لا تزال تحصل على إصلاحات الأخطاء ، إلخ. - تم تقديم Angular (sans JS) الجديد في سبتمبر 2016 كإصدار 2. أحدث إصدار رئيسي هو الإصدار 4 ، كما تم تخطي الإصدار 3. يتم استخدام Angular بواسطة Google و Wix و weather.com و healthcare.gov و Forbes (وفقًا لـ madewithangular و stackshare و libscore.com).

يوصف React بأنه "مكتبة JavaScript لبناء واجهات المستخدم". تم إصدار React في مارس 2013 ، وتم تطوير React وصيانته بواسطة Facebook ، والذي يستخدم مكونات React على عدة صفحات (وليس كتطبيق من صفحة واحدة). وفقًا لهذه المقالة من قبل كريس كورديل ، يستخدم React في Facebook أكثر بكثير من Angular في Google. يستخدم React أيضًا من قبل Airbnb و Uber و Netflix و Twitter و Pinterest و Reddit و Udemy و Wix و Paypal و Imgur و Feedly و Stripe و Tumblr و Walmart وغيرها (وفقًا لموقع Facebook و stackshare و libscore.com).

يعمل Facebook على إصدار React Fiber. سوف يتغير React تحت الغطاء - من المفترض أن يكون التقديم أسرع بكثير نتيجة لذلك - لكن الأمور ستكون متوافقة مع الإصدارات السابقة بعد التغييرات. تحدث Facebook عن التغييرات في مؤتمر المطورين في أبريل 2017 ، وتم إصدار مقال غير رسمي حول الهيكل الجديد. تم إصدار React Fiber مع React 16 في سبتمبر 2017.

تعد Vue واحدة من أسرع أطر JS نمواً في عام 2016. تصف Vue نفسها بأنها "MVVM بديهية وسريعة وقابلة للتكوين لبناء واجهات تفاعلية." تم إصدارها لأول مرة في فبراير 2014 من قبل موظف Google السابق إيفان يو (BTW: Evan كتب منشورًا مدونًا مثيرًا للاهتمام حول أنشطة التسويق والأرقام في الأسبوع الأول من ذلك الوقت. لقد كان نجاحًا كبيرًا ، خاصة وأن Vue تحصل على الكثير من الجر مثل عرض رجل واحد دون دعم شركة كبيرة. لدى إيفان حاليًا فريق من عشرات المطورين الأساسيين. في عام 2016 ، تم إصدار الإصدار 2. يتم استخدام Vue بواسطة Alibaba و Baidu و Expedia و Nintendo و GitLab - يمكن العثور على قائمة بالمشروعات الأصغر على madewithvuejs.com.

جميع الأطر الثلاثة متاحة تحت رخصة MIT.

React يتم شحنها مع ملف ترخيص BSD3 خاص حتى سبتمبر 2017. كان هناك الكثير من المناقشات حول ملف براءات الاختراع. إذا كنت مهتمًا بتاريخ هذا ، يمكنك قراءة مناقشة قضية جيثب هذه ، والأسباب والتاريخ وراء ملف براءة الاختراع (بواسطة المهندس السابق فيسبوك جيمس إيد) ، لماذا لا يجب أن تكون خائفًا (بقلم دينيس والش) ، تحذير من استخدام الشركات الناشئة (بواسطة راؤول Kripalani) وبيان سابق من Facebook حول هذا الموضوع: شرح ترخيص React's. على أي حال - يجب ألا يهم الجميع كما أعلن Facebook أخيرًا ، أن React ستحصل على ترخيص MIT.

1.2 التنمية الأساسية

كما لوحظ بالفعل ، يتم دعم واستخدام Angular و React من قبل الشركات الكبرى. Facebook و Instagram و Whatsapp يستخدمونه لصفحاتهم. تستخدمه Google في العديد من المشاريع: على سبيل المثال ، تم تنفيذ واجهة مستخدم Adwords الجديدة باستخدام Angular & Dart. مرة أخرى ، يتم تحقيق Vue من قبل مجموعة من الأفراد الذين يتم دعم عملهم عبر Patreon وغيرها من وسائل الرعاية. يمكنك أن تقرر بنفسك ما إذا كان هذا إيجابيًا أم سلبيًا. يعتقد Matthias Götzke أن فريق Vue الصغير يمثل فائدة لأنه يؤدي إلى رمز / واجهة برمجة تطبيقات أنظف وأقل من الهندسة.

دعنا نلقي نظرة على بعض الإحصاءات: يسرد Angular 36 شخصًا على صفحة فريقهم ، وقوائم Vue تضم 16 شخصًا ، وليس لدى React صفحة فريق. يوجد لدى Github ، Angular أكثر من 25000 نجم و 463 مساهمًا ، و React لديها أكثر من 70000 نجم و> 1000 مشارك ، وفوي لديها ما يقرب من 60000 نجم و 120 مشاركًا فقط. يمكنك أيضًا التحقق من Github Stars History لمعرفة الزاوي ، React and Vue. مرة أخرى ، يبدو Vue تتجه بشكل جيد للغاية. وفقًا لموقع bestof.js ، حصلت Angular 2 على مدى الأشهر الثلاثة الماضية بمعدل 31 نجمًا يوميًا ، و React 74 stars ، و Vue.JS 107 stars.

A Github Stars History for Angular، React & Vue (المصدر)

تحديث: بفضل Paul Henschel لتوضيح اتجاهات npm. يعرضون عدد التنزيلات لحزم npm المعينة وأكثر فائدة كنظرة خالصة لنجوم Github:

يتم تنزيل أرقام npm لحزم npm المحددة في السنتين الأخيرتين.

1.3 دورة حياة السوق

من الصعب مقارنة Angular و React و Vue في Google Trends بسبب اختلاف الأسماء والإصدارات. يمكن أن تكون إحدى الطرق التقريبية للبحث في فئة "الإنترنت والتقنيات". هذه هي النتيجة:

اوه حسنا. لم يتم إنشاء Vue قبل 2014 - لذلك هناك شيء خاطئ هنا. لا فو هي الفرنسية عن "الرأي" ، "البصر" أو "الرأي". ربما هذا كل شيء. المقارنة بين "VueJS" و "Angular" أو "React" ليست عادلة أيضًا ، لأن VueJS بالكاد لها أي نتائج مقارنة بالآخرين.

لنجرب شيئًا آخر ، إذن. يعطي رادار التكنولوجيا من ThoughtWorks انطباعًا جيدًا عن كيفية تطور التقنيات مع مرور الوقت. Redux في مرحلة التبني (يتم تبنيه في المشاريع!) ، وكان لا يقدر بثمن في عدد من مشاريع ThoughtWorks. Vue.js في المرحلة التجريبية (جربها!). يوصف بأنه بديل خفيف الوزن ومرن للزاوي مع منحنى التعلم أقل. الزاوية 2 في مرحلة التقييم - يتم استخدامها بنجاح من قبل فرق ThoughtWork ، لكن ليس توصية قوية حتى الآن.

وفقًا لاستطلاع Stackoverflow 2017 الأخير ، فإن React محبوب بنسبة 67٪ من المطورين الذين شملهم الاستطلاع و AngularJS بنسبة 52٪. يسجل "عدم الاهتمام بمواصلة التطوير" أعدادًا أعلى لـ AngularJS (48٪) مقابل React (33٪). Vue ليست في أعلى 10 في كلتا الحالتين. ثم هناك دراسة statejs.com تقارن "أطر العمل الأمامية". الحقائق الأكثر إثارة للاهتمام: React and Angular لديها وعي 100 ٪ ، وال Vue غير معروفة ل 23 ٪ من الأشخاص الذين شملهم الاستطلاع. فيما يتعلق بالرضا ، سجل React 92 ٪ لـ "سوف يستخدم مرة أخرى" ، و Vue 89 ٪ و Angular 2 فقط 65 ٪.

ماذا عن استطلاع آخر لرضا العملاء؟ بدأ إريك إليوت واحدة في أكتوبر 2016 لتقييم Angular 2 و React. 38 ٪ فقط من الأشخاص الذين شملهم الاستطلاع سيستخدمون الزاوية 2 مرة أخرى ، بينما 84 ٪ سيستخدمون React مرة أخرى.

1.4 الدعم طويل الأجل والهجرات

واجهة برمجة تطبيقات React مستقرة تمامًا ، كما ينص Facebook على مبادئ التصميم الخاصة بهم. هناك أيضًا بعض البرامج النصية لمساعدتك في الانتقال من واجهة برمجة التطبيقات الحالية إلى إصدار أحدث: راجع كود كود رد الفعل. عمليات الترحيل سهلة للغاية ولا يوجد شيء (مطلوب) كإصدار دعم طويل الأجل. في منشور Reddit ، يلاحظ الأشخاص أن الترقيات لم تكن أبدًا مشكلة. كتب فريق React منشورًا مدونًا عن مخطط إصداراتهم. عند قيامهم بإضافة تحذير إهمال ، فإنهم يحتفظون به لبقية إصدار الإصدار الحالي قبل تغيير السلوك في الإصدار الرئيسي التالي. لا يوجد أي تغيير مخطط له على إصدار رئيسي جديد - تم إصدار v14 في أكتوبر 2015 ، الإصدار v15 تم نشره في أبريل 2016 ، و v16 ليس له تاريخ إصدار بعد. لا ينبغي أن تكون الترقية مشكلة ، كما لاحظ مؤخرًا مطور React الأساسي.

فيما يتعلق بـ Angular ، هناك منشور في المدونة حول الإصدار والإصدار يبدأ بـ الإصدار v2. سيكون هناك تحديث رئيسي واحد كل ستة أشهر ، وستكون هناك فترة إهمال لا تقل عن ستة أشهر (إصداران رئيسيان). هناك بعض واجهات برمجة التطبيقات التجريبية التي تم وضع علامة عليها في الوثائق مع فترات إهمال أقصر. لا يوجد أي إعلان رسمي حتى الآن ، ولكن وفقًا لهذه المقالة ، أعلن فريق Angular عن إصدارات طويلة الأجل للدعم تبدأ من Angular 4. وسيتم دعم هذه الإصدارات لمدة عام واحد على الأقل بعد إصدار الإصدار الرئيسي التالي. هذا يعني أن Angular 4 سيتم دعمها حتى سبتمبر 2018 على الأقل مع إصلاحات الأخطاء والتصحيحات الهامة. في معظم الحالات ، يكون تحديث الزاوي من v2 إلى v4 سهلاً مثل تحديث تبعيات الزاوي. تقدم الزاوي أيضًا معلومات إرشادية حول ما إذا كانت هناك حاجة لمزيد من التغييرات.

يجب أن تكون عملية التحديث لـ Vue 1.x إلى 2.0 سهلة بالنسبة لتطبيق صغير - أكد فريق المطورين أن 90٪ من واجهات برمجة التطبيقات بقيت على حالها. هناك أداة مساعدة لترحيل الترقية - تشخيص لطيفة تعمل على وحدة التحكم. لاحظ أحد المطورين أن التحديث من v1 إلى v2 لا يزال غير ممتع في تطبيق كبير. لسوء الحظ ، لا توجد خريطة طريق (عامة) واضحة حول الإصدار الرئيسي التالي أو معلومات حول خطط لإصدارات LTS.

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

1.5 الموارد البشرية والتوظيف

إذا كان لديك مطورو HTML داخليون لا يريدون معرفة المزيد من Javascript ، فمن الأفضل لك اختيار Angular أو Vue. React يستلزم المزيد من Javascript (نتحدث عن هذا لاحقًا).

هل لديك مصممون يعملون بالقرب من الكود؟ يلاحظ المستخدم "pier25" على Reddit that React منطقية إذا كنت تعمل على Facebook ، حيث يكون الجميع مطورًا خارقًا. في العالم الواقعي ، لن تجد دائمًا مصممًا يمكنه تعديل JSX - على هذا النحو ، سيكون العمل باستخدام قوالب HTML أسهل كثيرًا.

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

الزاوي جيد أيضًا إذا كان لديك مطورين لديهم خلفية موجهة للكائنات أو لا يحبون Javascript. لدفع هذه النقطة إلى المنزل ، إليك اقتباس من Mahesh Chand:

أنا لست مطور JavaScript. تتمثل خلفيتي في بناء أنظمة مؤسسية كبيرة الحجم باستخدام منصات برامج "حقيقية". لقد بدأت في عام 1997 في إنشاء تطبيقات باستخدام C و C ++ و Pascal و Ada و Fortran. (...) أستطيع أن أقول بوضوح أن JavaScript هو مجرد رطانة بالنسبة لي. كونه MVP Microsoft وخبير ، لدي فهم جيد من TypeScript. كما أنني لا أرى Facebook كشركة لتطوير البرمجيات. ومع ذلك ، فإن Google و Microsoft هما بالفعل أكبر مبتكري البرامج. أشعر براحة أكبر في العمل مع منتج يتمتع بدعم قوي من Google و Microsoft. أيضًا (...) مع خلفيتي ، أعلم أن Microsoft لديها خطط أكبر من أجل TypeScript.

حسنًا ، إذن ... ربما ينبغي أن أذكر أن ماهيش هو المدير الإقليمي في Microsoft.

2. مقارنة رد الفعل ، الزاوي و Vue

2.1 المكونات

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

كلاً من React و Vue يتفوقان في التعامل مع المكونات الغبية: وظائف صغيرة عديمة الحالة تتلقى عناصر الإدخال والإرجاع كمخرجات.

2.2 Typescript vs. ES6 vs.

يركز React على استخدام Javascript ES6. يستخدم Vue Javascript ES5 أو ES6.

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

ربما يجب أن تعلم أيضًا أنه يمكنك استخدام Flow لتمكين التحقق من النوع داخل React. إنه مدقق كتابة ثابت تم تطويره بواسطة Facebook لجافا سكريبت. يمكن أيضًا دمج التدفق في VueJS.

إذا كنت تكتب الشفرة في TypeScript ، فلن تكتب JavaScript قياسيًا بعد الآن. على الرغم من نموه ، إلا أن TypeScript لا يزال لديه قاعدة مستخدم صغيرة مقارنة بقاعدة لغة JavaScript بأكملها. قد يكون أحد المخاطر هو أنك تتحرك في الاتجاه الخاطئ لأن TypeScript قد يختفي أيضًا بمرور الوقت - رغم أنه من غير المحتمل. بالإضافة إلى ذلك ، يضيف TypeScript الكثير من (التعلم) إلى المشروعات - يمكنك قراءة المزيد حول هذا الموضوع في مقارنة Angular 2 مقابل React بواسطة Eric Elliott.

2.3 قوالب - JSX أو HTML

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

JSX عبارة عن معالج مسبق اختياري لبناء جملة يشبه HTML والذي سيتم تجميعه في Javascript لاحقًا. يحتوي على بعض المراوغات - على سبيل المثال ، تحتاج إلى استخدام className بدلاً من class ، لأن الأخير اسم محمي في Javascript. JSX هي ميزة كبيرة للتطوير ، لأن لديك كل شيء في مكان واحد ، وإكمال التعليمات البرمجية وفحص وقت الترجمة تعمل بشكل أفضل. عندما تقوم بإجراء خطأ مطبعي في JSX ، فلن يتم تجميع React ، ويقوم بطباعة رقم السطر الذي حدث فيه الخطأ المطبعي. فشل الزاوي 2 بهدوء في وقت التشغيل (هذه حجة ربما تكون غير صالحة إذا كنت تستخدم AOT مع الزاوي).

يعني JSX أن كل شيء في React هو Javascript - يتم استخدامه لكل من قوالب JSX والمنطق. يشير Cory House إلى ذلك في مقاله من يناير 2016: "Angular 2 يواصل وضع" JS "في HTML. React تضع "HTML" في JS ". هذا شيء جيد ، لأن Javascript أقوى من HTML.

يتم تحسين قوالب الزاوي HTML مع لغة الزاوي الخاصة (أشياء مثل ngIf أو ngFor). بينما يتطلب React معرفة JavaScript ، فإن Angular يفرض عليك تعلم بناء جملة Angular.

ميزات Vue "مكونات ملف واحد". هذا يبدو وكأنه مفاضلة فيما يتعلق بفصل المخاوف - القوالب والبرامج النصية والأنماط في ملف واحد ولكن في ثلاثة أقسام مختلفة ، مرتبة. هذا يعني أنك تحصل على تسليط الضوء على بناء الجملة ، ودعم CSS واستخدام أسهل للمعالجات الأولية مثل Jade أو SCSS. لقد قرأت في مقالات أخرى ، أن JSX أسهل في تصحيح الأخطاء لأن Vue لن تعرض أخطاء بناء جملة HTML غير صالحة. هذا ليس صحيحًا لأن Vue يحول HTML لتقديم وظائف - لذلك تظهر الأخطاء دون مشاكل (شكرًا لـ Vinicius Reis على التعليق والتصحيح!).

ملاحظة جانبية: إذا كنت تحب فكرة JSX وترغب في استخدامها في Vue ، يمكنك استخدام babel-plugin-convert-vue-jsx.

2.4 الإطار مقابل المكتبة

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

React و Vue ، من ناحية أخرى ، مرنة عالميا. يمكن إقران مكتباتهم بجميع أنواع الحزم (يوجد الكثير من أجل React on npm ، لكن Vue بها عدد أقل من الحزم لأنها لا تزال صغيرة جدًا). مع React ، يمكنك حتى استبدال المكتبة نفسها بالبدائل المتوافقة مع API مثل Inferno. ومع ذلك ، مع مرونة كبيرة تأتي مسؤولية كبيرة - لا توجد قواعد وإرشادات محدودة مع React. يتطلب كل مشروع قرارًا يتعلق بهندسته المعمارية ، ويمكن أن تسوء الأمور بسهولة.

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

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

يبدو Vue أنظف وأخف الأطر الثلاثة. يحتوي GitLab على مدونة حول قراره بشأن Vue.js (أكتوبر 2016):

يأتي Vue.js مع التوازن المثالي لما ستفعله من أجلك وما تحتاج إلى القيام به بنفسك. (...) Vue.js دائمًا في متناول اليد ، شبكة أمان قوية ومرنة جاهزة لمساعدتك في الحفاظ على البرمجة فعالة و المعاناة التي تسببها لك DOM إلى الحد الأدنى.

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

مدونة أخرى حول التحول نحو Vue تأتي من Pixeljets. React "كانت خطوة كبيرة للأمام لعالم JS من حيث إدراك الدولة ، وأظهرت للكثير من الناس البرمجة الوظيفية الحقيقية بطريقة جيدة وعملية". واحدة من سلبيات كبيرة من React مقابل Vue هي مشكلة تقسيم المكونات إلى مكونات أصغر بسبب قيود JSX. هنا اقتباس من المقال:

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

هناك مناقشات مثيرة للاهتمام حول نشر المدونة على أخبار Hacker و Reddit - هناك حجج من المنشقين وغيرهم من مؤيدي Vue على حد سواء.

2.5 إدارة الدولة وربط البيانات

بناء واجهات المستخدم أمر صعب ، لأن هناك حالات في كل مكان - البيانات المتغيرة بمرور الوقت تستلزم التعقيد. تعد مهام سير العمل المحددة للدولة مساعدة كبيرة عندما تنمو التطبيقات وتصبح أكثر تعقيدًا. بالنسبة للتطبيقات المحدودة ، من المحتمل أن يكون هذا أمرًا مبالغًا فيه ، وسيكون شيء مثل Vanilla JS كافٍ.

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

رد فعل يعمل في كثير من الأحيان مع Redux. تصف Redux نفسها في ثلاثة مبادئ أساسية:

  • مصدر واحد للحقيقة
  • الدولة للقراءة فقط
  • يتم إجراء تغييرات مع وظائف نقية

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

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

يقترح بعض المطورين استخدام Mobx بدلاً من Redux. يمكنك التفكير في الأمر على أنه "رد تلقائي" ، مما يجعل الأمور أسهل في الاستخدام والفهم في البداية. إذا كنت تريد إلقاء نظرة ، فيجب أن تبدأ بالمقدمة. يمكنك أيضًا قراءة هذه المقارنة المفيدة بين Redux & MobX بواسطة Robin. يقدم المؤلف نفسه أيضًا معلومات حول الانتقال من Redux إلى MobX. هذه القائمة مفيدة إذا كنت تريد التحقق من مكتبات Flux الأخرى. وإذا كنت قادمًا من عالم MVC ، فستحتاج إلى قراءة مقال "التفكير في التكرار (عندما يكون كل ما تعرفه هو MVC)" بقلم ميخائيل ليفكوفسكي.

يمكن لـ Vue الاستفادة من Redux - لكنها تقدم Vuex كحل خاص بها.

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

كلا المفهومين هناك إيجابيات وسلبيات. تحتاج إلى فهم المفاهيم وتحديد ما إذا كان هذا سيؤثر على قرارك الإطاري. يقدم مقال "الربط ثنائي الاتجاه للبيانات: الزاوي 2 والرد" وسؤال Stackoverflow كلاهما تفسيرا جيدا. هنا يمكنك العثور على بعض أمثلة الأكواد التفاعلية (3 سنوات ، للزاوية 1 والتفاعل فقط). أخيرًا وليس آخرًا ، تدعم Vue كلاً من الربط أحادي الاتجاه وربط ثنائي الاتجاه (أحادي الاتجاه افتراضيًا).

يوجد مقال طويل حول أنواع مختلفة من الحالات وإدارة الحالة في التطبيقات الزاوية (بواسطة Victor Savkin) إذا كنت ترغب في مزيد من القراءة.

2.6 مفاهيم البرمجة الأخرى

الزاوي يتضمن حقن التبعية ، وهو نمط يوفر فيه أحد الكائنات التبعيات (خدمة) لكائن آخر (عميل). وهذا يؤدي إلى مزيد من المرونة ورمز أنظف. تشرح مقالة "فهم حقن التبعية" هذا المفهوم بمزيد من التفصيل.

يقسم نموذج وحدة التحكم في عرض النموذج (MVC) المشروع إلى ثلاثة مكونات: النموذج ، العرض والتحكم. الزاوي باعتباره MVC- إطار لديه MVC من خارج منطقة الجزاء. React له فقط V - تحتاج إلى حل M و C بنفسك.

2.7 المرونة وتقليص حجمها إلى الخدمات الصغيرة

يمكنك العمل مع React أو Vue ببساطة بإضافة مكتبة Javascript إلى الكود المصدري. هذا غير ممكن مع Angular بسبب استخدامه لـ TypeScript.

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

كما يلاحظ كوري هاوس:

جافا سكريبت يتحرك بسرعة ، و React يسمح لك بتبديل أجزاء صغيرة من تطبيقك لمكتبات أفضل بدلاً من الانتظار في المكان وتأمل أن يبتكر إطارك. إن فلسفة الأدوات الصغيرة القابلة للتركيب ذات الأغراض الفردية لا تنفد أبدًا.

يستخدم بعض الأشخاص موقع React للمواقع الإلكترونية بخلاف SPA (على سبيل المثال ، النماذج المعقدة أو المعالجات). حتى Facebook يستخدم React - ليس للصفحة الرئيسية ، ولكن للصفحات والميزات المحددة.

2.8 الحجم والأداء

هناك جانب آخر لكل الوظائف: الإطار الزاوي منتفخ تمامًا. حجم الملف gzipped هو 143 كيلو ، مقارنة بـ 23 كيلو بايت لـ Vue و 43k لـ React.

كل من React و Vue لهما DOM افتراضي ، من المفترض أن يحسن الأداء. إذا كنت مهتمًا بهذا ، يمكنك قراءة الاختلافات بين Virtual DOM & DOM ، فضلاً عن الفوائد الحقيقية لـ Virtual DOM في react.js. أيضًا ، يجيب أحد مؤلفي Virtual-DOM نفسه على سؤال متعلق بالأداء على Stackoverflow.

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

أداء الزاوي ، رد فعل و Vueتخصيص الذاكرة في ميغابايت

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

2.9 اختبار

يستخدم Facebook Jest لاختبار رمز React الخاص به. هنا مقارنة بين Jest و Mocha - وهناك مقال حول كيفية استخدام Enzyme مع Mocha. إنزيم هو أداة مساعدة لاختبار جافا سكريبت تستخدم في Airbnb (بالاشتراك مع Jest و Karma وغيرهم من المتسابقين في الاختبار). إذا كنت ترغب في قراءة المزيد ، فهناك بعض المقالات القديمة حول الاختبار في React (هنا وهنا).

ثم هناك ياسمين كإطار اختبار في Angular 2. هناك صراحة في مقال بقلم إريك إليوت يقول أن ياسمين "ينتج ملايين من الطرق لكتابة الاختبارات والتأكيدات ، وتحتاج إلى قراءة كل واحدة بعناية لفهم ما تقوم به". الإخراج هو أيضا منتفخة جدا وشاقة لقراءة. هناك بعض المقالات المفيدة حول دمج Angular 2 مع Karma و Mocha. إليك مقطع فيديو قديم (من 2015) حول استراتيجيات الاختبار باستخدام Angular 2.

تفتقر Vue إلى إرشادات الاختبار ، لكن إيفان كتب في معاينة عام 2017 أن الفريق يعتزم العمل على ذلك. يوصون باستخدام الكرمة. تعمل Vue مع Jest ، وهناك أيضًا avoriaz كأداة اختبار.

2.10 التطبيقات العالمية والوطنية

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

رد الفعل والزاوي على حد سواء دعم التنمية الوطنية. يحتوي Angular على NativeScript (مدعوم من Telerik) للتطبيقات الأصلية و Ionic Framework للتطبيقات الهجينة. مع React ، يمكنك التحقق من عارض ردود الفعل الأصلي لإنشاء تطبيقات iOS وتطبيقات Android المتقاطعة ، أو التفاعل الأصلي للتطبيقات الأصلية. تم إنشاء الكثير من التطبيقات (بما في ذلك Facebook ؛ تحقق من Showcase للحصول على المزيد) من خلال رد الفعل الأصلي.

تعرض أطر جافا سكريبت الصفحات على العميل. هذا أمر سيء بالنسبة للأداء المتصور وتجربة المستخدم الإجمالية وكبار المسئولين الاقتصاديين. التقديم المسبق من جانب الخادم زائد. جميع الأطر الثلاثة لديها مكتبات لإيجاد المساعدة في ذلك. بالنسبة لـ React ، يوجد next.js ، يحتوي Vue على nuxt.js ، و Angular لديها .... .Angular Universal.

2.11 منحنى التعلم

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

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

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

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

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

2.12 الزاوي ، رد فعل و Vue تحت غطاء محرك السيارة

هل تريد التحقق من الكود المصدري بنفسك؟ هل تريد أن ترى كيف تشعر الأشياء؟

ربما تريد التحقق من مستودعات Github أولاً: React (github.com/facebook/react) و Angular (github.com/angular/angular) و Vue (github.com/vuejs/vue)

كيف تبدو بناء الجملة؟ ValueCoders يقارن بناء الجملة الزاوي ، React و Vue.

من الجيد أيضًا رؤية الأشياء في الإنتاج - بالاقتران مع شفرة المصدر الأساسية. يسرد TodoMVC العشرات من تطبيق Todo نفسه ، المكتوب بأطر Javascript المختلفة - يمكنك مقارنة حلول Angular ، Reactand Vue. تنشئ RealWorld تطبيقًا حقيقيًا للعالم (نسخة متوسطة) ، ولديهم حلول جاهزة للزوايا (4+) و React (مع Redux). فيو هو العمل الجاري.

هناك أيضًا بعض التطبيقات الواقعية التي يمكنك إلقاء نظرة عليها. فيما يلي حلول React:

  • هل (تطبيق لطيف لإدارة الملاحظات في العالم الحقيقي تم إنشاؤه باستخدام React & Redux)
  • استرجاع الصوت (عميل Soundcloud المضمنة مع React & Redux)
  • Brainfock (حل إدارة المشروع والفريق الذي بني مع React)
  • react-hn & react-news (استنساخ أخبار هاكر)
  • react-native-whatsapp-ui + a tutorial (Whatsapp clone with react-native)
  • طائر الفينيق - تريللو (استنساخ تريللو)
  • سلاك استنساخ + تعليمي آخر (سلاك استنساخ)

هناك بعض التطبيقات لـ Angular:

  • angular2-hn & hn-ng2 (استنساخ Hacker News + تعليمي جميل حول إنشاء واحد آخر بقلم Ashwin Sureshkumar)
  • Redux-and-angular-2 (استنساخ Twitter)

هناك أيضًا حلول لـ Vue:

  • vue-hackernews-2.0 & Loopa news (Hacker News clones)
  • vue-soundcloud (عرض ساوند كلاود)

خاتمة

اتخاذ قرار بشأن الإطار الآن

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

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

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

ماذا يجب أن تختار؟

إذا كنت تعمل في Google: الزاوي

إذا كنت تحب TypeScript: Angular (أو React)

إذا كنت تحب البرمجة الموجهة للكائنات (OOP): الزاوي

إذا كنت بحاجة إلى التوجيه والهيكل ومساعدة اليد: الزاوي

إذا كنت تعمل على Facebook: React

إذا كنت تحب المرونة: رد فعل

إذا كنت تحب النظم الإيكولوجية الكبيرة: رد فعل

إذا كنت ترغب في الاختيار من بين العشرات من الحزم: رد فعل

إذا كنت تحب JS و "كل شيء هو - جافا سكريبت النهج": رد فعل

إذا كنت تحب كود نظيف حقًا: Vue

إذا كنت تريد منحنى التعلم الأسهل: Vue

إذا كنت تريد الإطار الأكثر خفيفة الوزن: Vue

إذا كنت تريد فصل المخاوف في ملف واحد: Vue

إذا كنت تعمل بمفردك أو لديك فريق صغير: Vue (أو React)

إذا كان تطبيقك يميل إلى أن يصبح كبيرًا: الزاوي (أو التفاعل)

إذا كنت ترغب في إنشاء تطبيق باستخدام التطبيق الأصلي: رد فعل

إذا كنت تريد أن يكون لديك الكثير من المطورين في المجموعة: الزاوي أو التفاعل

إذا كنت تعمل مع مصممين وتحتاج إلى ملفات HTML نظيفة: Angular أو Vue

إذا كنت تحب Vue لكنك خائف من النظام البيئي المحدود: رد فعل

إذا لم تتمكن من اتخاذ قرار ، فعليك أولاً تعلم React ، ثم Vue ، ثم Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/