من المحتمل أن يكون مطورو الواجهة الأمامية على دراية بشيء مشابه: فأنت تدخل في محرك البحث "أفضل أطر عمل JavaScript" وستحصل على مجموعة كاملة من النتائج استجابة لذلك يصعب عليك اختيار ما تريده بالضبط.
ما هو الأفضل لتطوير أجزاء العميل من مشاريع الويب؟ تقول مؤلفة المادة ، الجزء الأول من الترجمة التي ننشرها اليوم ، إنها ، كشخص يعمل في البرمجة بدوام كامل ، تعرف أن مقدمي الخدمات المتقدمين يبحثون عن شيء سيسمح لهم بتسريع العمل وتسهيل إنشاء واجهات.
استند تجميع هذا التصنيف من الأُطُر والمكتبات إلى دراسة استقصائية لأكثر من 450 مطورًا من
ValueCoders . خمسة من الأدوات الأكثر إثارة للاهتمام حصلت هنا.
مطورو ValueCoders اختيار رد الفعل
عندما اكتشفت أن زملائي كانوا يصوتون لصالح React ، لم أفاجأ. يعتبر معظم المشاركين في الاستطلاع React واحدة من أفضل مكتبات JavaScript. استخدم مطورونا React في العديد من المشاريع. جعل ذلك من الممكن رؤية نقاط القوة في هذه الأداة بوضوح. أي شخص يستخدم React يحصل على مجموعة من الميزات التالية:
- مكونات قابلة لإعادة الاستخدام.
- تزامن حالة التطبيق والواجهة.
- أنظمة التوجيه والتوحيد.
يعتمد مطورونا بشدة على قدرات React في إنشاء منطق مشروع أمامي. الأداة قوية للغاية ، لكن في نفس الوقت ، والتي فاجأتني ، فهي سهلة الاستخدام بشكل مدهش.
نظرة عامة على طلبنا
يتم ترتيب
طلبنا بكل بساطة. هذا هو برنامج مدرس الموسيقى الذي يساعدهم على إدارة الأنشطة المدرسية عبر الإنترنت. يساعد هذا المشروع المعلمين في أداء أعمالهم الأساسية ، مما يسهل حل المشكلات التنظيمية.
كانت الصعوبة الرئيسية في إنشاء هذا المشروع هي تطوير لوحة تحكم مصممة للمعلمين. يتيح لهم إدارة أنشطة الطلاب وتتبع إنجازاتهم. لقد حللنا هذه المشكلة باستخدام نظام مكتبة
Redux البيئي كأساس للتطبيق. أي ، أنشأنا قسمًا من التطبيق مصممًا للمدرسين ، باستخدامه يمكنهم تلقي معلومات حول إنجازات الطلاب ، وإظهار دروس موسيقية جديدة لهم ، والتواصل معهم ، ومقارنة لعبتهم بأي شيء ، وترك تعليقاتهم.
معلومات عن الطالب وأنشطتهفي الواقع ، لقد اكتسبت خبرة مع React أثناء إنشاء هذا التطبيق. هل هذا يعني أن React قائد معروف في أدوات الواجهة الأمامية؟ لا ، ليس كذلك. يمكن للكثيرين ، على سبيل المثال ، ذكر Vue ، واصفين هذا الإطار بأنه أحد الأفضل وتذكر المجموعة الغنية من الأدوات المساعدة القياسية المتوفرة فيه.
بشكل عام ، يتم اتخاذ القرار بشأن أي إطار عمل مناسب لحل مهمة معينة بواسطة مطوري الواجهة الأمامية. اتخاذ مثل هذه القرارات ، يواجهون الحاجة إلى الإجابة على الكثير من الأسئلة الصعبة. علاوة على ذلك ، بالنظر إلى حقيقة أن المطورين عادة ما يكون لديهم أي وقت تقريبا لاختيار أداة ، فإنهم يتوقفون عادة عند ما يعرفونه. في الوقت نفسه ، يفقدون المزايا المحتملة للتكنولوجيات المنافسة. على سبيل المثال - يمكننا التحدث عن حقيقة أن إطار العمل المألوف للمطور ، إذا قارنته بشيء آخر ، قد لا يكون الأسرع.
وبالنسبة للمطورين المبتدئين ، من الصعب حتى اتخاذ قرار ، قصر الخيارات على الأطر الرئيسية الثلاثة - الزاوي ، التفاعل ، والمركبة. من أجل تسهيل هذا الاختيار ، اخترنا الأطر الخمسة الأكثر أهمية للمكتبات الأمامية والمكتبات التي ينبغي إيلاء الاهتمام لأولئك الذين سيقومون بتطوير الويب في عام 2020.
أدوات خمسة الأمامية الكبيرة
استنادًا إلى شعبية أدوات تطوير الواجهة الأمامية وانتشارها ، إليك أفضل خمسة أطر عمل ومكتبة JavaScript:
- رد فعل
- فيو
- زاوي
- جمرة
- Backbone.js
لقد طورت كل من هذه الأدوات مجموعة كبيرة من المطورين. وإذا كنت تبحث عن أساس لمشروع الويب الخاص بك المقبل ، فلن تخسر بالمراهنة على إحدى هذه الأدوات. إليك معلومات عنها خلال الأشهر الستة الماضية ، تم جمعها بواسطة
npmtrends.com .
قم بتنزيل وحدات التخزين لحزم الزاوي ، المصدر ، والتفاعل ، vue ، والعمود الفقريمقارنة بين الحزم الزاويّة والمصدرة للرد والحزم والعمود الفقريالآن دعونا نتحدث عن كل من هذه المشاريع. لنبدأ مع رد الفعل.
1. الرد
في عالم JavaScript ، يعد React قائدًا بالتأكيد. تستخدم هذه المكتبة أفكار
البرمجة التفاعلية ، وهي تقدم التطوير الأمامي والعديد من مفاهيمها.
من أجل استخدام React بمرونة في تطوير مشاريع الويب ، تحتاج إلى تعلم العديد من الأدوات الإضافية. هنا ، على سبيل المثال ، ليست قائمة شاملة لهذه الأدوات التي توفرها المكتبات والتي يمكن استخدامها مع React. هذه هي Redux ، MobX ، Fluxy ، Fluxible ، RefluxJS. في تطوير React ، يمكنك أيضًا استخدام jQuery AJAX و Superagent و Axios و Fetch API.
▍ الوضع التنافسي
إليك تغريدة من 24 أكتوبر من هذا العام ، والتي تقدم تقريراً عن مقدمة في React لميزة تجريبية لدعم الوضع التنافسي (الوضع المتزامن). المطورين رد تحسين باستمرار هذا الوضع.
هنا يمكنك العثور على روابط لأداء من React Conf 2019 على الوضع التنافسي وابتكارات
React.lazy الأخرى ، مثل تقديم المكونات البطيئة (التي تم إنشاؤها باستخدام
React.lazy ) داخل مكونات
React.Suspense . كلا هاتين التقنيتين تجعل تطبيقات React أكثر استجابة من خلال التقديم دون حظر الخيط الرئيسي. سيسمح هذا لـ React بعدم تأخير معالجة المهام ذات الأولوية العالية ، مثل تشكيل استجابة التطبيق لتفاعلات المستخدم.
usSuspense وغيرها من التقنيات
React.Suspense تقنية
React.Suspense تحسين معالجة تحميل البيانات غير المتزامن في تطبيقات React. إذا وصفنا هذه التقنية باختصار ، فيمكننا القول إنها تسمح لك بتنظيم انتظار المكون حتى يتم الوفاء بشروط معينة وفي نفس الوقت عدم تعطيل تشغيل التطبيق بأكمله.
هناك ابتكار آخر تم عرضه في React 16.8 وهو السنانير. تتيح علاقات React للمطورين الاستفادة من قدرات React الأساسية دون الحاجة إلى استخدام المكونات المستندة إلى الفصل. من بين هذه الميزات إدارة حالة المكون والعمل مع أساليب دورة حياته. يحتوي React على العديد من السنانير المضمنة ، لكنه يسمح للمبرمج بإنشاء سنانير خاصة به.
تتكون تطبيقات React من مكونات تحتوي على منطق التطبيق وعلامة HTML لتشكيل الواجهة. لتحسين التفاعل بين المكونات ، يمكن للمطور استخدام Flux أو مكتبة JavaScript مشابهة.
تستخدم برمجة React مفاهيم مثل حالة وخصائص المكون. ويمثلها الكائنات ذات الصلة. استخدامها يتيح تنظيم تخزين البيانات في مكون وتبادل البيانات بين المكونات. على سبيل المثال ، نقل البيانات من منطق البرنامج الذي يتم تنفيذه بواسطة أحد المكونات إلى واجهة التطبيق ، أو نقل البيانات من المكونات الأصل إلى المكونات الفرعية.
Elements تفاعل عناصر النظام البيئي
حول مكتبة React ، ظهر نظام إيكولوجي كامل يمثله العديد من الأدوات والمكتبات الداعمة. فيما يلي بعض مكونات هذا النظام البيئي:
- تعد مكتبة React وجهاز React Router نفسه أداة لإدارة الطرق في التطبيق.
- حزمة رد الفعل المصممة للعمل مع DOM.
- React Developer Tools for Firefox and Chrome.
- JSX هي لغة ترميز تسمح لك بوصف عناصر HTML في شفرة JavaScript.
- أداة سطر الأوامر create-react-app ، والتي تم تصميمها لإنشاء مشاريع React template.
- المكتبات الداعمة المختلفة. من بينها ، على سبيل المثال ، يمكننا الإشارة إلى مكتبة Redux المستخدمة للتحكم في حالة التطبيقات ، ومكتبة Axios المستخدمة لتبادل البيانات مع واجهات برمجة التطبيقات الخاصة بالخادم.
في ختام الحديث عن React ، يمكننا القول أن هذه المكتبة قد تكون الخيار الأفضل لأولئك الذين يخططون لإنشاء مشروع ويب متقدم.
2. الزاوي
في مؤتمر AngularConnect 2019 ، أدلى فريق التطوير Angular ببيانات تتيح اعتبار Angular 9 نقطة تحول في تطوير هذا الإطار. على وجه الخصوص ، تم التخطيط لجعل برنامج التحويل البرمجي
Angular Ivy أداة قياسية متاحة لجميع التطبيقات. تتمثل المزايا الرئيسية لهذه التقنية في أن تطبيقها يتيح لك تسريع عملية التطوير وتقليل حجم التطبيقات وزيادة أدائها وموثوقيتها.
الزاوي الحديث هو إطار نمطي متقدم لتطوير الواجهة الأمامية. في السابق ، لربط Angular بصفحة ، كان يكفي إضافة العلامة المناسبة إلى رمز HTML الخاص به ، ويمكن للمطور الآن استيراد الوحدات Angular التي يحتاجها في مشروعه.
الزاوي معروف بمرونته. هذا هو السبب في أن الإصدارات 1.x الزاوي لا تزال ذات صلة. ومع ذلك ، يستخدم العديد من المطورين اليوم Angular 2+ بسبب بنية إطار عمل MVC ، والتي تغيرت بشكل كبير نحو بنية قائمة على المكونات.
أي شخص يريد استخدام Angular سيتعين عليه مواجهة بعض الصعوبات أثناء إتقان هذا الإطار. لذلك ، لإنشاء تطبيقات Angular ، من الضروري استخدام TypeScript. على الرغم من أن هذا يعقد العمل مع Angular ، إلا أن هذا الموقف له مزاياه. على وجه الخصوص ، فهو يزيد من موثوقية التطبيقات بسبب التحكم المتقدم في الكتابة ، مما يوفر للمبرمج أدوات تطوير إضافية.
ecosystem عناصر النظام البيئي غير النظامية
فيما يلي بعض أجزاء النظام البيئي الزاوي:
- أدوات سطر الأوامر لتبسيط إنشاء التطبيق مسبقا.
- مجموعة من الوحدات النمطية التي يمكن استخدامها عند تطوير مشاريع الزاوي:
@angular/common ، @angular/compiler ، @angular/core ، @angular/forms ، @angular/http ، @angular/platform-browser ، @angular/platform-browser-dynamic ، @angular/router و @angular/upgrade . - مكتبة Zone.js ، والتي تتيح لك التحكم في سياق تنفيذ التعليمات البرمجية.
- لغات TypeScript و CoffeeScript.
- يمكن تنظيم تبادل البيانات في التطبيقات الزاوية باستخدام RxJS والكائنات القابلة للملاحظة.
- الزاوي Augury هو أداة لتصحيح التطبيقات الزاوي.
- تقنية الزاوي العالمي لتنظيم التقديم من جانب الخادم للتطبيقات الزاوي.
الزاوي هو إطار JS متكامل يوفر لمبرمج الويب الحديث كل ما هو ضروري للعمل المثمر. يجب أن يولي Angular اهتمامًا لأولئك الذين يرغبون في الحصول على مجموعة واسعة من الأدوات القياسية وتقليل استخدام مكتبات الجهات الخارجية.
استمرار ،
الجزء 2أعزائي القراء! إذا عرض عليك تسمية أفضل إطار للتطوير الأمامي - فماذا تختار؟
