ممارسات الترميز التقنية: نهج عصري لتطوير الويب
في إطار مهمتنا المشتركة للارتقاء بجودة واتساق الخدمات الرقمية الحكومية في دولة الإمارات العربية المتحدة، يقدم هذا الدليل يقدم هذا الدليل نهجاً شاملًا نحو الممارسات التقنية في البرمجة. ورغم أن نظام تصميم حكومة الإمارات يوفر أساساً موحداً من حيث الشكل والتجربة الرقمية، إلا أن قوته الحقيقية تكمن في جودة تنفيذه — ويبدأ ذلك بكتابة كود نظيف، ومتسق، ومبني على مبدأ المكوّنات.
هذا المستند موجّه إلى المطورين، وقادة فرق الهندسة، وشركاء التقنية الذين يعملون على تطوير المواقع الإلكترونية وتطبيقات الويب الخاصة بالحكومة الإماراتية. وهو يُكمل دليل أفضل الممارسات للواجهة الأمامية المتاح حالياً، من خلال توضيح كيفية كتابة كود قوي، قابل للقراءة، وإعادة الاستخدام، وسهل الصيانة على المدى الطويل.
أهمية كتابة كود نظيف
الكود النظيف ليس مجرد تفضيل شكلي — بل يؤثر بشكل مباشر على سهولة الصيانة، وسرعة إنجاز الفريق، وسلاسة انضمام مطورين جدد، واستدامة الخدمات الرقمية على المدى البعيد.
أهم الإرشادات:
استخدام أسماء ذات معنى
اختر أسماء واضحة وواصفة للمتغيرات والدوال والمكوّنات لتحسين قابلية قراءة الكود وفهمه.
تجنب التكرار
طبّق مبدأ (لا تعيد تكرار نفسك) لتقليل التكرار وجعل قاعدة الكود نظيفة وسهلة في الصيانة.
الحد من تعقيد الدوال
يُفضل أن تؤدي كل دالة مهمة واحدة فقط. الدوال الصغيرة والمركّزة أسهل في التصحيح والاختبار وإعادة الاستخدام.
التعليق الهادف
اكتب كود يوضّح نفسه بنفسه. استخدم التعليقات لإضافة السياق أو شرح الأسباب، وليس لوصف أمور واضحة بالفعل من الكود.
فرض تنسيق موحّد
استخدم أدوات مثل Prettier وESLint للحفاظ على تنسيق موحد للكود تلقائياً وتقليل الوقت المستغرق في مراجعته.
اجعل الملفات`ذات هدف
نظّم الكود في ملفات ووحدات برمجية ذات غرض محدد. تجنب الملفات الضخمة من خلال تجميع المنطق المرتبط معاً والحفاظ على مبدأ فصل الاهتمامات.
هيكلية الكود
مع توسع المنصات الرقمية، تصبح الهيكلية المنظمة للكود أمراً بالغ الأهمية لضمان التعاون الفعّال وقابلية التوسع. الهيكلية الجيدة للكود تؤدي إلى:
- سهولة القراءة لأعضاء الفريق الجدد
- قابلية التوقع في قواعد الكود الضخمة
- إعادة الاستخدام وسهولة الاختبار
كيف تحقق ذلك؟
اتبع أسلوباً يعتمد على هيكلية مجلدات موحدة. فإذا كنت تطوّر موقعاً إلكترونياً باستخدام نظام إدارة محتوى (CMS)، فمن المرجح أنك تقوم بإنشاء تصميم أو قالب مخصص لذلك النظام. إليك بعض الأنماط التي يفضل اتباعها:
ضع ملفات "الأصول" مثل CSS و JavaScript والخطوط والصور داخل مجلد رئيسي مخصص لها.
theme/
-- assets/
---- css/
---- js/
---- fonts/
---- images/
---- icons/
... etcاتبع القواعد المتبعة في نظام إدارة المحتوى المستخدم. لا تخترع هيكلية أو تسمية جديدة قد يصعب على عضو جديد في الفريق فهمها.
// An ideal structure for a WordPress theme
theme/
-- theme_name
---- assets/
---- includes/
------ hooks
------ modules
... etc
---- functions.php
---- header.php
---- footer.php
---- index.php
---- front-page.php
---- page.php
---- single.php
---- archives.php
عند إنشاء الهيكلية في React أو Vue.js, ، يُفضل اعتماد الهيكلية التالية:
src/
├── components/ # Reusable UI elements
├── pages/ # Route-level components
├── services/ # API calls or business logic
├── hooks/ # Reusable stateful logic
├── assets/ # Images, fonts, icons
├── types/ # TypeScript definitions
├── utils/ # Utility functions
اتباع هندسة معمارية قائمة على المكوّنات. إن نظام التصميم الإماراتي قائم بطبيعته على المكوّنات. ينبغي على المطوّرين تبنّي هذا النهج بالكامل لضمان الهيكلية المعيارية، وإعادة الاستخدام، والتناسق عبر مختلف الخدمات.
أهم العناصر التي يجب مراعاتها في هذه الهيكلية:
المسؤولية الفردية
يجب أن يؤدي كل مكوّن وظيفة محددة واحدة فقط.
العزل
ينبغي أن يدير كل مكوّن حالته الداخلية بنفسه، ما لم تكن هناك حاجة لمشاركة الحالة عبر props أو context.
إعادة الاستخدام
استخرج أنماط واجهة المستخدم المتكررة في مكوّنات متوافقة مع نظام التصميم.
الاختبار
اختبر مكونات البرنامج الفردية والمنطق الخاص بها باستخدام اختبار الوحدة.
أنماط البرمجة التي تدعم نظام التصميم
يجب على المطورين العاملين في مشاريع الحكومة الالتزام بأسلوب عمل يعزز — ولا يستبدل أو يتجاوز — الهيكلية التي يقدمها نظام التصميم الإماراتي.
ارجع إلى المكوّنات الأساسية عند إنشاء وحدات جديدة.
قم بتمديد أنماط المكوّنات بدلاً من إعادة كتابتها بالكامل.
طبّق أدوار إمكانية الوصول وسمات ARIA مباشرة ضمن العناصر الأصلية.
قم بتنسيق مكوّنات الأطراف الثالثة لتتوافق مع نظام التصميم الإماراتي.
لا تُعدّل أنماط النظام دون داعٍ.
قم بإنشاء مكوّنات دون استخدام مكتبة نظام التصميم الإماراتي.
تثبيت عناصر التتصميم أو الألوان.
إدخال مكوّنات من أطراف ثالثة تُخلّ باللغة البصرية أو النظامية.
التصميم لأنواع مختلفة من المتصفحات والأجهزة
يجب أن تكون الخدمات الرقمية الحكومية متاحة للجميع — على أي جهاز، وأي متصفح، ومن أي مكان (سواء داخل دولة الإمارات أو خارجها). يقدم هذا الدليل نصائح عملية لتصميم وتطوير خدمات الويب بحيث تظل متاحة، وعملية، ومتسقة عبر مجموعة واسعة من المنصات، بما في ذلك الأجهزة القديمة والشبكات منخفضة السرعة.
إن اتباع هذه الإرشادات يضمن الشمولية ويتماشى مع مبادئ نظام التصميم في دولة الإمارات التي تركز على إمكانية الوصول، والأداء، وتجربة المستخدم.
دعم نطاق واسع من المتصفحات
يجب على المواقع الإلكترونية والتطبيقات الحكومية دعم المتصفحات الشائعة والقديمة لضمان وصول جميع المستخدمين. والالتزام بالمعايير الحديثة مع التعامل بانسيابية مع التقنيات الأقدم ضروري لتحقيق الشمولية الرقمية.
جوجل كروم
دعم الإصدار الحالي والسابق على أجهزة سطح المكتب وأندرويد.
سفاري
دعم Safari على نظامي iOS وmacOS (أحدث إصدارين رئيسيين.)
مايكروسوفت إيديج
دعم متصفحات إيديج المبنية على متصفح كروميوم (الإصدار الحالي والإصدار السابق).
فايرفوكس
دعم الإصدار الحالي والسابق من فايرفوكس على أجهزة سطح المكتب والموبايل.
المتصفحات الحديثة
Enضمان التوافق مع المتصفحات التي تدعم ECMAScript 2015+ ، وتقنيات CSS Grid وFlexbox (مثلBrave، Opera).
التدهور الرشيق
تقديم وظائف بديلة للمتصفحات القديمة (مثل Internet Explorer 11 ) قدر الإمكان.
أهم الاعتبارات:
لا تحظر وصول المستخدمين إلى الخدمة بناءً على كشف المتصفح المستخدم.
اختبر التصاميم والأداء عبر مجموعة متنوعة من المتصفحات.
تجنّب الاعتماد على حلول مخصصة لمتصفحات محددة — استخدم HTML قياسي ودلالي، و CSS حديث.
التصميم لأحجام شاشات متعددة
ابدأ ببناء تصماميم متجاوبة مخصصة لأصغر الشاشات، ثم استخدم استعلامات الوسائط في CSS لضبط الواجهة لتتناسب مع الشاشات الأكبر.
استعلام الوسائط هو تقنية في CSS تستخدم قاعدة @media لإضافة مجموعة خصائص CSS عندما تتحقق شروط معينة. فعلى سبيل المثال، إذا وصل حجم الشاشة إلى حد معين، يحدد استعلام الوسائط متى يجب إظهار X بدلاً من Y.
يتألف استعلام الوسائط من نوع وسائط يمكن تحديده اختياريًا مثل all) أو handheld أو print أو TV وغيرها)، إضافة إلى أي عدد من العبارات الشرطية الاختيارية التي تحدد ظروف تفعيل الاستعلام، كأن تكون مرتبطة بالعرض، أو كثافة البكسلات، أو اتجاه الجهاز.
الدعم البديل والتدهور الرشيق
ينبغي أن تظل الخدمات الرقمية قيد العمل حتى في حال عدم دعم بعض المزايا المتقدمة من قِبل المتصفح المستخدم.
من التطورات المهمة في CSS واجهة برمجة التطبيقات @support ، والتي أصبحت متاحة في المتصفحات منذ سبتمبر 2015. ولتوضيح ذلك بالأرقام: فقد دعمت Google Chrome هذه الواجهة منذ الإصدار 83، بينما وصل الإصدار الحالي في عام 2025 إلى الإصدار 140. يمكنك معرفة المزيد عبر الرابط https://caniuse.com/mdn-css_at-rules_supports_selector
مثال;
@supports not (display: grid) {
.layout { display: block; }
}
تعرّف أكثر على تفاصيل CSS من خلال دليل أفضل الممارسات الخاص بنا حول CSS
إعطاء الأولوية للأداء في الشبكات منخفضة السرعة
قد يصل عدد كبير من المستخدمين إلى الخدمات الحكومية في بيئات ذات اتصال إنترنت بطيء، أو غير مستقر، أو مرتفع التكلفة. لذا، يُعد تحسين الأداء للشبكات منخفضة النطاق الترددي أمراً ضرورياً لضمان الشمولية الرقمية ومنع الإقصاء الرقمي. يمكن للمطورين تحقيق ذلك من خلال تطبيق استراتيجيات تقلل من حجم الصفحات، وتحد من الطلبات غير الضرورية، وتحميل المحتوى الضروري فقط — خصوصاً على أجهزة الموبايل.
تقنيات التحسين:
- استخدام التحميل الكسول للصور والسكربتات
- تحسين جميع الوسائط باستخدام الصيغ المناسبة (مثل WebP أو AVIF)
- تطبيق ضغط الأصول gzip) أو (Brotli
- استخدام رؤوس التخزين المؤقت Caching Headers وشبكات CDN بكفاءة
- تقليل الاعتماد على مكتبات JavaScript كبيرة الحجم
أدوات الاختبار:
- أداة Lighthouse (محاكاة شبكات (G4/G3
- أدوات مطوري كروم علامة تبويب (Throttling)
- WebPageTest.org
ضمان دعم لوحة المفاتيح والشاشات اللمسية
يعتمد بعض المستخدمين بشكل كامل على لوحة المفاتيح، أو قارئات الشاشة، أو الشاشات اللمسية. لذلك يجب أن تدعم واجهة المستخدم جميع أنواع طرق الإدخال.
قائمة التحقق:
يجب أن تكون جميع العناصر التفاعلية قابلة للوصول عبر لوحة المفاتيح مفتاح Tab
يجب أن تكون حالات التركيز مرئية ويسهل تمييزها
يجب ألا يقل حجم أهداف اللمس عن 44×44 بكسل
تجنب التفاعلات المعتمدة فقط على تمرير المؤشر
دعم اللغات المختلفة والتصاميم
أحد الجوانب التي كثيراً ما يغفلها المطورون هو الطريقة الصحيحة لإخبار المتصفح أو محركات البحث بلغة الصفحة الحالية.
كمطور يعمل في مشاريع الحكومة الإماراتية، يجب التأكد من أن جميع صفحات وخدمات المواقع الإلكترونية تعمل بسلاسة باللغتين العربية والإنجليزية. كما يجب إضافة عنصرين أساسيين في الكود فيما يخص اللغة.
اتجاه النص العربي
استخدم السمة الصحيحة لتحديد اتجاه المحتوى العربي:
dir="rtl"
تحديد اللغة
حدد لغة الصفحة في عنصر HTML الرئيسي:
<html lang="en">
أفضل الممارسات الإضافية:
- كيّف التصميم والتنقل للمستخدمين الذين يعتمدون اتجاه الكتابة من اليمين إلى اليسار.
- تحميل خطوط تدعم الحروف اللاتينية والعربية معاً
- التأكد من المحاذاة والمسافات بشكل صحيح في كلا الاتجاهين
