أهم أدوات واجهة المستخدم الأمامية

في كلمة البرمجة ، يمكن تجميع جميع العمليات في النهاية الأمامية والخلفية. الأول يتعامل مع جانب العميل من موقع ويب أو تطبيق ، ويمثل الأخير جانب الخادم. تشمل الاهتمامات الرئيسية للمطور الأمامي واجهة المستخدم (UI) ، وتصميم مواقع الويب سريعة الاستجابة ، وسهولة الوصول والتوافق. كل هذه ليست بسيطة لإدارة – وخاصة بالنسبة للمبتدئين.

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

Bootstrap : عملاق الصناعة

أطر عمل الواجهة الأمامية: يحتل Bootstrap بفخر الأطر الأمامية الأكثر شعبية حتى منذ طرحه في البداية في عام 2011. واعتبارًا من نوفمبر 2019 ، يستخدمه واحد من بين خمسة مواقع على الويب ، بما في ذلك تلك الخاصة بالعمالقة مثل Netflix و CNN. ومع ذلك ، بدأ كل شيء باسم مختلف. سعيا لتحقيق التماسك بين الأدوات المستخدمة داخليا في تويتر ، توصل مارك أوتو وجاكوب ثورنتون إلى ما أطلقوا عليه “مخطط تويتر”.

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

يقوم Bootstrap بإعطاء الأولوية لتصميم الويب الرئيسي، وتبسيطه باستخدام نظام شبكة قوي وفئات ذات فائدة. بالإضافة إلى ذلك ، يقدم مجموعة متنوعة من المكونات المصممة مسبقًا والتي تتكون من HTML و CSS وفي بعض الحالات JavaScript. يحتوي الإطار أيضًا على بعض مكونات JavaScript الإضافية استنادًا إلى jQuery. ومع ذلك ، لا يدعم Bootstrap أي مكتبات JavaScript تأتي من جهات خارجية ، وقد أعلن الفريق علنًا خططه للتخلص من jQuery في Bootstrap 5.

React : أفضل خيار JS

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

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

Vue.js:

خيار شائع آخر بين أطر النهاية الأمامية هو Vue.js. وفقًا لـ Snyk ، تم تنزيله أكثر من أربعين مليون مرة في العام الماضي ، مما يعني أنه بإمكانه بالتأكيد مواكبة منافسيه. تم إصدارها في عام 2014 ، وهي أيضًا أصغر من معظمها ، مما يعني أن الفريق كان على دراية ببعض المشكلات التي تواجهها أطر عمل JS الأخرى وتأكد من تجنبها.

نتيجة لذلك ، Vue.js خفيفة للغاية – الملفات القابلة للتحميل لا تستغرق سوى حوالي عشرين كيلوبايت. وبسبب ذلك ، فإن النظام سريع ومرن بشكل لا يصدق. كما أنها أقل تقييدًا وبسيطة في التعلم والتوسع باستخدام المكتبات والأدوات المختلفة. كل هذا يجعلها واحدة من أفضل أطر واجهة المستخدم للمبتدئين. في الاستطلاع الذي أجرته Monterail ، ذكر ما يقرب من ستين بالمائة من مستخدمي Vue.js سهولة الاستخدام كسبب رئيسي لاختيارهم. وفقًا لفريق Vue.js ، فأنت تحتاج فقط إلى معرفة أساسيات HTML وجافا سكريبت حتى تكون جاهزًا لاتخاذ خطواتك الأولى. الإطار يدعم بابل و Typescript ، وكذلك جافا سكريبت. هناك أيضًا مستندات مكثفة لإرشادك ، وجدها 75 في المائة من المشاركين في استبيان Monterail مفيدة. بالإضافة إلى ذلك ، مقارنةً بأطر الواجهة الأمامية الأخرى ، يحتوي هذا الإطار على مساحة صغيرة إلى حد ما من سطح API ، مما يسهل التنقل.

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

Angular: المدعومة جيداً

augularjs-interview-questions تم إصداره عام 2009 ، وتم تسمية هذا الإطار باسم AngularJS. ومع ذلك ، لا يمثل هذا الاسم الآن سوى الإصدارات السابقة للإصدار 2.0 – كل الإصدارات الأحدث تسمى ببساطة Angular. لماذا ا؟ نظرًا لأن إعادة كتابة النظام كانت كبيرة جدًا بحيث يتعذر على المستخدمين الانتقال من إصدار إلى آخر. بخلاف Angular JS ، التي تستخدم JavaScript عاديًا ، تستخدم Angular مجموعتها الفرعية المسماة TypeScript والتي تتيح التحقق من الحالة الثابتة. بالإضافة إلى ذلك ، كان AngularJS مجرد تحويل HTML إلى محتوى ديناميكي.  من ناحية أخرى ، هو أفضل بكثير للويب الحديثة ويعمل عبر منصات متعددة ، بما في ذلك المحمول.

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

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

Bulma :

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

ثانيًا ، يتكون من فصول CSS فقط ، لذلك لا تحتاج إلى أي معرفة JavaScript حتى تصل للمطلوب. يحتوي Bulma على أكثر من ثلاثين ملفًا من ملفات SASS (صفائح الأنماط الرائعة التركيبية) ، والتي يمكن أيضًا استيرادها بشكل فردي إذا لم تكن بحاجة إلى استخدام جميع الميزات المتاحة. ما تحصل عليه أيضًا هو أكثر من 100 من فصول مساعدة تبسط التطوير أكثر. تمامًا مثل Bootstrap ، تتبنى Bulma مقاربة أولية للجوّال وتعطي الأولوية للاستجابة في تصميم الويب. كما أنه يعمل على تحسين القراءة الرأسية عن طريق تكديس الأعمدة عند نقطة توقف الهاتف المحمول ، وكذلك إخفاء قائمة التنقل.

تمامًا مثل جميع الأطر الأمامية ، يعمل Bulma على منصة الويب ويدعم أحدث الإصدارات من جميع المتصفحات الحديثة. ومع ذلك ، فهناك مشكلة واحدة: فهي تفتقر إلى Internet Explorer (بما في ذلك أحدث الإصدارات).

إذن ، ما هو أفضل إطار لواجهة المستخدم؟

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

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