مقارنة أطر عمل جافا سكريبت النهائية: Angular vs React

السؤال الذي أطرحه يوميًا تقريبًا هو هل يجب أن أبدأ بـ ReactJS أو Angular؟ ومع ذلك ، قبل المضي قدمًا ، اسمحوا لي أن أقدم لك إخلاء مسؤولية.

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

الحجة المنطقية

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

منحنى التعلم

لنبدأ بـ Angular. إخلاء مسؤولية آخر: عندما أقول Angular ، فأنا أتحدث عن Angular 4 وليس AngularJS.

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

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

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

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

تجد أفضل الممارسات وتختفي جميع المشكلات ولكن هذا يضيف إلى منحنى التعلم.

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

فكر في الأمر مثل وضع HTML داخل JavaScript مع إجراء بعض التغييرات المختلفة: لا يمكنك استخدام سمة class وعليك استخدام اسم الفئة.

أخيرًا ، لدينا Redux. غالبًا ما يتم استخدام React مع Redux أو Flux وهو عبارة عن مديري حالة مستويات التطبيق. في رأيي ، إن Redux يتعب بشدة ، فقط إعداده وتعلم مفاهيمه صعب.

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

الفائز: إنها تعادل

أداء

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

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

التغيير من Angular 2 إلى Angular 4 under the hood فعلوا بعض الشيء لزيادة الأداء. تقدم Angular 4 أداءً أفضل من Angular 2. ومع ذلك ، لا تزال React تفوز في قسم الأداء.

الزاوي مقابل رد الفعل. المصدر: Academind.com

الفائز: رد فعل

سمات

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

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

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

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

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

يستخدم React JSX وهو أقوى من القوالب القياسية لأنه يمكنك وضع أي نوع تريده من JavaScript فيه. JSX ليس مطلوبًا لاستخدام React ولكنه يجعل الأمور أسهل كثيرًا. لا يمكنني التفكير في أي سبب يمنعك من استخدام JSX مع Angular أيضًا. تقوم React أيضًا بعمل جيد حقًا في إدارة حالة المكون وخصائصه. إنه يجعل من السهل حقًا التعامل مع البيانات ونقلها بين المكونات. يعد Angular أكثر صعوبة من تمرير البيانات بين المكونات في React.

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

بينما تشترك كلتا التقنيتين في عدد كبير من الميزات ، إذا كنت تقارن فقط التقنيات الأساسية ، فإن Angular هو الفائز.

الفائز: الزاوي

الأدوات

يحتوي كل من Angular و React على بعض واجهات سطر الأوامر الرائعة. إن Angular CLI و Create React App كلاهما رائعان ويسمحان لنا حقًا بتبسيط عملية التطوير. يُعد Angular CLI أقوى قليلاً لأنه يمكننا إنشاء أشياء بسرعة مثل المكونات والخدمات. إنشاء React لا يمكنه فعل ذلك. يجب عليك إنشاء كل شيء بنفسك بقدر الملفات والبنية الأساسية. يستخدم كلا النظامين حزمة الويب ، ولهما خوادم تطوير ذاتية التحميل ولديهما أدوات تجميع وبناء. من الواضح أن Angular لديه مهمة إضافية تتمثل في كتابة نص مكتوب. يحتوي CLI على نص برمجي لذلك عندما نقوم بتشغيل خدمة ng. كل ما حدث وراء الكواليس. يستخدم شيئًا يسمى TSC أو Typescript Compiler لذلك وكلاهما يحتوي على أدوات اختبار أيضًا. يستخدم Create React App Jest للاختبار ، ومن ثم فإن أحد أجزاء هذه الأدوات هو القدرة على بناء تطبيقك في الإنتاج في أصول ثابتة يمكنك تحميلها ببساطة إلى خادم أو يمكنك وضعها في مجلد العميل الخلفي.

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

كلاهما جميل حتى في هذا القسم.

الفائز: الزاوي

النظام البيئي

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

Ionic هو إطار عمل هجين شائع وهو تطبيق Angular يعمل داخل غلاف أصلي لتطبيقات الأجهزة المحمولة. يمكنك إنشاء تطبيقات جوال باستخدام Angular. يمكن أن تكون التطبيقات الهجينة صعبة بعض الشيء مقارنة بالتطبيقات المحلية. لا يمكن أن تكون تجربة المستخدم رائعة في بعض الأحيان - ليست بالسرعة والاستجابة. من بين الأطر الهجينة المختلفة ، يعتبر Ionic 3 هو الأفضل. هناك أيضًا NativeScript ، والذي يسمح لنا بإنشاء تطبيقات أصلية حقيقية لنظام التشغيل iOS و Android باستخدام Angular وكذلك JavaScript.

ومع ذلك ، لا يبدو أن NativeScript جيد مثل React Native من Facebook على الأقل في هذه المرحلة. يحتوي Angular أيضًا على مكتبة مكونات تصميم المواد إذا كنت من محبي تصميم المواد. Angular Universal هو مشروع أولي يمكن استخدامه لتصيير Angular على جانب الخادم. يوجد أيضًا متجر NgRx وهو عبارة عن مكتبة إدارة حكومية مستوحاة من Reax redux. إنه قائم على الحالة التي تحورها مخفضات الأقران. كما أن لديها تكاملًا مع الامتدادات التفاعلية.

كنت ستلاحظ. مرة واحدة ، يقوم أحدهم بعمل شيء ما يقوم الآخر بنسخه بطريقة مختلفة. أصبح React و Angular هما Microsoft و Apple من أطر عمل JavaScript.

يحتوي React على النظام البيئي تمامًا. لديها React أصلية والتي تحظى بشعبية. إنها أفضل طريقة لإنشاء تطبيقات الأجهزة المحمولة باستخدام تقنيات الويب. React Native سريع والكثير من التطبيقات إذا تم بناؤها بشكل صحيح ، فهي موجودة بالفعل مع تطبيقات أصلية مبنية على Swift أو Java. يحتوي React على مكتبة لتصميم المواد تسمى Material-UI والتي تشبه إلى حد كبير مكون تصميم المواد في Angular ولكنها أكثر نضجًا. JS هو إطار عمل لتقديم تطبيقات React من جانب الخادم. يهدف إلى القيام بذلك بأبسط طريقة ممكنة بحيث يمكن مقارنة ذلك نوعًا ما بـ Angular Universal. MobX هي طريقة أخرى لإدارة الدولة. إنه يعمل بشكل مختلف قليلاً عن عمل الإعادة. يوفر مجموعة من المصممين لتحديد ما يمكن ملاحظته والمراقبين ويقدم المنطق التفاعلي في دولتك.

Storybook هو بيئة تطوير لـ React. يسمح لك بتصفح مكتبة مكونة ، وعرض حالات مختلفة لكل مكون وتطوير واختبار المكونات بشكل تفاعلي. يعمل VR التفاعلي على تحويل React إلى الواقع الافتراضي. سطح المكتب React عبارة عن مكتبة JavaScript تم إنشاؤها فوق مكتبة Reacts والتي من المفترض أن تجلب تجربة سطح مكتب أصلية إلى الويب ، وتضم العديد من مكونات macOS و Windows 10. نظام React البيئي كبير وقوي للغاية. React تشق طريقها إلى كل جانب من جوانب التكنولوجيا وهي فائز واضح.

الفائز: رد فعل

الأشخاص الذين يرتدون البدلات وربطات العنق يستخدمون Angular بينما يستخدم محبو موسيقى الجاز ذو اللحى القذرة React.

الخلاصة: إنها ربطة عنق

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

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