مقارنة شاملة بين Angular و React لمطوري الويب

كانت السنوات القليلة الماضية مكثفة بشكل لا يصدق للمطورين Front-End Developers. الانتقال من قالب ثابت من جانب الخادم (حيث كان دور جافا سكريبت عادة ما تقطع إلى  jQuery DOM manipulation) إلى تطبيقات صفحة واحدة (استنادا أساسا على Front-End routing و REST API) تأثير كبير على صناعة الويب بأكملها.

بالإضافة إلى ذلك، كانت هذه الشدة السبب وراء الإدخال اليومي تقريبا ال frameworks الجديدة، مما أجبر المطورين Front-End Developers على البدء في تعلم قائمة لا تنتهي من التقنيات / المعالجة المسبقة / المجمعين شعبية في هذه اللحظة المحددة، ولكن ليس دائما عملية جدا في الوقت الحاضر، مثل Grunt، Bower، RequireJS، وما إلى ذلك.

بعد سنوات لا يمكن التنبؤ بها جدا من صعود وهبوط JavaScript SPA frameworks (وكذلك المكتبات)، ونحن الآن نعيش في أوقات عندما React، Angular، وVue  تعتبر متفوقة. وبفضل هذا الوضع في تطوير شبكة الإنترنت هو أكثر استقرارا بكثير، وهناك فرصة أصغر أن هذه التكنولوجيات سوف تنسى بسرعة كما أسلافهم.

منذ أنا لست من ذوي الخبرة جدا مع العمل مع Vue، قررت أن خندق في هذه المقالة والتركيز على ما أعرفه أفضل - React  وAngular. مع أخذ ذلك في الاعتبار، ماذا عن إجراء مقارنة جنبا إلى جنب؟

بدايات Angular و React

تم إنشاء النسخة الأولى من Angular من قبل جوجل في عام 2010. وقدموا لنا MV* (نموذج، عرض، أيا كان) النمط المعماري architectural pattern، حقن التبعية dependency injection، والبيانات في اتجاهين ملزمة باعتبارها وظائف أساسية للإطار. مع سهولة الاستخدام، وتنفيذ سريع للتوجيهات، ورمز موثق جيدا، وسرعان ما اكتسب شعبية بين مطوري الويب. في ذلك الوقت هذه الميزات يعني الكثير جدا، لذلك Angular اكتسبت الكثير من المؤيدين. وبما أنه تم الإعلان عنها بشكل جيد، كان هناك الكثير من الدورات المجانية لكل مبتدئ تطوير جافا سكريبت الذي أراد أن يصبح مؤيدا.

ومع ذلك، لأن أنغولارجس AngularJS  لم تكن أداة مثالية، بدأ الكثير من المطورين للشكوى أثناء حفر أعمق في هذا الإطار. واحدة من أكبر عيوب أنغولارجس AngularJS  كان أدائها. البيانات في اتجاهين ملزمة two-way data binding، وهو نفس المفهوم الذي بدا رهيبة جدا عندما تم إطلاق أنغلار Angular ، على مستوى معين من تعقيد التطبيق يمكن أن يكون مبالغا فيه. في عام 2013 تم حل قضايا القابلية، والأداء، والتحسين من قبل الفيسبوك مع إدخال React.  بدلا من اتجاهين للبيانات الملزمة  two-way data binding، React تستخدم مفهوم البرمجة المختلفة وتحولت إلى تدفق البيانات أحادي الاتجاه. الهندسة المعمارية القائمة على مكون، حيث أننا نمرر البيانات من أعلى مكون إلى أقل منها، دعونا بناء التطبيقات الطوب من الطوب brick by brick والميزة من قبل ميزة. وكانت React بناء نظيفة وسهلة لكلا التعلم والفهم، لذلك المطورين بدأو بسرعة تغيير الجانبين، واختيار React على Google’s brainchild. بالإضافة إلى ذلك، وذلك بفضل دعم JSX Reactعلمتنا شيء واحد أكثر إثارة للاهتمام (والتي في نفس الوقت هو غريبة نوعا ما) - كتابة HTML داخل جافا سكريبت.

الاختلافات الرئيسية بين Angular وReact

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

كيف Angular وReact  يعملون مع دوم DOM

 

والفرق الرئيسي الآخر هو أن React  يتعامل مع HTML باستخدام Virtual DOM- تمثيل الظاهري لنموذج كائن المستند virtual representation of Document Object Model  (DOM يعرف الهيكل المنطقي للوثائق ويتم تمثيلها على شكل شجرة الكائنات). Virtual DOMهو مجرد نسخة خفيفة الوزن من regular DOM التي ليس لديها القدرة على تغيير ما هو على الشاشة مباشرة. بهذه الطريقة React تحدث الحقيقية عناصر الHTML فقط إذا كان من الضروري للغاية. من ناحية أخرى، لجعل عناصرها قابلة لإعادة الاستخدام وتغليف وجهات النظر يستخدم أنغلار مكونات الويب.حتى عندما كت لا تزال تعمل على ملفات HTML العادية، يمكننا أن تشمل علامات HTML مخصصة والتطبيق كله لا تزال تعمل بشكل جيد في جميع المتصفحات الحديثة. ولتحقيق ذلك، تستند المكونات Angular إلى مفهوم Shadow DOM، حيث يمكننا إخفاء منطق دوم بالكامل وتصميمها وجعلها قابلة للوصول فقط ضمن المكون.

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

للتعامل مع نهج جافا سكريبت رياكت React وتشعر أكثر راحة مع عناصر DOMالتي تقوم على Virtual DOM، React  يستخدم JSX - وهو المعالج الذي يجعل التعليمات البرمجية أكثر أناقة وقراءة. JSX يعطي الشعور الطبيعي لهيكل DOM منذ ما تقوم به هو كتابة HTML في جافا سكريبت (ما في البداية قد يبدو غريبا بعض الشيء). المشكلة الوحيدة مع هذا النهج هو أن عليك أن تتذكر بناء الجملة الخاصة لبعض سمات HTML مثل معينة إذا كنت ترغب في تجنب تسمية التعارضات. على سبيل المثال، "Class"، كلمة محجوزة في JS، هي الآن "className".

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

التشابه بين Angular و React

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

البنية القائمة على المكونات

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

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

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

المجتمع والمكتبات

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

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

منذ السنوات القليلة الماضية، تطورت لغة جافا سكريبت وأصبحت ملحوظة في كل من تطبيقات الويب وتطبيقات الجوال على الويب. ليس منذ وقت طويل الحل الوحيد من الجمع بين أجهزة الكمبيوتر المكتبية والهواتف النقالة هو خلق التطبيق الهجين. في الوقت الحاضر، وذلك بفضل معرفة React    أو Angular  (أو كليهما) يمكن للمطورين تذهب حتى خطوة أبعد وإدارة التطبيقات المحلية التي يتم كتابتها في جافاسكريبت وفيما بعد تجميعها إلى لغتهم الأم. الادعاء الرئيسي أنغلار هو "إطار واحد، موبايل وسطح المكتب."، ما يفسر الكثير. Angular  يأتي مع Ionic 2 أو NativeScript، رد فعل من ناحية أخرى يمكن استخدامها عبر React Native.

https://www.merixstudio.com/blog/angular-vs-react-choosing-right-technology-your-next-project/