لماذا تعتبر React JS أفضل من Angular أو Vue JS؟

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

باختصار ، فإن React JS أفضل من Angular أو Vue JS نظرًا لقدراتها الافتراضية DOM الفائقة ، ودعمها القوي للمجتمع ، ووثائقها الغنية ، وسماتها خفيفة الوزن ، ومنحنى التعلم القابل للإدارة ، ومرونتها للسماح بوظائف الأجهزة المحمولة باستخدام React Native's.

جافا سكريبت: لغة الغراء

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

وبالتالي ، على مدار العقد الماضي ، تم تصميم العديد من أطر العمل الأمامية على رأس جافا سكريبت لتسهيل تطوير وصيانة مواقع الويب. ونتيجة لذلك ، اعتبارًا من عام 2020 ، كانت أكثر أطر عمل JavaScript الأمامية هذه هي React و Vue ، ثم Angular.

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

تاريخ تقنيات الويب والمتصفحات

تم تطوير أول متصفح ويب وإصداره في ديسمبر 1990 مع عمل Tim Berners-Lee كمطور رئيسي. قام في نفس الوقت بتطوير وإصدار بروتوكول نقل النص التشعبي (HTTP) ، وهو بروتوكول تطبيق لشبكة الويب العالمية لفهرسة مواقع الويب والتنقل فيها.

في وقت لاحق ، تم إطلاق متصفح الويب الرسومي الافتتاحي ، Mosaic ، في عام 1993. وبالمثل ، في نفس العام ، تم تطوير HTML. كان هذا قبل بضع سنوات من إنشاء JavaScript ، بينما تم إصدار CSS في عام 1996 ، بعد عام واحد من إنشاء JavaScript. اشتهرت هذه اللغات الثلاث فيما بعد بتشكيل مجموعة تكنولوجية أطلق عليها "ثالوث التقنيات التي يجب أن يتعلمها مطورو الويب".

تطوير JavaScript

كان متصفح Netscape Navigator ، الذي تم إصداره في عام 1994 ، أحد المتابعات الشهيرة لمتصفح Mosaic. وفي عام 1995 ، استأجر مطورو Netscape الشهير آنذاك ، Brendan Elch ، وهو مبرمج ، لإنشاء لغة برمجة نصية ديناميكية جديدة لصفحات الويب ومعالجة البيانات من جانب العميل.

استجابة للسوق ، رأت Netscape الحاجة إلى إنشاء مواقع ويب ديناميكية بدلاً من أن تقتصر على HTML. لسوء الحظ ، استخدمت معظم مواقع الويب المبكرة HTML فقط ، وبالتالي كانت غير فعالة من الناحية الحسابية. لذلك ، اضطر Netscape إلى ابتكار لغة برمجة نصية بسيطة على الويب تستهدف معالجة DOM (نموذج كائن المستند). تم استلهام المشروع بناءً على ذلك من وظائف Java وصياغتها - على الرغم من اختلافهما جوهريًا على الرغم من التشابه النحوي البسيط.

تم إصدار JavaScript رسميًا في مارس 1996 ، وتمكنت في النهاية من تمكين وظائف جديدة على صفحات الويب لم تستطع HTML وحدها. على سبيل المثال ، الاستجابة لمدخلات المستخدم ، وإظهار النوافذ المنبثقة وتغيير ألوان العناصر. تم الاستحواذ على Netscape لاحقًا بواسطة America Online (AOL) الذي يمتلك أيضًا Mozilla ، مما ساهم في نمو JavaScript الأسي كمعيار للإنترنت.

ظهور تطبيقات XML و AJAX والصفحة الواحدة

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

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

غالبًا ما توصف بأنها مجموعة من عدة تقنيات مجمعة معًا ككل ، وتتألف AJAX من XHTML و CSS و DOM و XML و XLST و XML HttpRequest و JavaScript. وضمن AJAX ، تقوم JavaScript بربط جميع الأدوات الأخرى معًا . وبناءً على ذلك ، قدمت AJAX طريقة لتحديث أجزاء من صفحة HTML دون تنزيل محتواها بالكامل.

تطبيقات الصفحة الواحدة

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

علاوة على ذلك ، مع SPAs ، يمكن إعادة استخدام المكونات ، وبالتالي يتم تقليل مقدار الكود المطلوب بشكل كبير. تم تنفيذ أول تطبيق أحادي الصفحة في عام 2002 ، مع تصميم JavaScript كواحدة من اللغات المستهدفة للتنفيذ. يعود نجاح تطبيقات الصفحة الواحدة بشكل أساسي إلى تقنية AJAX السابقة وأسبقيتها في الاتصال بالخادم.

علاقة JavaScript-HTML

يمكن أن تعمل HTML إما كمكمل لجافا سكريبت ، كما هو الحال مع jQuery ؛ أو بناء جملة متكامل يشبه HTML يتم تجميعه في عناصر HTML. مثال على ذلك هو بناء جملة JSX ، يوصى باستخدامه عند التطوير باستخدام React. إنها ليست جافا سكريبت أو HTML خالصة ، بل هي اندماج لكليهما. لذلك ، بشكل أساسي ، دمج إنشاء العناصر الأساسية والوظائف الهيكلية لـ HTML مع الإمكانات الديناميكية لـ JavaScript.

علاقة CSS-HTML

يستخدم CSS بشكل شائع مع JavaScript. أحد الأمثلة على التنسيق التقليدي ، هو تنفيذ خصائص CSS في ملفات .css منفصلة. التنسيق الآخر هو دمج CSS في أطر عمل JavaScript نفسها ، من خلال مكتبات متخصصة مثل CSS-in-JS والمكونات المصممة. تمكن هذه المكتبات المطورين من كتابة كود JavaScript الذي يصمم العناصر المرئية باستخدام بناء جملة يشبه CSS والذي يتم بعد ذلك عادةً تجميعه في CSS خالص في المستعرض.

ظهور تطبيق من جانب الخادم لجافا سكريبت

في النهاية ، جاء عام 2009 مع إصدار Node.js ، وهو تطبيق من جانب الخادم لـ JavaScript. قام Node.js بتوسيع نطاق JavaScript إلى النهاية الخلفية ، مما يتيح لـ JavaScript أن تصبح لغة مكدسة كاملة.

يعد Node.js حاليًا أكثر بيئة تشغيل JavaScript استخدامًا ، ويستخدم لتنفيذ كود JavaScript خارج بيئة متصفح الويب. تم استخدامه للوظائف من جانب الخادم ، وكان منشئو Node.js يهدفون إلى تطوير بديل أكثر كفاءة لخادم Apache HTTP الذي كان شائعًا في ذلك الوقت (غالبًا ما يستخدم مع PHP). تم إنشاء Node.js باستخدام محرك Google V8 JavaScript ، والذي تم إنشاؤه باستخدام C ++.

أطر عمل جافا سكريبت الأمامية

نظرًا لأننا وضعنا الأساس ، يمكننا الآن وضع اللبنات والتعمق في أسباب ميلنا إلى React.js.

الأطر مقابل المكتبات

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

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

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

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

لماذا تعتبر React البديل المسيطر!

بعد فوات الأوان ، تم تطوير React كمنفذ JavaScript لـ XHP (مكتبة PHP أنشأها Facebook). بشكل عام ، كان XHP عبارة عن تعديل لـ PHP يسمح بإنشاء مكونات مخصصة ، ويهدف إلى منع هجمات المستخدمين الضارة. في وقت لاحق من مشروع نقل JavaScript هذا ، نما JSX (JavaScript XML) ، والتي أصبحت لغة قياسية شائعة لـ React.

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

قدرات DOM افتراضية متفوقة.

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

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

تدفق البيانات في اتجاه واحد

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

لماذا رد الفعل أفضل من الزاوي

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

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

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

لماذا تعتبر React أفضل من Vue

تم إنشاء Vue.js بواسطة موظف Google Evan You. كان Evan مستوحى من AngularJS ، لكنه أراد إنشاء نسخة محسّنة وأكثر بساطة منه. على الرغم من سماتها خفيفة الوزن وأدائها الرائع وأسلوبها الرائع في البرمجة ، إلا أن الجانب السلبي لـ Vue هو خراقتها ، وهذا هو المكان الذي يظهر فيه تفوق React.

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

بناء الجملة ES6

علاوة على ذلك ، يمكن للمطورين استخدام بناء جملة ES6 أيضًا مع Vue ، ومع ذلك ، فإن React مصممة بشكل أمثل أكثر من Vue في هذا الصدد. بينما تقدم Vue حاليًا دعم TypeScript ، إلا أن دعمها ليس مصقولًا جيدًا مثل React باستخدام CRA (إنشاء تطبيق React) مع دعم TS في أمر واحد. بالإضافة إلى ذلك ، مع Vue ، ما زلنا نطلب بعض حزم الجهات الخارجية مع أدوات تزيين وميزات مخصصة لإنشاء تطبيق TypeScript حقيقي وكامل. وللأسف ، لا توفر الوثائق الرسمية جميع المعلومات المطلوبة للبدء. ميزة أخرى من React!

بينما نعزز حجتنا ، دعونا نزيد من تفصيل المناقشة باستخدام معايير معينة أوضح.

1. حجم الإطار

في حين أن حجم الحزمة المصغرة لإطار العمل في سجل npm من غير المرجح أن يثني أو يشجع أي مطور على اختيار إطار العمل ، إلا أنه لا يزال بإمكانه أن يساعد حجتنا. الزاوي أكبر قليلاً من الباقي (187.6 كيلو بايت) بينما يبلغ React 6.4 كيلو بايت ويقع Vue في مكان ما بينهما ، عند 63.5 كيلو بايت.

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

علاوة على ذلك ، يؤدي هيكل Angular المعقد إلى خطر محتمل يتمثل في ضعف الأداء مقارنةً بـ React أو Vue ، خاصةً لتخصيص الذاكرة.

2. تطوير الخبرة ومنحنى التعلم والتوافر

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

3. الوضع القائم على اللغة

نقطة رئيسية أخرى هي React و Vue استخدام JavaScript ES6 كلغتهم الأساسية. ES6 هو أحدث معيار في صناعة JavaScript منذ عام 2015. من ناحية أخرى ، يستخدم Angular 1 JavaScript ES5 وهو الإصدار السابق بينما يعتمد Angular 2 على TypeScript.

على الرغم من أن TypeScript يمكّن المطورين من التخلص من تنسيق برمجة JavaScript التقليدي ، إلا أنه يحتوي على مجتمعات مستخدمين محدودة. هذا يعني أن هناك خطرًا محتملاً من أن يختفي TypeScript إذا ظهرت مجموعة شاملة أخرى صارمة من JavaScript. على العكس من ذلك ، لن يختفي JavaScript ES6 قريبًا لأنه معيار الصناعة الحالي عند التطوير في JavaScript.

4. التوثيق

بكل صدق ، توفر الوثائق مرضية لجميع هذه الأطر. ومع ذلك ، لا يزال من الجدير بالذكر أن توثيق React متاح بأكبر عدد من اللغات (16). تتخلف Vue ، مع التوثيق بـ 8 لغات ، بينما يتوفر توثيق Angular بأربع لغات. تعد وثائق React متماسكة وقد وحدت النظرية في التسليم لمختلف المطورين.

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

5. دعم المجتمع

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

إطار Svelte (ذكر مشرف)

اعتقدنا أنه من الحكمة ذكر إدخال جديد نسبيًا في مجال JavaScript. تم تطوير Svelte بواسطة Rich Harris وتم إصداره لأول مرة في عام 2016 ، وقد اكتسب شعبية هائلة طوال عام 2019. وقد أدخل العديد من التحسينات في JavaScript مثل التغييرات في التعامل مع الحالة المحلية.

تجدر الإشارة أيضًا إلى أن Svelte ليس لديه DOM افتراضي ويقوم بتحويل التعليمات البرمجية المكتوبة إلى JavaScript في وقت الإنشاء ، بدلاً من وقت التشغيل. بشكل أساسي ، يتحايل على تحويل العناصر التصريحية إلى DOM الحقيقي.

ملخص

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

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