ما هي الأطر الثلاثة الرئيسية لواجهة الويب الأمامية؟

ثلاثة أطر عمل رئيسية للواجهة الأمامية للويب: 1. Angular، وهو إطار أمامي يستخدم لإنشاء واجهة تطبيق واحدة، مع وظائف وحدة قوية وأوامر مخصصة؛ 2. React، وهو JavaScript يستخدم لبناء إطار عمل لتطوير واجهات المستخدم، ويستخدم بشكل أساسي لـ build UI 3.vue، هو إطار عمل JavaScript تقدمي لبناء واجهات المستخدم، ويركز فقط على طبقة العرض، ومن السهل جدًا تعلمه ودمجه مع المكتبات الأخرى أو المشاريع الحالية.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 7، كمبيوتر Dell G3.

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

الأطر الثلاثة الرئيسية للواجهة الأمامية للويب هي Angular وReact وVue.

1. الزاوي

تم إنشاء AngularJS في عام 2009 بواسطة Misko Hevery وآخرين، ثم استحوذت عليها Google لاحقًا. إنه إطار عمل JS أمامي ممتاز يُستخدم في العديد من المنتجات. إنه ليس مجرد إطار عمل تطوير أمامي بمفاهيم متقدمة، ولكنه أيضًا حل شامل. إنه يتبع نمط MVC في التصميم المعماري ويدعو إلى الاقتران الفضفاض بين البيانات ومكونات المعالجة المنطقية. تدرك AngularJS الامتداد الطبيعي لـ HTML من خلال تقنية التعليمات، وتحقق المزامنة التلقائية ثنائية الاتجاه لنموذج البيانات وعرض العرض من خلال تقنية التجميع، مما يخفف من عمليات DOM المعقدة. بالإضافة إلى ذلك، فإنه يوفر أيضًا دعمًا جيدًا لتكنولوجيا الاختبار الآلي الأمامية.

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

مميزة:

1. هيكل التطبيق الجيد

2. ربط البيانات في اتجاهين

3. التعليمات

4. قالب HTML

5. يمكن تضمينها وحقنها واختبارها

ميزة:

1. القالب قوي وغني بالوظائف، ويأتي مع مجموعة غنية للغاية من التعليمات الزاوية.

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

3. تخصيص التعليمات بعد تخصيص التعليمات، يمكنك استخدامها عدة مرات في المشروع.

4. تقدم ng modularization بعض الأشياء من Java (حقن التبعية) بجرأة، مما يجعل من السهل كتابة تعليمات برمجية قابلة لإعادة الاستخدام، وهو أمر مفيد جدًا لفرق التطوير الرشيقة.

تم تطوير 5.angularjs بواسطة شركة الإنترنت العملاقة Google، مما يعني أيضًا أنها تتمتع بأساس متين ودعم مجتمعي.

عيب:

1. البدء باستخدام angular أمر سهل، ولكن بمجرد التعمق فيه، هناك العديد من المفاهيم التي يصعب فهمها أثناء التعلم.

2. هناك عدد قليل جدًا من الأمثلة في الوثائق، تتحدث الوثائق الرسمية بشكل أساسي فقط عن واجهة برمجة التطبيقات دون أي أمثلة، وفي كثير من الحالات، يمكنك الحصول على تعليمات محددة من Google، أو سؤال Misko مباشرة، مؤلف Angular.

3. التوافق مع IE6/7 ليس جيدًا بشكل خاص، ولكن يمكنك استخدام jQuery لكتابة التعليمات البرمجية الخاصة بك لحل بعض المشكلات.

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

5. يتطلب حقن تبعية DI إعلانًا صريحًا إذا كان ضغط التعليمات البرمجية مطلوبًا.

2. رد الفعل

تم إطلاق React، الذي أنتجته شركة Facebook، رسميًا في عام 2013، أي بعد 4 سنوات من إطلاق angular. ومع ذلك، وبفضل VirtualDOM المبتكر، فقد تجاوز angularJS في الأداء بمجرد إطلاقه. يحتوي على العديد من الميزات، بما في ذلك VirtualDOM، وJSX، وخوارزمية Diff، وما إلى ذلك، ويدعم بناء جملة ES6، ويستخدم البرمجة الوظيفية، وهو أعلى قليلاً، ولكنه أيضًا أكثر مرونة، مما يسمح بمزيد من إمكانيات التطوير.

مميزة

1. التصميم التعريفي: تعتمد React نموذجًا تعريفيًا، مما يجعل من السهل وصف التطبيقات.

2. الكفاءة: تعمل React على تقليل التفاعل مع DOM عن طريق محاكاة DOM.

3. مرن: يعمل React بشكل جيد مع المكتبات أو أطر العمل المعروفة.

ميزة:

1. السرعة العالية: أثناء عملية عرض واجهة المستخدم، تنفذ React تحديثات جزئية لـ DOM الفعلي من خلال العمليات الدقيقة في DOM الافتراضي.

2. التوافق عبر المتصفحات: يساعدنا Virtual DOM على حل مشكلات المتصفحات المشتركة، فهو يوفر لنا واجهة برمجة تطبيقات موحدة، وهي ليست مشكلة حتى في IE8.

3. النمطية: اكتب مكونات واجهة مستخدم معيارية مستقلة لبرنامجك، بحيث يمكنك عزلها بسهولة عند وجود مشكلة في أحد المكونات أو بعض المكونات.

4. تدفق البيانات في اتجاه واحد: Flux عبارة عن بنية لإنشاء طبقة بيانات أحادية الاتجاه في تطبيقات JavaScript 5. JavaScript متماثل ونقي: نظرًا لأن برامج زحف محركات البحث تعتمد على الاستجابات من جانب الخادم بدلاً من تنفيذ JavaScript، فإن العرض المسبق لتطبيقك يساعد في تحسين محركات البحث. 6. التوافق الجيد: على سبيل المثال، يتم استخدام RequireJS للتحميل والتعبئة، في حين أن Browserify وWebpack مناسبان لبناء تطبيقات كبيرة. إنهم يجعلون تلك المهام الصعبة أقل صعوبة. العيوب: React بحد ذاته مجرد V، وليس إطار عمل كامل، لذلك إذا كنت تريد إطارًا كاملاً لمشروع كبير، فأنت بحاجة بشكل أساسي إلى إضافة ReactRouter وFlux لكتابة تطبيقات كبيرة.

3. فيو

مع إطلاق إطار العمل الأخير (2014)، يعتمد Vue على ميزات أسلافه الزاويّة والتفاعلية (مثل VirtualDOM، وربط البيانات ثنائي الاتجاه، وخوارزمية الاختلاف، والخصائص المستجيبة، وتطوير المكونات، وما إلى ذلك) وإجراء التحسينات ذات الصلة لجعله أكثر ملاءمة، وأسهل للبدء، وأقل ملاءمة للمبتدئين.

مميزة:

1. إطار خفيف الوزن

2. ربط البيانات في اتجاهين

3. التعليمات

4. البرنامج المساعد

ميزة:

1. بسيط: الوثائق الرسمية واضحة جدًا وأسهل في التعلم من Angular.

2. سريع: قم بتحديث DOM في معالجة الدفعات غير المتزامنة.

3. التركيب: أنشئ تطبيقك باستخدام مكونات منفصلة وقابلة لإعادة الاستخدام.

4. مضغوط: ~18 كيلو بايت في الدقيقة + gzip، ولا توجد تبعيات.

5. قوية: لا تحتاج التعبيرات إلى الإعلان عن الخصائص القابلة للاستنتاج التابعة (الخصائص المحسوبة).

6. سهل الاستخدام للوحدات النمطية: يمكن تثبيته من خلال NPM أو Bower أو Duo، ولا يفرض على جميع التعليمات البرمجية الخاصة بك اتباع لوائح Angular المختلفة، كما أن سيناريوهات الاستخدام أكثر مرونة.

عيب:

1. حديث الولادة: Vue.js هو مشروع جديد، وليس ناضجًا مثل angular.

2. التأثير ليس كبيرًا جدًا: لقد بحثت في Google ووجدت أن تنوع أو ثراء Vue.js أقل من بعض المكتبات الشهيرة الأخرى.

3. لا يدعم IE8.

المعرفة الموسعة: ما الفرق بين Vue.js والأطر الأخرى؟

1. الاختلافات عن AngularJS

نقاط مماثلة:

كلا تعليمات الدعم: التعليمات المضمنة والتعليمات المخصصة.

كلا المرشحات تدعم: المرشحات المضمنة والمرشحات المخصصة.

كلاهما يدعم ربط البيانات في اتجاهين.

ولا يدعم أي منهما المتصفحات المنخفضة.

الاختلافات:

1. تكلفة تعلم AngularJS مرتفعة، مثل إضافة ميزة Dependency حقن، في حين أن واجهة برمجة التطبيقات المقدمة من Vue.js نفسها بسيطة وبديهية نسبيًا.

2. من حيث الأداء، تعتمد AngularJS على التحقق القذر من البيانات، لذلك كلما زاد عدد المراقبين، أصبح أبطأ.

يستخدم Vue.js المراقبة القائمة على تتبع التبعية ويستخدم تحديثات قائمة الانتظار غير المتزامنة. يتم تشغيل جميع البيانات بشكل مستقل.

بالنسبة للتطبيقات الكبيرة، يكون هذا الاختلاف في التحسين واضحًا تمامًا.

2. الاختلافات عن رد الفعل

نقاط مماثلة:

تستخدم React صيغة JSX خاصة، ويوصي Vue.js أيضًا بكتابة تنسيق ملف .vue خاص في تطوير المكونات. هناك بعض الاصطلاحات حول محتوى الملف، ويجب تجميع كليهما للاستخدام.

الفكرة المركزية هي نفسها: كل شيء عبارة عن مكون، ويمكن تداخل مثيلات المكون.

توفر جميعها وظائف ربط معقولة، مما يسمح للمطورين بتخصيص احتياجاتهم.

العمود AJAX والطريق والوظائف الأخرى ليست مدمجة في الحزمة الأساسية، ولكن يتم تحميلها كمكونات إضافية.

يتم دعم ميزات mixins في تطوير المكونات.

الاختلافات:

تعتمد React على Virtual DOM، بينما يستخدم Vue.js قوالب DOM. سيقوم Virtual DOM الذي تستخدمه React بإجراء اختبارات قذرة على النتائج المقدمة.

يوفر Vue.js التعليمات والمرشحات وما إلى ذلك في القوالب، والتي يمكنها تشغيل DOM بسهولة وسرعة كبيرة.

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