مقارنة بين AngularJS VS React في عام 2018

في هذه المقالة ، نقارن بين التقنيتين الأكثر شيوعًا لتطوير الواجهة الأمامية: الزاوي والتفاعل. سنقوم بمقارنتها من مهندس المشروع ومن منظور المطورين وكذلك من منظور الشركات.

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

الاختلافات الرئيسية بين AngularJS (Framework) و React (المكتبة) هي التهيئة ، ربط البيانات ، الأداء ، دقة التبعية ، التوجيهات ، و templating. دعونا نلقي نظرة على كل جانب من هذه الجوانب بالتفصيل.

AngularJS

كان الإصدار الزاوي 2 وما بعده أقل من React ، لكن إذا عدت في تاريخ سلفه ، AngularJS ، فإن الصورة تظهر. يتم الاحتفاظ به بواسطة Google ويستخدم في Analytics و Adwords و Google Fiber. نظرًا لأن AdWords هو أحد المشروعات الرئيسية في Google ، فمن الواضح أنهم قاموا بمراهنة كبيرة عليه ومن غير المرجح أن يختفي في أي وقت قريب.

تتفاعل

React تم تطويره وصيانته بواسطة Facebook ويستخدم أيضًا في منتجاتها مثل Instagram و WhatsApp. لقد مضى حوالي أربع سنوات ونصف حتى الآن ، لذلك ليست جديدة تمامًا. إنه أيضًا أحد أكثر المشاريع شعبية على GitHub ، مع حوالي 92000 نجم في وقت كتابة هذا التقرير. يبدو أمرا جيدا لي.

Componentization

AngularJS

يتميز AngularJS بهيكل معقد وثابت للغاية لأنه يعتمد على طراز Model-View-Controller النموذجي للتطبيقات ذات الصفحة الواحدة. يكون نطاق $ object في AngularJS مسؤولاً عن الجزء Model ، والذي تتم تهيئته بواسطة وحدة التحكم ثم يتم تحويله إلى HTML لإنشاء طريقة العرض للمستخدم. يوفر AngularJS العديد من الخدمات القياسية والمصانع وأجهزة التحكم والتوجيهات والمكونات الأخرى.

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

تتفاعل

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

يوفر React طريقة بسيطة وفعالة لبناء أشجار المكونات. إنه يتميز بنمط برمجة وظيفي حيث تكون تعريفات المكونات تعريفية. يشبه إنشاء التطبيق من مكونات React إنشاء برنامج JavaScript من الوظائف.

ربط البيانات

في أنماط MVC ، يكون الربط هو الموضوع الأكثر أهمية لتمرير أي بيانات في اتجاه أحادي الاتجاه أو تدفق ثنائي الاتجاه. ربط البيانات هو عمليات مزامنة البيانات التي تعمل بين النموذج وعرض المكونات.

AngularJS

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

تتفاعل

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

أداء

AngularJS

هناك شيئان يجب مراعاتهما عندما نتحدث عن أداء Angular. كما ذكرنا سابقًا ، تعتمد الزاوي 1.x وأعلى على ربط البيانات ثنائي الاتجاه. يعتمد هذا المفهوم على "التدقيق القذر" ، وهي آلية يمكن أن تجعل "تطوير تطبيقات AngularJS لدينا" متأخرة

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

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

تتفاعل

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

الآن ، بدلاً من إرسال HTML جديد تمامًا إلى المستعرض ، يرسل React HTML فقط للعنصر الذي تم تغييره. هذا النهج أكثر فعالية مما تقدمه AngularJS.

حل التبعيات

AngularJS

Dependency Injection هو نمط لتصميم البرامج يتم من خلاله إعطاء المكونات تبعياتها بدلاً من تثبيتها داخل المكون. هذا يخفف مكون من تحديد موقع التبعية ويجعل التبعيات شكلي. هذا يساعد في جعل المكونات قابلة لإعادة الاستخدام ، قابلة للصيانة وقابلة للاختبار.
 يقوم AngularJS تلقائيًا بالعثور على الكائنات المناسبة التي يتم حقنها كمعلمات $ pathParams و filter $ و store و $. هناك وظيفتان تجعلان حقن التبعية ممكنًا في إطار AngularJS: $ inject و $ provide.

تتفاعل

الفرق بين React و AngularJS فيما يتعلق بحقن التبعية هو أن React لا تقدم أي مفهوم للحاوية المدمجة لحقن التبعية. ولكن هذا لا يعني أن علينا التفكير في طريقة لحقن التبعيات في مشروع React الخاص بنا. يمكنك استخدام عدة أدوات لحق التبعيات تلقائيًا في تطبيق React. تتضمن هذه الأدوات وحدات Browserify و RequireJS و ECMAScript 6 التي يمكننا استخدامها عبر Babel و ReactJS-di وما إلى ذلك. التحدي الوحيد هو اختيار أداة للاستخدام.

التوجيهات والقوالب

AngularJS

التوجيهات في AngularJS هي وسيلة لتنظيم الكود الخاص بنا حول DOM. إذا كنت تعمل مع AngularJS ، فإننا لا نصل إلى DOM إلا من خلال التوجيهات. يحتوي AngularJS على العديد من التوجيهات القياسية ، مثل ng-bind أو ng-app ، لكن في بعض الأحيان نقوم بتوجيهاتنا الخاصة في AngularJS لإدراج البيانات في القوالب. يجب أن يكون للقالب عنصر مع توجيهنا المكتوب كسمة. إنها بهذه السهولة. لكن توجيهات AngularJS ، إذا تم تعريفها بالكامل ، متطورة. يحتوي الكائن ذو الإعدادات ، والذي نعود إليه في التوجيه ، على حوالي 10 خصائص. خصائص مثل templateUrl أو القالب سهلة الفهم.

تتفاعل

لا تقدم React التقسيم إلى قوالب وتوجيهات أو منطق قالب. يجب كتابة منطق القالب في القالب نفسه. لنرى كيف يبدو هذا ، افتح مثالًا من GitHub. ستلاحظ أن تطبيق المكون الخاص بـ React.TodoItem يتم إنشاؤه باستخدام طريقة React.createClass () قياسية. نقوم بتمرير كائن له خصائص لهذه الوظيفة. تمثل الخصائص مثل componentDidUpdate ، أو shouldComponentUpdate ، أو handleKeyDown ، أو handleSubmit المنطق - ما سيحدث مع القالب الخاص بنا. في نهاية المكون ، نقوم عادةً بتعريف خاصية التجسيد ، وهي قالب يجب تقديمه في المتصفح. كل شيء موجود في مكان واحد ، ومن السهل فهم بناء جملة JSX في القالب حتى لو كنت لا تعرف كيفية الكتابة في JSX. من الواضح ما الذي سيحدث مع القالب الخاص بنا وكيف ينبغي تقديمه والمعلومات التي سيتم تقديمها لها حسب الخصائص.

استنتاج:

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

نشرت أصلا في العقول الزاوي.