الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

بداية نوكست (Nuxt) هو إطار عمل (framework) مبني على فيو (Vue) يُستخدم لتطوير تطبيقات الويب المتقدمة، ويتيح للمطورين بناء تطبيقات واجهة أمامية (front-end) متكاملة باستخدام "فيو"، مع دعم ميزات متقدمة مثل التوليد الثابت (static generation) والاستدعاء من جهة الخادم (server-side rendering - SSR)، وهذا ما يجعله مثاليًا لتطوير تطبيقات سريعة ومرنة تُعطي تجربة استخدام ممتازة مع تحسين أداء محركات البحث (SEO).\

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

أقترح مراجعة مقالي السابق بعنوان (6 أسباب قد تدفعك لاختيار "نوكست" لتنفيذ مشروعك القادم) إن لم تكن قرأته حتى الآن.

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

في المقابل يمكنك الذهاب إلى متاجر البناء وشراء هذه المكونات (Components) المصنعة مسبقا والجاهزة للإستخدام في بناء منزلك.\

وبالمثل عند بناء تطبيق ويب يمكنك استخدام مكتبة مكونات للواجهة (UI Components Library) إذ تقدم لك مكونات معدة مسبقا مثل الأزرار (buttons) ونماذج الاتصال (forms) وشرائط التنقل (navigation bars) وغيرها الكثير مما يمكنك إضافته بكل سهولة لتطبيقك بدون الحاجة لكتابة الكود البرمجى لكل "مُكوِّن" من الصفر.\

 وبشكل عام يمكننا تلخيص أهم أسباب احتياجك لاستخدام "مكتبة مكونات واجهة" داخل تطبيقك إلى ما يلي:\

• استخدام هذه المكتبات الجاهزة يوفر عليك الكثير من الجهد المخصص لتنسيق الاستايل، كما يسرع من بناء التطبيقات من خلال تقليل حجم الوقت المخصص للتطوير.\
• أيضا تسهم هذه المكتبات في إضفاء طابع الأحترافية والتناسق نتيجة اتباع معايير وقواعد قياسية في التصميم، كما أن أغلب هذه المكتبات تدعم العرض المرن للصفحات (Responsive) مما يساعد في بناء صفحات ملائمة للعرض على الموبايل دون بذل جهد إضافي.\
• أغلب هذه المكتبات تتبع الممارسات الأفضل (Best practices) فيما يتعلق بإمكانية الوصول (Accessibility) وكفاءة الأداء (Performance) و تحسين نتائج محركات البحث (SEO)، مع تمكين المبرمجين - في نفس الوقت - من إمكانية التعديل على العناصر الموجودة بما يلائم التطبيق والعلامة التجارية وعمل استايل مميز وفريد.
• وأخيرا، أغلب هذه المكتبات يكون لديها مجتمع قوى من المبرمجين المطورين والداعمين، بجانب دليل استخدام (Documentation) واضح وبسيط، وعدد كبير من الفيديوهات والشروحات التي تساعد في حل مشكلات المكتبة أو تعلم مهارات جديدة.\

علي الجانب الآخر، جدير بالذكر أن استخدام مثل هذه المكتبات قد يكون له بعض الآثار السلبية على التطبيق - يجب التنويه عليها - كالتالي :\

• اضافة مثل هذه المكتبات قد يزيد من حجم التطبيق بشكل ملحوظ، مما ينعكس على كفاءة وسرعة تحميل الصفحات في بعض الأحيان،  كما أن بعض "المكونات" قد تحتوي على خصائص إضافية غير مستخدمة فعليا في التطبيق.\
  بعض المكتبات تحاول تقديم حلول لهذه المشكلة عن طريق تقليل حجم المكتبة بقدر الإمكان، والبعض يقدم خاصة التنقية أو التنظيف (Tree shaking) عن طريق إدراج فقط الكود البرمجي المستخدم فعليا في التطبيق مع حذف وإزالة أي كود برمجي غير مستخدم أو لم يتم استدعائه في التطبيق.\
• بعض المكتبات قد لا تتسم بالمرونة الكافية للتعديل على عناصرها، فهي تتيح خيارات محدودة للتعديل والتخصيص مع الحاجة لبذل جهد إضافي في حالة الرغبة في المزيد من التخصيص لهذه العناصر، كما أن الإعتماد على المكونات الافتراضية للمكتبة دون تخصيص مناسب للعلامة التجارية واستايل التطبيق قد يعطي ايحاء ان التطبيق مشابهه لغيره من التطبيقات التي تم تنفيذها باستخدام نفس المكتبة.\
• وأخيرا، بعض المكتبات تحتاج لبذل وقت وجهد أكبر في تعلمها خاصة إن كانت تحتوي على عدد كبير من "المكونات" أو كانت المكتبة مبنية على أسس ومبادئ معقدة في بعض الأحيان، ومشكلة أخرى أنه باستخدامك للمكتبة فأنت تعتمد بشكل كبير على التحديثات والتطويرات الخاصة بها، في بعض الأحيان قد يكون أحد "المكونات" تحت التطوير والتجربة ولا يمكنك استخدامه في تطبيقك، كما قد تظهر مشكلات لا يتم حلها إلا في اصدارات تالية من المكتبة.

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

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

ما هي "فيوتيفاى" ؟

فيوتيفاى (Vuetify) عبارة عن مكتبة واجهات مستخدم مفتوحة المصدر مبنية على فيو (Vue)، توفر مجموعة من المكونات المصممة يدويًا استنادًا إلى نظام التصميم المادي من جوجل.

تُسهّل عملية التطوير من خلال توفير الأدوات اللازمة لبناء واجهات ويب وتطبيقات موبايل جذابة بصريًا.

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

أقترح مراجعة مقالي السابق بعنوان (التصميم المادي … المزايا والعيوب) إذ يقدم نظرة عامة على نظام التصميم المادي من جوجل، وأسباب نشأته وتطوره.

مزايا استخدام "فيوتيفاى"

بجانب المزايا التي سبق سردها عن استخدام مكتبات الواجهة بشكل عام، أذكر هنا أهم مزايا استخدام "فيوتيفاى" تحديدا دون غيرها من المكتبات - كما يلي :

• المكتبة عبارة عن مشروع مجاني و مفتوح المصدر، بمعني انك حر في استخدام المكتبة في تطبيقاتك دون أي تكاليف إضافية، وهو ما يجعلها خيارا مثاليا للمطورين الذين يبحثون عن أدوات قوية بدون تكاليف إضافية.
• دعم أكثر من ممتاز للتكامل مع "نوكست" وتحديدا خاصية الاستدعاء من جهة الخادم (server-side rendering - SSR) التي تضمن كفاءة عالية ودعم قوى لميزة التكامل مع محركات البحث، خاصة في التطبيقات الكبيرة والمتوسطة التي لا يمكنها الاستغناء عن هذه الخصائص.
• توفير مجموعة كبيرة وشاملة من "المكونات" التنافسية مثل الأزرار، النماذج، القوائم وشرائط التنقل … وغيرها، والتي تتميز - ليس فقط بشكلها الجمالي والجذاب - ولكن أيضا أنها وظيفية وعملية إلى حد كبير، مما يوفر على المطورين القدرة على بناء واجهات معقدة دون الحاجة لإعادة اختراع العجلة من البداية.
• المكتبة مبنية على معايير التصميم المادي لجوجل، وهي معايير قياسية إلى حد كبير تم تجربتها والتأكد من فعاليتها بواسطة خبراء جوجل، وتتميز انها تضفي استايل بسيط وعصري على صفحات التطبيق.
• تتميز "فيوتيفاي" بنظام مرن وقوى لتخصيص الاستايل والألوان على مستوى التطبيق ككل بشكل عام، بحيث يسهل تعديل الاستايل بشكل مركزي دون الحاجة لتخصيص كل جزء على حده، والجدير بالذكر هنا أن المكتبة توفر بالفعل أدوات ومكتبة ألوان ووسائل مساعدة عملية ومفيدة مقارنة بغيرها من المكتبات.
• معايير إمكانية الوصول (Accessibility) مطبقة بشكل افتراضي في المكتبة، بمعنى أن أغلب "المكونات" في المكتبة تدعم تطبيقات الإنترنت الغنية القابلة للوصول (ARIA - Accessible Rich Internet Applications) التي تشير الى مجموعة من المعايير المصممة لجعل محتوى الويب والتطبيقات أكثر قابلية للوصول للأشخاص ذوي الإعاقة، كما توفر معلومات إضافية للتقنيات المساعدة (مثل قارئات الشاشة)، مما يساعد المستخدمين على التنقل والتفاعل مع المحتوى الديناميكي مثل النماذج والقوائم والعناصر التفاعلية الأخرى التي قد لا تكون قابلة للوصول بطبيعتها.

شرح تسطيب "فيوتيفاي" مع "نوكست"

الطريقة الأولى لتنصيب المكتبة داخل المشروع هي تنصيبها كإضافة (Plugin)، لكنها تتطلب خطوات متعددة وضبط أكثر من متغير حتى تعمل المكتبة بشكل سليم، للإطلاع على خطوات هذه الطريقة بشكل مفصل في التوثيقات (Docs) الرسمية للمكتبة من هنا

الطريقة الثانية - وهي التي أفضلها شخصيا - لأنها الأكثر بساطة ولا تتطلب أي إعدادات خاصة، فقط قم بكتابة الأمر التالي في الطرفية (Terminal) داخل المشروع :

npx nuxi@latest module add vuetify-nuxt-module

بناء على الأمر السابق، يتم تنصيب الوحدة التكميلية (Module) المسماه vuetify-nuxt-module داخل المشروع، كما يتم اضافة "الوحدة التكميلية" داخل ملف nuxt.config.ts حتى يتم تعريفه بواسطة "نوكست".

مكتبات أخرى يمكنك تجربتها

فيما يلي بعض المكتبات الأخرى وانطباعي الشخصي - بشكل موجز - لكل منها.

مكتبة Nuxt UI

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

على الجانب الآخر، يعيب هذه المكتبة قلة عدد "المكونات" وبساطتها وعدم ملائمتها للعديد من الوظائف الأكثر تعقيدا، أيضا لأنها مكتبة مازالت حديثة نسبيا بالتالى دعم المطورين والمجتمع الخاص بها مازال صغيرا مقارنة بمكتبات أخرى منافسة.

الجدير بالذكر هنا هو وجود إصدار آخر مدفوع لهذه المكتبة (Nuxt UI Pro)، يقدم مزايا ومكونات و تصميمات جاهزة أكثر من المتوفرة في النسخة المجانية.

مكتبة Tailwind

توفر هذه المكتبة ميزة قوية من خلال الاعتماد على تخصيص الاستايل بواسطة فئات الأنماط (CSS Classes) المجهزه مسبقا، مما ينتج عنه حجم صغير لملفات الاستايل، مع مرونتها الكبيرة في تنفيذ تصاميم مخصصة للغاية، مما يؤدي لتحميل الصفحات بشكل أسرع.

من ناحية أخرى، قد تكون هذه الطريقة في كتابة المكونات صعبة التعلم بالنسبة لبعض المطورين المعتمدين على المكتبات الأخرى، كما أن هذه الطريقة قد ينتج عنها كتابة عدد كبير من "فئات الأنماط" داخل أكواد (HTML) مما يؤدى إلى صعوبة تتبعها وإدارتها مع الوقت.

مكتبة PrimeVue

تتميز هذه المكتبة باحتوائها على مجموعة غنية من "المكونات"، بما فيها العديد من العناصر المتقدمة مثل جداول البيانات ومخططات الرسوم البيانية (Charts)، بالإضافة إلى وجود دعم قوي من المجتمع وفريق المطورين، بالتالي تساعد هذه المكتبة في سرعة إنشاء تطبيقات معقدة وغنية بالميزات.

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

مكتبة Quasar

لعل أكثر ما يميز هذه المكتبة هو دعمها الشامل لأنواع متنوعة من التطبيقات، بما في ذلك تطبيقات "فيو"، وتطبيقات الويب التقدمية (PWA)، وتطبيقات الموبايل .. وغيرها، مع مجموعة واسعة من "مكونات" واجهة المستخدم وتحسينات الأداء، وتوثيق شامل وسهل الاستخدام، إضافة الى تطوير سريع للمكونات وحل سريع للمشكلات - بناء على تجربة شخصية - حيث كانت هذه المكتبة أسرع من "فيوتيفاي" في الترقية للإصدار التالي عندما قامت "فيو" بالترقية للإصدار الثالث.

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

كلمة أخيرة

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

إن كنت وصلت إلى هذا الجزء من المقال - أرجو أن تشاركنا في التعليقات بتجربتك حول أي من هذه المكتبات - إن كان لك سابق تجربة مع أي منها.

وفقنى الله وإياك إلى ما يحبه ويرضاه ،،