نحن ننشر الجزء الثاني من ترجمة المواد المكرسة لأفضل خمس أدوات جافا سكريبت لتطوير أجزاء العميل من مشاريع الويب. تناول
الجزء الأول مكتبة React والإطار الزاوي. هنا نناقش Vue ، Ember و العمود الفقري.
3. فيو
تأتي الأفكار وراء Vue من Angular و React ، لكن Vue هي ، من نواح كثيرة ، أفضل من هاتين الأداتين لتطوير الواجهة الأمامية. تم تنزيل Vue أكثر من 40 مليون مرة هذا العام. تم إصدار
تقرير Snyk JavaScript Frameworks Security الأخير. يهدف هذا البحث أساسًا إلى البحث عن أمان React and Angular ، ولكن كان هناك مكان لدراسة مشاريع أخرى. من Vue ، من هذا التقرير يمكنك معرفة ما هو معروف فقط حول 4 من
نقاط الضعف المباشرة التي تم إصلاحها.
إذا لم تكن معتادًا على Vue ، فإليك بعض الحقائق الأساسية حول هذا الإطار.
عند العمل مع Vue ، يتم تخزين منطق المكون وتخطيطه وأنماطه في ملف واحد. باستثناء الأنماط ، يتم أيضًا تخزين مواد المشروع في React. يتم توفير تفاعل المكونات في Vue من خلال الكائنات التي تخزن خصائص وحالة المكونات. هذا النهج ، أيضًا ، قبل ظهوره في Vue ، استخدم في React.
تتيح لك Vue ، التي تجعلها تشبه Angular ، خلط علامات HTML ورمز JavaScript. من أجل دمج بيانات المكونات في قالب ، تحتاج إلى استخدام توجيهات Vue. مثل
v-bind أو
v-if .
أحد الأسباب التي يجب أن تعتبر Vue بديلاً جديداً لـ React هي بسبب كيفية تنظيم حالة التطبيق هنا. في مشاريع React ، عند استخدام حزمة React + Redux ، حيث يزداد حجم التطبيق ، تصبح الإجراءات اللازمة لإدارة حالته أكثر تعقيدًا. قد يرجع ذلك إلى حقيقة أن المبرمج ، بدلاً من العمل على التطبيق نفسه ، يجب أن يقضي الكثير من الوقت في إعداد آليات Redux. يستخدم Vue مكتبة Vuex لإدارة الحالة. يشبه Flux و تم إنشاؤه خصيصًا لـ Vue. العمل معها هو أكثر ملاءمة بكثير من مع Redux.
إذا كنت تحاول الاختيار بين Vue و Angular ، فإن الأسباب التي تجعلك تفضل Vue يمكن تقليصها إلى حقيقة أن Angular ، بالمقارنة مع Vue ، تبدو كمشروع كبير الحجم معقد للغاية ، وطبيعته هي الرغبة في الحد من المطور. Vue أبسط بكثير من الزاوي ولا يحد المبرمجين كثيراً.
ميزة أخرى لـ Vue over Angular و React هي أنك لست مضطرًا لتعلم لغة جديدة للعمل مع هذا الإطار.
▍ عناصر النظام البيئي Vue
دعونا نقدم وصفًا موجزًا للنظام البيئي الذي يقع فيه الشخص الذي يختار Vue:
- للتحكم في حالة تطبيقات Vue ، يتم استخدام مكتبة Vuex ، والتي تستند إلى المفاهيم المتعلقة Flux.
- هناك أدوات مطور لمتصفح Chrome و Firefox تجعل إنشاء مشاريع Vue أسهل.
- يحتوي نظام Vue البيئي على
vue-loader for webpack ، مما يسمح لك باستخدام مكونات Vue كمكونات ملف فردي. - للعمل مع واجهات برمجة التطبيقات الخاصة بالخادم ، يمكنك استخدام عميل HTTP الخاص بالمورد
vue-resource source ومكتبة Axios. - تدعم Vue إطار عمل Nuxt.js ، والذي يتضمن دعمًا للتطبيقات التي يتم تقديمها على الخادم. يمكن اعتبار Nuxt.js منافسًا لـ Angular Universal.
- يمكنك استخدام مكتبة Weex لتطوير تطبيقات الأجهزة المحمولة المستندة إلى Vue.
Vue هو إطار رائع يتفوق على الآخرين من حيث قابليته للاستخدام. ربما أنا نفسي سوف أتحول إلى Vue في المستقبل القريب. هذا الإطار ليس معقدًا مثل React and Angular ، كما أنه مناسب تمامًا لتطوير التطبيقات ذات الأحجام المختلفة.
4. Ember
أصدر
Ember 3.13 هذا العام. ظهرت الكثير من الأشياء الجديدة في هذا الإصدار من الإطار. يشبه Ember العمود الفقري والزاوي. كما أنها واحدة من أقدم أطر JavaScript. ولكن ، رغم هذا ، من حيث الفرص ، لا يتخلف عن منافسيه الأصغر سنا. على سبيل المثال ، يدعم تقنية تغيير الخاصية التي يمكن تتبعها ، مما يسهل مراقبة التغييرات في حالة التطبيق ويجعل من السهل تصور هذه التغييرات.
لدى Ember بنية متطورة إلى حد ما تسمح لك بإنشاء تطبيقات عملاء ضخمة بسرعة. ينفذ الأفكار النموذجية MVC. تم تصميم تطبيقات Ember من المحولات والمكونات وأجهزة التحكم والأشياء المساعدة والنماذج والطرق والخدمات والقوالب والأدوات المساعدة والوظائف الإضافية.
واحدة من أكثر ميزات Ember إثارة للاهتمام هي أدوات سطر الأوامر (Ember CLI). تساعد هذه الأدوات المطورين الأماميين على العمل بشكل منتج. باستخدام Ember CLI ، يمكنك فقط إنشاء قوالب المشروع ، ولكن أيضًا الإعدادات المسبقة لوحدات التحكم والمكونات والكيانات الأخرى التي تم بناء التطبيقات منها.
عناصر النظام البيئي
يتمتع المطور الأمامي الذي يستخدم Ember تحت تصرفه بالميزات الرئيسية التالية:
- Ember CLI هي أداة لسطر الأوامر للنماذج الأولية للتطبيقات ولإدارة التبعية.
- خادم مطور Ember القياسي.
- Ember Data - مكتبة للعمل مع البيانات.
- المقاود هو محرك القالب المستخدمة في تطبيقات Ember.
- QUnit هو إطار لاختبار مشاريع Ember.
- Ember Inspector - أدوات المطور لمتصفح Chrome وفايرفوكس.
- Ember Observer - كتالوج الوظائف الإضافية لـ Ember CLI.
ربما يُطلق على Ember إطار عمل مُستخفاف به ، ولكن على الرغم من ذلك ، يعد إنشاء مشاريع ويب معقدة أمرًا رائعًا.
5. العمود الفقري
Backbone هو إطار جافا سكريبت يعتمد على بنية مشابهة لـ MVC. دعنا نقول أنه في MVC يسمى "تحكم" في العمود الفقري يسمى "عرض". يمكن استخدام طرق العمود الفقري أنظمة templating المختلفة. على سبيل المثال - الشوارب ، المقاود ، jQuery-tmpl. في مشاريع Backbone ، يمكنك استخدام مكتبات الجهات الخارجية. تجدر الإشارة إلى أن التبعية الأساسية الوحيدة الثابتة هي مكتبة Underscore.js.
Backbone هو إطار سهل الاستخدام يسمح لك بتطوير التطبيقات ذات الصفحة الواحدة بسرعة. من بين الأدوات المساعدة المستخدمة بالتزامن مع Backbone.js ، يمكننا أن نذكر مثل Chaplin ، Marionette ، Thorax.
إذا كنت بحاجة إلى تطوير تطبيق يعمل به المستخدمون الذين ينتمون إلى مجموعات مختلفة ، فيمكنك استخدام مجموعات (صفائف) Backbone لفصل النماذج. في نماذج العمود الفقري والمجموعات والطرق وطرق العرض ، يمكنك استخدام الأحداث.
ecosystem عناصر النظام البيئي الخلفية
من بين ميزات نظام العمود الفقري البيئي ما يلي:
- تتضمن مكتبة Backbone الأحداث والنماذج والمجموعات والآراء وجهاز التوجيه.
- تحتوي مكتبة Underscore.js ، التي يعتمد عليها Backbone ، على مجموعة من وظائف المساعد التي تساعدك على كتابة رمز JS للمتصفح المتقاطع.
- عند تطوير تطبيقات العمود الفقري ، يمكنك استخدام أنظمة القوالب المختلفة.
- تبسط أداة سطر الأوامر Backbone CLI تطوير التطبيق.
- تساعد مكتبات Marionette و Thorax و Chaplin في إنشاء تطبيقات لها حلول معمارية محددة.
ربما لا يمكن أن يسمى العمود الفقري منافسًا جادًا في أدوات التطوير الأمامية الأخرى التي تمت مناقشتها في هذه المادة. ومع ذلك ، فإن هذا الإطار يحظى بشعبية كبيرة بين المطورين. لذلك ، قد يتضح أن العمود الفقري هو بالضبط ما تحتاجه.
النتائج
قدمت هذه المقالة لمحة موجزة عن أطر عمل الويب ، والتي تم الاعتراف بها على أنها الأفضل وفقًا لاستطلاع أجري بين مطورين من
ValueCoders . نأمل أن تساعد هذه المراجعة في اتخاذ القرار الصحيح لأولئك الذين ينشغلون باختيار إطار لمشروعهم القادم على الويب.
أعزائي القراء! على ماذا تكتب مشاريع الويب الأمامية؟
