مقارنة بين Angular و React ولغاتهما الأساسية

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

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

يجب أن تدرك أنه لا يمكن تغطية المقارنة بين هاتين التقنيتين بالكامل. يأتي Angular بإطار عمل كامل (MVC) ، بينما React عبارة عن مكتبة أولية بها الكثير من الحزم مفتوحة المصدر للتكامل معها.

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

الأسئلة التي يجب معالجتها

  • ما الاختلافات الرئيسية بين Angular و React؟
  • ما الذي يجعل TypeScript مميزة جدًا؟
  • ما مدى شعبية هذه التقنيات؟
  • ما هو الوضع الحالي مفتوح المصدر؟
  • ما هي التكنولوجيا التي تستخدمها الشركات أكثر؟
  • هل تؤثر اللغات المكتوبة الثابتة على جودة الكود ووقت التطوير؟

ستتم إضافة الأقسام المستقبلية بناءً على الطلب من التعليقات.

المقارنات الرئيسية

فيما يلي مقارنة سريعة من جانب إلى جانب بين Angular (يسار) و React (يمين).

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

مشكلة

لنفترض أنك تريد تحديث تاريخ ميلاد المستخدم داخل مجموعة من علامات HTML.

DOM الظاهري

يقوم فقط بتحديث الجزء المطلوب من خلال رؤية الاختلافات بين إصدار HTML السابق والحالي. إنه نهج مشابه لكيفية عمل GitHub عند اكتشاف التغييرات في الملف.

DOM العادي

سيتم تحديث بنية الشجرة بأكملها لعلامات HTML حتى تصل إلى تاريخ الميلاد.

لماذا يهم؟

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

هل تحتاج إلى مزيد من السياق؟ تحقق من مقال داس!

لكن أولاً ، نعود إلى البداية ...

التاريخ

سنحتاج إلى معرفة القليل من التاريخ (السياق) لأنه يوفر نظرة ثاقبة حول كيفية تشكيل الأشياء في المستقبل.

لن أخوض في تفاصيل ما حدث بالضبط بين Angular و AngularJS ، وأنا متأكد من أن هناك الكثير من الموارد المتاحة التي تغطي ذلك. لكن باختصار ، استبدلت Google AngularJS بـ Angular ، و JavaScript بـ TypeScript.

حسنًا ، في أيام ES4 / ES5 ، كان منحنى التعلم لجافا سكريبت مرتفعًا حقًا. إذا أتيت من عالم Java أو C # أو C ++ ، وهو عالم من البرمجة الموجهة للكائنات (OOP) ، فإن تعلم JavaScript ببساطة لم يكن بهذه البساطة. بمعنى آخر ، لقد كان ألمًا في المؤخرة.

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

شعبية

كما تكشف Google Trends ، تعد Angular و React من أكثر تقنيات الويب شيوعًا في عام 2019.

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

هناك شيء واحد مؤكد - كلا التقنيتين تنموان ، ويبدو المستقبل مشرقًا. هذا يعني أنه لا داعي للقلق إذا فشلت إحدى التقنيات وتركك وراءك.

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

المصدر المفتوح

يحتوي React على أكثر من 100،000 نجمة ، بالإضافة إلى 1200 مساهم وما يقرب من 300 مشكلة تنتظر الحل.

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

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

الإحصائيات مأخوذة من صفحة Angular و Reacts GitHub.

ما الذي تستخدمه الشركات

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

إذن من يستخدم أي تقنية؟

# تتفاعل

  • موقع التواصل الاجتماعي الفيسبوك
  • AirBnb
  • اوبر
  • نيتفليكس
  • انستغرام
  • ال WhatsApp
  • بصندوق الإسقاط

# الزاوي

  • أكل 24
  • متجر CVS
  • كرة القدم
  • جوجل اكسبرس
  • الدوري الاميركي للمحترفين
  • دلتا
  • wix.com
إذا كنت تعرف أي شركات كبيرة (معروفة) تستخدم Angular ، فيرجى مشاركتها برابط.

TypeScript و JavaScript (ES6 +)

كما ذكرت ، قد يكون من المضلل مقارنة Angular و React فقط دون التركيز على اللغة الأساسية التي يؤكدها كل واحد (وفقًا لمستنداتهما).

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

من حيث قاعدة المستخدمين ، فإن JavaScript متفوق. لكن TypeScript يتزايد بسرعة ، لذا من يدري ما الذي ستجلبه 10-15 سنة.

شعبية TypeScript في السنوات الخمس الماضية

شعبية JavaScript في السنوات الخمس الماضية

شعبية JavaScript مقابل TypeScript في السنوات الخمس الماضية

تم تطوير TypeScript في البداية بواسطة Microsoft لتسهيل JavaScript (بمعنى آخر ، لجعل ES5 أسهل). تم إصداره في أكتوبر 2012. وهو ببساطة مترجم يقوم بترجمة TypeScript إلى كود JavaScript ، مما يعني أيضًا أنه يمكنك كتابة كود ES5 في ملف TypeScript. يُشار إلى TypeScript بمجموعة شاملة من JavaScript.

بشكل عام ، توفر TypeScript انتقالًا سلسًا للمبرمجين الذين لديهم خلفية برمجة موجهة للكائنات (OOP). من المهم ملاحظة أنه تم إصدار TypeScript في فترة ES5 ، وخلال ذلك الوقت ، لم تكن ES5 لغة OOP قائمة على الفصل.

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

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

اللغات المكتوبة بشكل ثابت وديناميكي

تعني اللغة المكتوبة بشكل ثابت أنه يمكنك تحديد نوع المتغير (سلسلة أو رقم أو مصفوفة إلخ). قد تسأل لماذا هذا مهم. إليك تشبيه في العالم الحقيقي قمت بإعداده (الإبداع في أفضل حالاته).

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

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

حسنًا ، إذا كنت لا تزال في حيرة من أمرك بشأن معنى الكتابة الثابتة ، فتحقق من ذلك:

خاصية ثابتة مكتوبة

حجة مكتوبة ثابتة

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

لحسن الحظ ، أخذ البحث (tl؛ dr video) هذا الأمر على محمل الجد ، ووضع هذه الأسطورة للاختبار مع 49 شخصًا.

الملاحظات من البحث هي:

  • تتطلب اللغة المكتوبة بشكل ثابت مزيدًا من الوقت بسبب إصلاح الأخطاء المطبعية
  • اللغة المكتوبة ديناميكيًا قابلة للقراءة وأسهل في الكتابة (رمز تعريفي)

يوضح الشكل 5 أنه ، في المتوسط ​​، يقلل المطورون من وقت تطويرهم بمقدار ضعفين عند كتابة لغة مكتوبة ديناميكيًا.

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

ماذا تختار

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

إذا لم تكن من محبي الأنواع ، فلا يوجد ما يمنعك من كتابة كود ES6 في TypeScript. إنه فقط إذا كنت بحاجة إليه ، فهو موجود.

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

فيما يلي مقارنة بسيطة لكائن الفئة بين TS و JS (ES6).

IMO

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

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

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

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

ملاحظات الوجبات الجاهزة

  • TypeScript هو ببساطة ناقل للترجمة ، ويمكن استخدامه مع React أو أي أطر عمل JS أخرى
  • يتعامل React مع إدارة الذاكرة بكفاءة (DOM الظاهري)
  • تستخدم React JavaScript (ES6) ، وهي لغة ويب معترف بها منذ عام 1995
  • يستخدم Angular TypeScript ، الذي تم إصداره في عام 2012
  • اللغة المكتوبة بشكل ثابت رائعة ، لكنها ليست ضرورية
  • تتطلب اللغات المكتوبة ديناميكيًا وقتًا أقل للكتابة ومزيدًا من المرونة في استخدام الإبداع
  • قد يمثل تعلم لغة مكتوبة بشكل ثابت تحديًا ، خاصة إذا كنت تعمل فقط مع اللغات المكتوبة ديناميكيًا
  • قام ES6 بتنفيذ الكثير من الميزات الرائعة مثل الوحدات النمطية ، والفئات ، وعامل الانتشار ، ووظائف الأسهم ، والقوالب الحرفية التي تتيح لك كتابة كود أقل وأنظف وأكثر تنظيمًا (السكر النحوي)
  • TS هو ببساطة ES6 + مع أنواع وأكثر من ذلك بكثير

استنتاج

قد تؤثر مكتبة الإطار / المكونات التي تختارها على مقدار الوقت الذي تقضيه في البرمجة وميزانيتك. إذا كان لديك فريق مع مطوري C # أو Java أو C ++ ، فمن المحتمل أن أختار Angular ، لأن TypeScript تشترك في العديد من أوجه التشابه مع هذه اللغات.

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

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

إليك بعض المقالات التي كتبتها حول نظام الويب البيئي جنبًا إلى جنب مع نصائح وحيل البرمجة الشخصية.

  • العقل الفوضوي يؤدي إلى كود فوضوية
  • المطورين الذين يرغبون باستمرار في تعلم أشياء جديدة
  • دليل عملي لوحدات ES6
  • تعلم مفاهيم الويب الأساسية هذه
  • عزز مهاراتك باستخدام طرق JavaScript المهمة هذه
  • برمجة أسرع عن طريق إنشاء أوامر bash مخصصة

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

ملاحظة: إذا استمتعت بهذه المقالة وتريد المزيد ، يرجى التصفيق cl ومشاركتها مع الأصدقاء الذين قد يحتاجون إليها ، إنها كارما جيدة.