اذا كنت عزيزي القارئ ممن سبق لهم تصميم المواقع أو البرمجة بشكل عام، فلا بد أن مصطلح (Framework) كان ملازماً لك في أحد مشاريعك السابقة. هذا المصطلح الذي أقرب ما تكون ترجمته إلى كلمة “هيكل” أو “إطار عمل” ووظيفته الأساسية ايجاد طريقة عمل بقواعد خاصة لتسهيل عملك.
اليوم سأتحدث بشكل مختصر عن اثنتين من أشهر الهياكل (Frameworks) الخاصة ببناء واجهة المستخدم أو كما تعرف تقنياً (Front End). وقبل أن أطرح تفاصيل كل منها لا بد أن أشير إلى أن (Front End Framework) هي مجموعة من أوامر CSS و JavaScript التي تساعدك في انشاء واجهة مستخدم تفيدك في:
- تكون صالحة لإنشاء واجهة مستخدم تجاوبية (Responsive) والتي تعني أن التصميم سيتغير مع تغير حجم شاشة جهازك حسب رغبتك.
- تكون متوافقة مع كل المتصفحات على اختلاف أنواعها. مثلا أمر (-WEBKIT-TEXT-FILL-COLOR) يعمل مع متصفحات مثل Google Chrome و Apple Safari ولا يعمل مع متصفح Firefox أو Internet Explorer
- تكون مختصرة وسريعة التحميل
والآن لنبدأ مع أشهر هيكلين حتى تاريخ كتابة المقال:
- Bootstrap Framework (آخر اصدار 4.0.0 alpha)
مكتبة من الستايلات والجافا سيكريبت الجاهزة من انشاء شركة Twitter وتعتبر الأضخم في هذا المجال
- Foundation Framework (آخر إصدار 6.2)
مكتبة أخرى من الستايلات والجافا سيكريبت الجاهزة من انشاء شركة Zurb وتعتبر المنافس الأكثر جودة للBootstrap
اذا كنت من أصحاب الاختصاص فإليك هذه الفروق السريعة بينهما:
| Bootstrap | Foundation | ||
| CSS Preprocessorالمعالجة المسبقة للستايل | كلاهما مبني على لغة السيكريبت SASS | ||
| JavaScriptجافا سيكريبت | تعتمد تحديث ES6 منذ مدة وقد وصلت إلى حالة من رضى المستخدمين | اعتمدت تحديث ES6 مؤخراً ولم تخضع لفترة تجربة طويلة | |
| Grid Systemنظام الشبكة | لا تستطيع عمل grid للموقع الا باستخدام divيعتبر كحاوية (container) ليحتوي كود ال(grid) داخله أي أنها بحاجة إلى القليل من الأكواد الإضافية | يمكنك عمل grid في أي لحظة تريدها دون الحاجة لكتابة كود ليحتوي هذه الشبكة | |
| Formsالنماذج | قطعت Bootstarp شوطاً مميزاً في استخدام النماذج والتي تحتوي على العديد من classes الخاصة بتزيينها | يعد استخدام النماذج في Foundation أمراً أقل تميزاً لأنها لا زالت تعتمد النظام grid في رسم النماذج | |
| Menusالقوائم | تعتمد على هيكل قوائم بسيط لا يحتوي على الكثير من التفاصيل | يمكنك عمل قوائم بأشكال وأنواع لا حصر لها، مثل off-canvas navigationdrilldown menusvertical dropdownsresponsive menus | |
خلاصة القول أن كلا الهيكلين (Frameworks) يعتبران رائعين، من تجربتي الشخصية أذا كنت بصدد انشاء موقع يحتوي على قوائم بشكل غير اعتيادي (Mega Menus) مثلاً، فأنصحك باستخدام (Foundation Framework). لأنك مع ال (Bootstrap) ستحتاج إلى استخدام مكتبة إضافية اسمها (Yamm). وغير ذلك (إذا كان موقعك لا يعتمد على قوائم مزخرفة) أنصحك باستخدام ال(Bootstrap Framework) فهي سهلة وسريعة وتستطيع أن تجد الملايين حول العالم يستخدمونها.
ملاحظة: لا تحاول استخدامهما معاً ابداُ
تفضيل
