كيفية اختيار أفضل إطار أمامي

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

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

يمكن لإطار الواجهة الأمامية الذي تختاره إنشاء مشروعك أو كسره على المدى الطويل.

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

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

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

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

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

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

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

من ناحية أخرى ، هناك وفرة من الموارد لـ Angular و React. سيحتوي أي موقع تعليمي موجه للواجهة الأمامية تقريبًا على مقالة أو مقالتين عنها ، وربما حتى كتاب أو دورة فيديو كاملة.

يصل نوع Vue إلى الوسط: يحتوي على وثائق جيدة وهناك عدد قليل من الدورات التدريبية الرائعة التي يمكنك الاختيار من بينها.

Aurelia ، على سبيل المثال ، لديها ما يقرب من صفر من الموارد ؛ الأمل الوحيد لك هو التوثيق والحظ.

أنا أفضل الخيارات.

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

لسوء الحظ ، لن تنجح هذه الاستراتيجية إذا كانت خياراتك محدودة ، مما يقودنا إلى النقطة التالية.

شعبية

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

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

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

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

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

القادة الواضحون هنا هم Angular و React.

تتطلب معظم قوائم الوظائف ذات الصلة بالواجهة الأمامية واحدة أو أخرى. يتم دعمهم من قبل Google و Facebook على التوالي ، وبالتالي يشعر أصحاب العمل "بالأمان" بشأن اختيارهم.

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

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

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

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

الميزات الأساسية

دعنا نحصل على القليل من التقنية الآن.

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

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

دعونا نتطرق لفترة وجيزة إلى الخيارات الشائعة.

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

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

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

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

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

شيء آخر مختلف بشكل كبير عن الأطر الأخرى هو Ember Data. إنها طبقة بيانات لتطبيقات Ember. يمكنك التفكير في الأمر مثل نوع من ORM للواجهة الأمامية. تقوم بإنشاء نماذج ورسم خريطة للعلاقات فيما بينها.

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

Angular 2 هو إطار عمل غني بالمميزات. يأتي مزودًا بالعديد من الوحدات النمطية مثل Ember ، لذلك لديك الكثير من الأدوات تحت تصرفك خارج الصندوق. ومع ذلك ، نظرًا لأن Angular مخصص للتطبيقات الكبيرة ، فإنه يروج لـ TypeScript ، مما قد يؤدي إلى بعض المقاومة قبل أن تجربها.

شيء ملحوظ آخر هو الاستخدام الكثيف للملاحظات من مكتبة Rx ، وهو أمر رائع حقًا. يمكنك تمثيل أي شيء تقريبًا على أنه يمكن ملاحظته وتطبيق عمليات عالية المستوى مثل الخريطة ، والفلتر ، وما إلى ذلك. إذا كنت قد استخدمت Lodash أو Underscore ، فإن Rx هي نفسها نوعًا ما ولكن على المنشطات.

فيما يلي ملخص للميزات الأساسية لأطر العمل الأربعة التي نناقشها في هذه المقالة:

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

سهولة الاستخدام

إذا كنت لا تزال متحمسًا للإطار الذي اخترته في هذه المرحلة ، فإن الخطوة التالية هي أن تتسخ يديك.

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

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

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

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

الآن بالنسبة إلى React و Vue ، لديهم نوع من CLI و create-response-app و vue-cli. ولكن إلى جانب إنشاء مشروع أولي مع بعض الخيارات ، فإنها لا تقدم الكثير مقارنةً بـ Ember أو Angular. من المفهوم أن كلاهما يمثل طبقة عرض. إذا كنت تحب سير العمل المخصص أو التجريب أو الهياكل المختلفة على أساس مشروع إلى مشروع ، فأنت في مكان جيد. بالنسبة لبعض المطورين ، المرونة هي المفتاح الذي يأتي بطبيعته مع استخدام React أو Vue.

يأتي Angular 4 مع CLI مثل Ember. يمكنك إنشاء مكونات وتوجيهات وخدمات وما إلى ذلك. كما أنه ينشئ البنية الأولية لتطبيق ما ، لذلك ما عليك سوى القلق بشأن المنتج. تعد بيئة الاختبار رائعة حقًا ، حيث أنه مع كل جزء من التطبيق الذي تم إنشاؤه ، فإن مجموعة الاختبار تعيش بالقرب منها (حرفيًا). بالإضافة إلى ذلك ، قد توفر TypeScript دفعة إنتاجية حقيقية. هذا هو السبب:

كم مرة واجهت رمزًا يحتوي على أسطر مثل هذا ...

 function doSomething(someData) { // do something }

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

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

سهولة التكامل (مع المكتبات الأخرى)

أخيرًا وليس آخرًا ، يمكن اعتبار هذا جزءًا من قابلية الاستخدام ، ولكن من المهم جدًا أنه يستحق القسم الخاص به.

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

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

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

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

Ember لديه EmberObserver ، وهو موقع ويب لمكونات المجتمع الإضافية. كل واحد منهم لديه درجة على مقياس من صفر إلى عشرة. إنه مكان رائع حقًا للبحث عن شيء تحتاجه. إذا قمت بكتابة اسم مكتباتك المفضلة ، مثل Lodash أو Rx أو Ramda ، فستجد المكونات الإضافية ذات الصلة من أغلفة بسيطة لإكمال عمليات إعادة الكتابة. بالطبع ، هناك مستودعات Awesome React و Awesome Vue التي تجمع الموارد ذات الصلة ، بما في ذلك المكتبات ، لكنني وجدت أن EmberObserver مفيد بشكل خاص.

الالتزام بإطار عمل JavaScript

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

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

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