Client side JS frameworks

الأداء

AngularJS

هناك أمران يجب أخذهما بعين الاعتبار عند الحديث عن أداء Angular. كما ذُكر سابقًا، فإن Angular 1.x وما بعدها يعتمد على مفهوم الربط ثنائي الاتجاه (Two-Way Data Binding). هذا المفهوم قائم على آلية تُعرف باسم “Dirty Checking”، وهي آلية قد تتسبب في بطء تطبيقات AngularJS.

عند ربط القيم في HTML مع نموذج البيانات (Model)، يقوم AngularJS بإنشاء Watcher لكل عملية ربط بهدف تتبّع التغييرات في الـ DOM. وعندما يتم تحديث واجهة العرض (View) وتصبح في حالة “Dirty”، يقوم AngularJS بمقارنة القيمة الجديدة بالقيمة الأصلية (المرتبطة سابقًا)، ثم يُشغّل حلقة $digest.

حلقة $digest لا تتحقق فقط من القيم التي تغيّرت فعليًا، بل تقوم أيضًا بفحص جميع القيم الأخرى التي تتم متابعتها من خلال الـ Watchers. ولهذا السبب، ينخفض الأداء بشكل ملحوظ عندما يحتوي التطبيق على عدد كبير من الـ Watchers.

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

لا تتوقف الحلقة عن العمل حتى تقوم بفحص جميع الـ Watchers وتطبيق كل التغييرات اللازمة على كلٍّ من واجهة العرض (View) ونموذج البيانات (Model). عمليًا، يمكننا ربط حقل إدخال <input> بعدة واجهات عرض ونماذج بيانات مختلفة. وعندما يقوم المستخدم بإدخال بيانات جديدة في هذا الحقل، قد لا يظهر التغيير بشكل فوري، ولذلك يُفضَّل تجنّب هذا الأسلوب.

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

ضعف الأداء كان السبب الرئيسي الذي دفع داعمي Angular 2 إلى إعادة تصميم الطريقة التي يُغيّر بها Angular حالة البرنامج. حيث قدّمت إصدارات Angular 2 وAngular 4 الأحدث دعمًا لخاصية التصيير من جهة الخادم (Server-Side Rendering) والربط أحادي الاتجاه (One-Way Data Binding) بطريقة مشابهة لـ React. ومع ذلك، ما زالت Angular 2 وAngular 4 توفّران خيار الربط ثنائي الاتجاه عند الحاجة.

المزايا (Pros)

سهولة العثور على مطورين بسبب كِبَر مجتمع المطورين.
تصميم واجهة المستخدم وتعديلها بشكل مباشر وسهل.
نمط كتابة الكود واضح وسهل الفهم لأي شخص.
يوفّر خيار التصفية لإدخال البيانات وعرضها داخل التطبيق حسب المتطلبات.
يساهم AngularJS (الإصدار 1.x) في تسريع التطوير المبدئي لتطبيقات CRUD بفضل الربط ثنائي الاتجاه والميزات المدمجة.
خدمات AngularJS متوفرة وجاهزة، مما يجعل عملية البرمجة أسهل بكثير.

العيوب (Cons)

تبدو الشيفرة البرمجية معقّدة بالنسبة للشخص العادي الذي لا يمتلك أي معرفة بالبرمجة.
قد يتأخر تطوير تطبيقات الويب أحيانًا بسبب عمليات التلاعب بالـ DOM.
يتميز AngularJS بحجم إطار عمل كبير نسبيًا.
توجد مشاكل تتعلق بفهرسة محركات البحث (Search Engine Indexing).

مواقع تستخدم Angular:

facebook.com
paypal.com
youtube.com
udemy.com
freelancer.com
landsend.com
upwork.com
netflix.com

React

قدّم مطوّرو React مفهوم الـ Virtual Document Object Model (DOM الافتراضي)، والذي يُعدّ أحد أكبر مزايا React مقارنةً بالأطر الناضجة الأخرى، بما في ذلك AngularJS.

كيف يعمل الـ DOM الافتراضي؟
عند تحميل مستند HTML، يقوم React بإنشاء شجرة DOM خفيفة الوزن مكوّنة من كائنات JavaScript ويحتفظ بها. وعندما يقوم المستخدم – على سبيل المثال – بإدخال بيانات جديدة في حقل <input> داخل المتصفح، يقوم React بإنشاء DOM افتراضي جديد، ثم يقارنه مع الـ DOM الافتراضي السابق المحفوظ.

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

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

فيما يتعلّق بـ الربط أحادي الاتجاه للبيانات (One-Way Data Binding)، فإن React لا يستخدم Watchers لتتبّع التغييرات في الـ DOM الحقيقي. وبشكل عام، يجعل React عملية التحكّم في أداء التطبيق أبسط وأسهل.

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

المزايا (Pros)

يمكن تعلّم المفاهيم الأساسية في React (المكوّنات، JSX، الحالة State) بسرعة نسبيًا.
يُعدّ من أخف أطر العمل وزنًا لتطوير تطبيقات الويب الخاصة بالأعمال.
يوفّر مجتمع المطورين دعمًا جيدًا.
إعادة استخدام الشيفرة البرمجية السابقة سهلة في React.

العيوب (Cons)

إتقان النظام البيئي الكامل لـ React (إدارة الحالة، التوجيه Routing، التصيير من جهة الخادم SSR) يتطلّب منحنى تعلّم أكثر حدّة.
React هي مكتبة وليست إطار عمل متكامل الوظائف.
بناء تطبيقات مؤسسية كبيرة الحجم يتطلّب تخطيطًا دقيقًا ودمج مكتبات إضافية لإدارة الحالة والتوجيه وغيرها من الوظائف.

مواقع تستخدم React:

Facebook (جزئيًا)
Instagram (كاملًا)
Khan Academy (جزئيًا)
Codecademy (جزئيًا)
New York Times (جزئيًا)
Yahoo Mail (كاملًا)
web.whatsapp.com
dropbox.com

ماذا أختار؟

إذا كنت تعمل في Google: Angular
إذا كنت تحب TypeScript: Angular
إذا كنت تحب البرمجة كائنية التوجّه (OOP): Angular
إذا كنت بحاجة إلى إرشاد وبنية واضحة ومساعدة جاهزة: Angular
إذا كنت تعمل في Facebook: React
إذا كنت تحب المرونة: React
إذا كنت تحب الأنظمة البيئية الكبيرة: React
إذا كنت تحب الاختيار من بين عشرات الحِزم والمكتبات: React
إذا كنت تحب JavaScript ونهج “كل شيء هو JavaScript”: React
إذا كنت تحب الكود النظيف جدًا: Vue
إذا كنت تريد أسهل منحنى تعلّم: Vue
إذا كنت تريد أخف إطار عمل: Vue
إذا كنت تفضّل فصل الاهتمامات داخل ملف واحد: Vue
إذا كنت تعمل بمفردك أو ضمن فريق صغير: Vue (أو React)
إذا كان تطبيقك مرشّحًا لأن يصبح كبيرًا جدًا: Angular (أو React)
إذا كنت تريد بناء تطبيق باستخدام React Native: React
إذا كان توفّر المطورين عاملًا أساسيًا: React يمتلك أكبر قاعدة مطورين، يليه Angular ثم Vue.js
إذا كنت تعمل مع مصممين وتحتاج إلى ملفات HTML نظيفة وواضحة: Angular أو Vue
إذا كنت تحب Vue ولكنك قلق من محدودية النظام البيئي: React
إذا لم تستطع اتخاذ قرار: تعلّم React أولًا، ثم Vue، ثم Angular.