هندسة Frontend وبرمجة
بناء API Layer احترافي باستخدام TypeScript
طريقة فصل تفاصيل الاتصال عن الشاشات وتوحيد الأخطاء والأنواع والبحث والـPagination لتسهيل صيانة تطبيقات React وReact Native.
لماذا لا أضع fetch داخل كل شاشة؟
قد تبدو طلبات fetch المباشرة داخل الشاشات أسرع في البداية، لكنها توزع المصادقة واللغة وBase URL وتحويل البيانات والـTimeout ومعالجة الأخطاء على كامل التطبيق. عند تغير الباكند تصبح كل شاشة نقطة ربط منفصلة.
توفر طبقة API مكتوبة بالأنواع مكاناً واحداً لتفاصيل النقل. تطلب الشاشات عمليات مرتبطة بالمنتج مثل listCars أو chooseCar أو analyseText بدلاً من إعادة بناء قواعد HTTP في كل مرة.
Request primitive واحدة وواضحة
يجب أن تعرف دالة الطلب الأساسية كيف تبني الرابط وتضيف Headers وتحول Body وتقرأ الاستجابة وتحول الفشل إلى شكل خطأ موحد. تبقى صغيرة بما يكفي لفهمها ومرنة لدعم JSON وFormData والطلبات الموثقة.
- إضافة المصادقة واللغة مركزياً.
- إعادة بيانات Typed بدلاً من Response خام إلى الميزات.
- تضمين الـendpoint والstatus وتفاصيل آمنة من الباكند ضمن الخطأ الموحد.
- دعم إلغاء الطلب عند مغادرة الشاشة.
تمثيل العقود بدلاً من تخمين الأشكال
تكون TypeScript مفيدة عندما يعكس النوع عقداً حقيقياً. يجب أن تطابق الحقول المطلوبة والاختيارية وnullable الـAPI، وأن يكون للطلب والاستجابة نوعان منفصلان لأنهما يتطوران بشكل مختلف.
عند وجود استجابات قديمة غير موحدة أوحّدها عند الحد، حتى يستقبل المكون نموذجاً واحداً ثابتاً بدلاً من شروط لكل شكل تاريخي.
فصل Server State عن UI State
تعمل TanStack Query بشكل أفضل عندما تبقى طبقة API مستقلة. تنفذ دالة API العملية، وتدير طبقة Query التخزين المؤقت وإعادة الجلب والـRetries ودورة الطلب، بينما يعرض المكون حالة المنتج.
يسمح هذا أيضاً بمشاركة العقود بين الويب وReact Native من دون إجبار المنصتين على مشاركة مكونات العرض.
البحث والـPagination جزء من العقد
تحتاج القوائم والـSelects والجداول التي تبحث من السيرفر إلى Parameters وMetadata صريحة. أمثل page وperPage وsearch والفلاتر وtotal والصفحة التالية بدلاً من متغيرات مبعثرة داخل المكون.
العقد الواضح يسهل Debounce وإعادة الصفحة الأولى عند تغير الفلتر وجلب الصفحة التالية وعرض نهاية القائمة بشكل صحيح.
أمثلة من المشاريع
دراسات حالة مرتبطة بالقرارات الموجودة في المقال.
منصة عقارية
Hompper
منصة عقارية ثنائية اللغة تساعد المشترين والمستأجرين في سوريا على اكتشاف العقارات والوكلاء والتصفح عبر الخريطة والتواصل المباشر ضمن تجربة متجاوبة واحدة.
عرض دراسة الحالةمنصة تعليم طبي
IASS
أكاديمية رقمية ثنائية اللغة للطب التجميلي تجمع الكورسات والكتب الطبية والمقالات ومحتوى المؤسسة وكتالوجات التعلم المرتبطة بالـAPI ضمن منصة منظمة.
عرض دراسة الحالةمنتج تعليمي بالذكاء الاصطناعي · عمل مستقل
AI Detektor
منتج سويدي لاكتشاف النصوص المولدة بالذكاء الاصطناعي للمدارس، مبني حول مساحة تحليل مركزة ودخول موثّق وإشارات مخاطر واضحة وأدلة تساعد المعلم في المراجعة.
عرض دراسة الحالةمقالات أخرى