رد فعل مقابل. الزاوي: لماذا يكون التفاعل أكثر شيوعًا؟

تحظى كل من Angular و React بشعبية عندما يتعلق الأمر بتطوير تطبيقات الويب. ومع ذلك ، زادت شعبية React أكثر من شعبية Angular مؤخرًا.

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

ما هو الزاوي؟

Angular هي منصة تطوير ويب مشهورة يمكنك استخدامها لبناء تطبيقات ويب ديناميكية أو تطبيقات ذات صفحة واحدة. وصلت لأول مرة في عام 2010 باسم AngularJS ، وتطورت إلى Angular 2 في عام 2016.

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

تشمل الشركات التي تستخدم Angular Nike و UpWork و Forbes و HBO و Sony و Google. تتضمن التطبيقات الشائعة التي تم إنشاؤها باستخدام Angular PayPal و Upwork و Microsoft Office Home و Overleaf. العديد من منتجات Google ، بما في ذلك Google Voice و Gmail ، تستخدم أيضًا إطار العمل.

ما هو رياكت؟

React هي مكتبة JavaScript تستخدم أيضًا لتطوير تطبيقات الويب. مثل Angular ، تعتمد React أيضًا على استخدام المكونات.

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

تستخدم العديد من شركات الوسائط الاجتماعية React ، بما في ذلك Facebook و Instagram و Skype. الشركات الأخرى التي أنشأت تطبيقات باستخدام React تشمل Uber و AirBnB و Netflix و Amazon.

الشعبية بين React مقابل Angular

كما شوهد على صفحة React's Github، تمتلك React 185000 نجمة وأكثر من 1500 مساهم وأكثر من 9.5 مليون مستخدم. صفحة Angular's Github يُظهر 80500 نجمة وأكثر من 1500 مساهم وأكثر من 2.2 مليون مستخدم.

بالنسبة الى Xing و Huang و Lai، حصلت React على 9.2 مليون عملية تنزيل مقارنة بـ Angular 2 مع 2.6 مليون عملية تنزيل اعتبارًا من مايو 2018.

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

لغة

يستخدم Angular مجموعة من HTML و CSS و TypeScript. تعرض ملفات HTML عناصر واجهة المستخدم ، ويحتوي CSS على نمط ، ويحتوي TypeScript على منطق التعليمات البرمجية.

يستخدم React JavaScript و CSS. يمكن أن يحتوي ملف JavaScript على منطق التعليمات البرمجية الذي يمثل مكونًا. قد يحتوي المكون أيضًا على ملف CSS مطابق.

في ملف JavaScript ، يمكنك إرجاع رمز HTML المرتبط بهذا المكون.

الوحدات والواردات

يمكنك تثبيت Angular وإعداده باستخدام أداة Angular CLI. ستحتاج أيضًا إلى تثبيت Node.js. أثناء هذه العملية ، يمكنك تكوين التطبيق ليشمل التوجيه ، أو نوع StyleSheet ، أو حتى Bootstrap.

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

تتطلب React أيضًا Node.js أيضًا. يمكنك تشغيل أمر بسيط في سطر الأوامر لإنشاء تطبيق React.

بعد ذلك ، سيتعين عليك إضافة أية وحدات إضافية تحتاجها يدويًا. هذا يضمن أن لديك فقط الوحدات التي تحتاجها في التطبيق ، مما يجعله أقل انتفاخًا من Angular.

منحنى التعلم

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

TypeScript و JavaScript متشابهان للغاية في تركيبهما. ومع ذلك ، فإن Angular له هيكل معين يتبعه داخل ملف TypeScript. على سبيل المثال ، يحدد ترتيب تنفيذ التعليمات البرمجية الخاص به ، باستخدام AfterViewInit أو ngOnInit المهام.

باستخدام React ، يمكن للمطورين الذين يعرفون JavaScript بالفعل القفز مباشرة والبدء في إنشاء تطبيقات الويب. يتضمن منحنى التعلم لـ React في الغالب فهم كيفية عمل إدارة الحالة.

السرعة والأداء

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

مقياس

بالنسبة الى Xing و Huang و Lai، React مناسب لتطبيقات الويب الصغيرة إلى المتوسطة الحجم. ومع ذلك ، يمكن أن يكون Angular قويًا جدًا عندما يتعلق الأمر بتطبيقات أكبر وأكثر تعقيدًا.

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

تنفيذ كود محدد

يتمتع كل من Angular و Reach بميزات فريدة خاصة بهما.

يوفر لك Angular القدرة على استخدام التوجيهات الهيكلية المضمنة مثل * ngIf أو * ngFor. مثال مثير للاهتمام على ذلك هو إذا كنت بحاجة إلى إضافة حلقة for داخل ملف HTML لإنشاء div لكل مستخدم.

يستخدم React إدارة الحالة. يدير كل مكون حالة البيانات ويعيد عرض التطبيق بناءً على التغييرات في هذه الحالات.

const [item، updateItem] = useState ([]) ؛

ربط البيانات

تستخدم React الربط أحادي الاتجاه ، مما يعني أنه لا يمكنك تمرير البيانات إلا في اتجاه واحد (إما أن تنتقل البيانات من منطق الكود إلى عناصر HTML أو العكس).

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

فئة التصدير AppComponent {
 someValue = "defaultValue"
}

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

الشعبية الدائمة لـ React

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

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

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

كيفية إنشاء أول تطبيق تفاعل باستخدام JavaScript

اقرأ التالي

نبذة عن الكاتب