لماذا تحولت من AngularJS إلى React

في عام 2011 ، عندما بدأ الكود الخاص بي في الازدحام مع محددات jQuery وعمليات رد الاتصال ، جاء AngularJS كمنقذ للحياة مما ساعد في تحسين الإدارة والتطور السريع والمزيد من الوظائف خارج الصندوق. لقد أذهلني الربط ثنائي الاتجاه لـ AngularJS وفلسفة "النموذج كمصدر وحيد للحقيقة" وقلل من تكرار البيانات في جميع أنحاء طلبي.

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

نقاط الألم في AngularJS 1.x

• DOM للتنفيذ

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

• حقن التبعية الخاصة به

  لا يحتوي JavaScript على مدير حزم ومحلل تبعية خاص به. ولكن في الآونة الأخيرة ، عملت تطبيقات مثل AMD و UMD و CommonJS على حل هذه المشكلة بشكل جيد للغاية. للأسف ، لا تكون AngularJS مفيدة مع أي من هؤلاء. بدلا من ذلك ، فإنه يقدم حقنة التبعية (DI) من تلقاء نفسه ؛ على الرغم من وجود تطبيقات AngularJS DI غير الرسمية باستخدام RequireJS.

• الربط ذو الاتجاهين سيف ذو حدين

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

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

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

• Angular لها عالمها الخاص

  يجب أن تمر كل عملية في Angular بدورة الملخص وإلا فلن تتم مزامنة مكوناتك مع نماذج البيانات الخاصة بك. لذلك ، إذا كنت تستخدم أي مكتبة JavaScript موجودة لجهة خارجية ، فأنت بحاجة إلى لفها باستخدام وظيفة $ application الخاصة بـ Angular إذا كانت تتضمن تغييرات في البيانات أو ستحتاج إلى تحويلها إلى خدمة إذا كانت مكتبة أدوات مساعدة. إنه يشبه إعادة اختراع كل وحدة JavaScript متاحة لـ Angular.

• الكثير من المفاهيم ومنحنى التعلم الحاد

  يتطلب Learning Angular تعلم الكثير من المفاهيم بما في ذلك الوحدات النمطية ووحدات التحكم والتوجيهات والنطاقات والقوالب ووظائف الربط والمرشحات وحقن التبعية.

تعرف على React

React ، مكتبة JS الجديدة مفتوحة المصدر من Facebook و Instagram ، هي طريقة مختلفة لكتابة تطبيقات JavaScript. عندما تم تقديمه في JSConf EU في مايو 2013 ، صُدم الجمهور ببعض مبادئ التصميم الخاصة به مثل "تدفق البيانات في اتجاه واحد" و "DOM الافتراضي".

يقول موقع React الرسمي ، "React هي مكتبة JavaScript لبناء واجهات مستخدم" ونعم ، واجهات فقط ولا شيء آخر. إنه ليس إطار عمل مثل AngularJS. ولكن يمكنك كتابة مكونات قائمة بذاتها والتي تقارن إلى حد ما بالتوجيهات الزاويّة. لمحة سريعة

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

هذه مقارنة لطيفة جدًا بين الاثنين بواسطة Pete Hunt (من فريق Instagram)

إنها مجرد مكتبة. هل نحتاج إلى إطار عمل مع React؟

إجابة قصيرة: اختيارك.

باستخدام React ، يمكنك بناء واجهات مستخدم ، لكننا ما زلنا بحاجة إلى إدارة التبعيات وإجراء مكالمات AJAX وتطبيق عوامل تصفية البيانات. إذا كنا بحاجة إلى إطار عمل ، فلماذا نتخلى عن AngularJS؟

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

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

مزايا React

فلماذا قمت حقًا بالتبديل إلى React؟

رد الفعل سريع!

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

يساعد DOM الظاهري أيضًا في حل مشكلات المستعرضات المتقاطعة ، لأنه يوفر واجهة برمجة تطبيقات موحدة عبر المستعرضات والتي تعمل حتى في Internet Explorer 8. (Phew!)

كل شيء مكون (أداة واجهة المستخدم)

تؤدي كتابة مكونات واجهة المستخدم المستقلة إلى وحدات نمطية لتطبيقك وتفصل الاهتمامات الخاصة بكل منها. يمكن تطوير واختبار كل مكون بشكل منفصل وبالتالي استخدام مكونات أخرى تزيد من قابلية الصيانة.

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

Flux هي بنية لإنشاء طبقات بيانات أحادية الاتجاه في تطبيقات JavaScript. تم تصميمه في Facebook جنبًا إلى جنب مع مكتبة عرض React. فهو يجعل التطوير أبسط ويسهل تعقب الأخطاء وإصلاحها. الجريان هو مفهوم أكثر من تنفيذ. يمكن تنفيذه في أطر أخرى أيضًا. يمتلك Alex Rattray تطبيقًا رائعًا لتطبيق Flux باستخدام مجموعة العمود الفقري والنموذج في React.

جافا سكريبت ولا شيء غير ذلك

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

جافا سكريبت متماثل الشكل

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

يلعب React بشكل جيد مع RequireJS و Browserify و Webpack

هناك حاجة ماسة إلى اللوادر والحزم عند إنشاء تطبيق كبير. لسوء الحظ ، لا يوفر الإصدار الحالي من JavaScript مجمّع أو أداة تحميل وحدة ، على الرغم من أنه مقترح في الإصدار القادم من EcmaScript 6 (System.import). لحسن الحظ ، لدينا بعض البدائل مثل RequireJS و Webpack ، وهي لائقة جدًا.

تم تصميم React باستخدام Browserify ، ولكن إذا كنت تتطلع إلى حقن أصول الصور وتجميع LESS أو CoffeeScript ، فمن المحتمل أن يكون Webpack خيارًا أفضل.

لقد تحولت إلى رد الفعل مع بعض الألم.

• نظرًا لأن AngularJS هو إطار عمل ، فإنه يأتي مع الكثير من الأشياء الجيدة ، والتي تتضمن غلاف AJAX في خدمة $ http ، و $ q كخدمة وعد ، و ng-show ، و ng-hide ، و ng-class ، و ng-if كبيانات تحكم للنموذج.

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

  React-components.com هو موقع دليل غير رسمي حيث يمكنك العثور على مثل هذه المكونات مفتوحة المصدر.

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

إن React جديد ولذا سوف يستغرق المجتمع بعض الوقت لينمو.

اكتسب Angular شعبية كبيرة في الآونة الأخيرة ولديه عدد كبير نسبيًا من الامتدادات المتاحة مثل AngularUI و Restangular. مجتمع React مفتوح المصدر جديد ، لكنه ينمو بسرعة ، مع امتدادات مثل React Bootstrap. إنها مسألة وقت فقط قبل أن يتوفر لدينا المزيد من المكونات ، ويمكن بسهولة استخدام React لتطوير تطبيقات الويب بشكل سريع.

خاتمة

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

يستخدم كل من Facebook و Instagram React. تم تصميم محرر Atom الجديد من Github باستخدام React. يتم إعادة بناء Yahoo Mail القادم في React. ما هي الأمثلة الأخرى التي تحتاجها؟ جرِّب React اليوم.