إعادة استخدام الكود بذكاء مع Composables فى Nuxt

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

التراكيب (Composables) في Vue وNuxt هي أدوات بسيطة تجعل حياتك أسهل عند كتابة التطبيقات.

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

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

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

بهذه الطريقة، يمكنك بناء تطبيقات متطورة دون الحاجة إلى تكرار نفسك في كتابة نفس الكود.

فكرة إعادة استخدام الكود (Code Reusability)

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

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

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

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

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

الشرح بمثال عملي بسيط

في مشروع تم إنشاؤه باستخدام إطار العمل Nuxt، قم بإنشاء ملف جديد داخل مجلد composables باسم useCounter.ts كما يلي

// composables/useCounter.ts
export const useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

في الكود السابق، تم تعريف useCounter باستخدام export لتكون قابلة للاستخدام في أي مكون أو صفحة.

تحتوي الوظيفة على متغير تفاعلي count، وهو يبدأ بقيمة ابتدائية 0، ويتم التحكم في هذا المتغير عبر وظيفتين: increment لزيادة القيمة بمقدار 1، و decrement لإنقاصها بمقدار 1، مع إمكانية الوصول إلى القيمة الفعلية باستخدام count.value.

عند استدعاء هذا الكود في مكون Nuxt، يمكن استخدامه لإدارة عدّاد بشكل تفاعلي، كما يلي

<template>
  <div>
    <h1>العداد: {{ count }}</h1>
    <button @click="increment">زيادة</button>
    <button @click="decrement">إنقاص</button>
  </div>
</template>

<script setup lang="ts">
const { count, increment, decrement } = useCounter();
</script>

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

متى يُفضل استخدام التراكيب ؟

يفضل استخدام التراكيب عندما نحتاج إلى إعادة استخدام منطق مشترك عبر مكونات متعددة في التطبيق، خاصة إذا كان هذا المنطق تفاعليًا (Stateful Logic) ويتضمن إدارة حالة أو بيانات تعتمد على التفاعل، وتُعتبر التراكيب مثالية في الحالات التالية:

إدارة الحالة (State Management): عندما تحتاج إلى منطق لإدارة حالات متغيرة مثل تتبع حالة الاتصال، أو إعداد عدّاد، أو إدارة بيانات جلبت من API.

التفاعل مع المستخدم أو الأحداث: مثل تتبع موقع مؤشر الفأرة، أو التفاعل مع لوحة المفاتيح، أو مراقبة التمرير داخل الصفحة.

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

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

أفضل الممارسات عند استخدام التراكيب

الفصل بين المنطق والتصميم: عند استخدام التراكيب، من المهم فصل المنطق التفاعلي (Stateful Logic) عن التصميم وواجهة المستخدم.

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

على سبيل المثال، يمكنك إنشاء Composable لجلب البيانات من API واستخدامه في أكثر من مكون (Component) دون الحاجة إلى تغييرات تعتمد على طريقة عرض تلك البيانات.

كتابة كود نظيف وسهل الفهم : للحفاظ على جودة التراكيب، من الضروري الالتزام بمبادئ الكود النظيف (Clean Code).

استخدم أسماء واضحة وواصفة للقيم والوظائف مثل useAuth بدلاً من أسماء غير محددة.

قسّم المنطق داخل Composable إلى أجزاء صغيرة تؤدي كل وظيفة منها مهمة محددة.

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

الاستفادة من TypeScript لتحسين الجودة : استخدام TypeScript عند كتابة التراكيب يُحسّن من جودة الكود ويضيف أمانًا إضافيًا.

من خلال تحديد الأنواع (Types)، يمكنك منع الأخطاء الناتجة عن تمرير بيانات غير صحيحة وضمان توافق المدخلات والمخرجات مع المتطلبات.

هذا يُسهل على المطورين الآخرين فهم الوظائف واستخدامها؛ على سبيل المثال، بدلاً من كتابة وظيفة (Function) دون تحديد الأنواع، يمكن توضيح نوع المدخلات والمخرجات باستخدام TypeScript لجعل الكود أكثر وضوحًا وقابلية للصيانة.

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

هذا الأسلوب يجعل Composable قابلاً للاستخدام مع حالات مختلفة ويقلل من الحاجة إلى إعادة كتابة الكود.

اختبار التراكيب بانتظام: نظرًا لأن التراكيب تركز على المنطق، فإن اختبارها بشكل منتظم يعد أمراً ضرورياً لضمان عملها بشكل صحيح.

يمكن كتابة اختبارات وحدات (Unit Tests) للتحقق من وظائفها الداخلية، حيث يساعد ذلك في اكتشاف الأخطاء مبكرًا ويضمن بناء كود مستقر وقابل للتوسع.

خاتمة

إن التراكيب في Vue وNuxt تمثل أداة قوية تساعد المطورين على تنظيم منطق التطبيقات بطريقة مرنة وقابلة لإعادة الاستخدام.

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

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

سواء كنت تعمل على إدارة حالات معقدة أو مجرد منطق بسيط قابل لإعادة الاستخدام، فإن التراكيب هي الحل المثالي لبناء تطبيقات منظمة ومتطورة باستخدام Vue وNuxt.

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