قبل أربع سنوات تقريبا من الآن، وتحديدا في عام 2016، نشرت تدوينة بعنوان ”لماذا اخترات أنجولار وليس إطار عمل آخر” وكنت آنذاك من محبي AngularJs وأعتمد عليه في إنجاز مشاريعي.
في تلك التدوينة سقت بعض الدواعي والأسباب التي جعلتني أعجب بهذا الفريموورك دون غيره من أطر العمل الأخرى.
تمر الأيام والشهور والسنوات لأجد نفسي اليوم من محبي مكتبة React.js والمدافعين عنها، وذلك بعدما أبديت عدم رضاي بها في التدوينة القديمة التي أشرت إليها أعلاه.
بعض من الإخوة المتابعين لمدونة توتومينا ممن قرأوا تلك المقالة سألوني عن السبب أو الأسباب التي جعلتني أغير رأيي الذي كنت مقتنعا به بخصوص أنجولار ورياكت. هذا التغيير لمسوه من خلال تركيزي الكبير في هذه المدونة على React والمكتبات والأدوات التي تحوم حولها.
لكي أزيل اللبس عن هذه المسألة، قررت أن أخصص هذه التدوينة الجديدة والمحيَّنة لتبيان الحيثيات والأسباب التي كانت وراء انتقالي من AngularJs إلى بيئة React.
الأسباب التي سأذكرها ليس بالضرورة موضوعية ومقبولة بالنسبة للجميع، وإنما يمكن اعتبارها جزء أو نتيجة لتجربتي ورؤيتي الخاصة لمجال تطوير تطبيقات الويب الحديثة.
مشكل الإستقرار والتوافقية عند أنجولار 2
بعد ظهور إصدار أنجولار 2 في ربيع عام 2016، كان جميع مستعلمي الإصدار السابق AngularJs 1.x قد رفعوا سقف آمالهم عاليا جدا بإصدار جديد يواصل مسيرة التألق التي بدأها السلف.
ولكن الشهور الأولى من حياة Angular كانت صعبة للغاية وشكلت نوعا من الصدمة لدى محبيه. فرغم السنوات الطويلة التي ظل فيها فريق أنجولار عاكفا على تطوير الإصدار الثاني وإخراجه للنور إلا أن النتيجة لم تكن مثالية أبدا لا سيما على مستوى الأداء والإستقرار وكذلك تجربة المطور.
واحد من أبرز المشاكل التي عانى منها أنجولار 2 كان (ومازال بدرجة أقل) كم الأخطاء الكبيرة والكثيرة التي يواجهها معه المطورون. عدم الإستقرار هذا جعل العديد منهم يتركون هذا الإطار بحثا عن حل آخر أكثر هدوءًا واستقرارا.
هذا الكم الكبير من الأخطاء والتصحيحات أجبر الفريق المطور على إخراج إصدار كبير جديد كل 6 أشهر! وكل إصدار جديد كان يحمل معه مزايا جديدة وترقيعات للأخطاء التي كانت في الإصدار السابق. وفي كثير من الأحيان يتم فقدان التوافقية من إصدار لآخر وتصبح مسألة الإنتقال أصعب وأقل سلاسة. ولعل هذا يفسر كيف وصلنا الآن إلى الإصدار الكبير التاسع في غضون أربع سنوات فقط! بينما Vue 2 مازال قائما إلى الآن وهو الذي أطلق في نفس الفترة التي ظهر فيها Angular 2.
صحيح أن Vue.js أقل ضخامة وتعقيدا من Angular ولكن هذا لا يبرر هذا المستوى الكبير من عدم الإستقرار الذي عانى منه الثاني.
في حالة React مثلا، يمكن الإنتقال من الإصدار 15 (أبريل 2016) إلى الإصدار 16 (الإصدار الحالي) بكل سلاسة، وحتى مع الإضافات الكبيرة التي تشهدها مكتبة React.js في الآونة الأخيرة (مثل Hooks) ما زال التوافق ممتازا للغاية مع الإصدارات الأقدم.
إذن يمكننا أن نقول بأن عددا كبيرا من مطوري الويب هجروا أنجولار بسبب أنجولار نفسه وليس بسبب أي منافس آخر.
مشاريع أنجولار تكون في الغالب كبيرة وغير مناسبة للمستقلين
ما يمكن ملاحظته كذلك في كثير من الأحيان أن مشاريع Angular هي في الغالب مشاريع كبيرة وغير مناسبة للمستقلين (Freelancers) الذين يعملون فرادى.
فعلى سبيل المثال نجد مشاريع React أكثر بكثير من مشاريع Angular في مواقع ومنصات العمل الحر مثل Freelancer و UpWork أو حتى مستقل. وأعلم عددا من الأصدقاء يعملون بإطار العمل أنجولار في مشاريع للأبناك وإدارة الموارد البشرية (CRM) إلخ… وهذا النوع من المشاريع المعقدة تحصل عليه شركات تتوفر على مطورين يعملون كامل الوقت في المقرات لديها ونادرا ما تجد من يعمل عن بعد.
الأمر يمكن تشبيهه بالمقارنة مثلا بين أطر عمل PHP وبيئة Java EE، فالأخيرة ليس مطلوبة بشكل كبير في سوق العمل عن بعد، بينما الأولى مسيطرة بشكل واضح على هذا المجال، على الأقل في منطقتنا.
React.js تساعدنا على تعلم جافا سكريبت
في أيامي الأولى مع مكتبة React، قرأت عبارة في أحد المقالات الأجنبية تقول: عندما تكون مطور رياكت جيد فبالضرورة ستكون مطور جافا سكريبت جيد كذلك!
لم أستوعب تلك الجملة بشكل كامل آنذاك لأنني مازلت حينها في بداياتي مع هذه المكتبة بعدما تركت أنجولار للأسباب التي ذكرتها سابقا. ولكن بعد مرور تلك الشهور والسنوات أدركت جيدا بأنها عبارة صحيحة إلى حد بعيد.
عندما تستخدم React فإنك تكتب أكواد جافا سكريبت 100%، لا يوجد HTML أو أي نوع من نظام القوالب الذي اعتدنا عليه في Angular أو حتى Vue على سبيل المثال. أكواد HTML نكتبها بصيغة JSX التي هي في النهاية مجرد جافا سكريبت.
من جهة أخرى نجد أن كل مكون في React هو عبارة عن دالة أو function تقبل بارامترات (Props)، ومنذ ظهور ميزة React Hooks أصبح بمقدورنا كذلك تعيين حالة المكون (State) داخل تلك الدوال بعدما كانت هذه الميزة فيما سبق حكرا على Class components.
لكي نفهم طريقة عمل ال Hooks يجب أن نقرأ كثيرا عن مفهوم ال Closures في جافا سكريبت ونفهم طريقة عمله، هذا يعني بالمحصلة تحسين مستوانا في جافا سكريبت.
كذلك تدفع بنا React نحو اعتناق مبادئ البرمجة الوظيفية (Functional Programming) وفهم أسسها مثل Immutability ،Pure Functions و Higher Order Functions. هذه الأسس ستجدها في كل مكان في بيئة React.js وستجعلك تتعلم العديد من الأمور حول كيفية عمل واشتغال جافا سكريبت خلف الكواليس.
هكذا تعمقت في العديد من مزايا ومقومات الجافاسكريبت التي لم أكن قريبا منها في حياتي مثلما أصبحت الآن مع رياكت.
الإتجاه الواحد لتدفق البيانات
من أهم الأشياء التي تميز مكتبة رياكت عن غيرها من مكتبات وأطر عمل جافا سكريبت ميزة التدفق أحادي الإتجاه للبيانات أو Unidirectional Data Flow. تبرز قيمة هذه الخاصية كلما زادت درجة تعقيد التطبيق وتشابكت المكونات فيما بينها.
يتجلى مفهوم Unidirectional Data Flow في أن كل شيء يبدأ من الوظيفة setState() التي يجب على المطور أن يقوم بالإستعانة بها كلما أراد تغيير حالة معينة في التطبيق. لا وجود لمفهوم Reactivity الذي يعمل خلف الكواليس والذي بنيت عليه مكتبات مثل Vue أو Svelte على سبيل المثال.
كلما قمنا بتحديث الحالة بواسطة setState() فإنه يتم إعادة بناء Virtual DOM بالإعتماد على على الحالة الجديدة وتحديث واجهة المستخدم بعد ذلك. هذه العملية تتم في اتجاه واحد دائما وبشكل تصريحي (Declarative) ما يجعل الكود أكثر قابلية للقراءة والفهم وأقل عرضة للأخطاء (حسب تجربتي الخاصة).
بهذه الطريقة حتى حقول الإدخال (Inputs) لا تستطيع التحكم في أي حالة إلا بعد المرور عبر setState() 😃
<input
value={this.state.name}
onChange={event => this.setState({ name: event.target.value })}
type="text"
/>هذا لا نجده في أنجولار ولا في Vue حيث الحالة أو Model يتغير في الإتجاهين.
<input [(ngModel)]="name" type="text" />في الختام
هذه كانت أبرز الدوافع التي كانت وراء انتقالي من أنجولار إلى React.js. الدافع الأول في هذا المقال قوي وكان وراء هجران إطار عمل جوجل من طرف الآلاف من المطورين حول العالم.
الأسباب التي ذكرتها ليست موضوعية على أي حال، والسبب الذي يجعلني أختار تقنية على حساب أخرى يمكن أن يكون سببا لآخر غيري لكي يتركها.
التجربة الخاصة والحكم الشخصي يلعبان دورا كبيرا في مثل هذه المسائل والنقاشات. لذلك سيكون جميلا أن تشاركوني آراءكم حول ما جاء في هذه التدوينة وما هي النقاط التي ربما لا تتفقون معي بخصوصها.
في انتظاركم 🙂
