دورة هندسة الواجهات الأمامية الحديثة وإتاحة واجهات المستخدم

نظرة عامة

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

الفئة المستهدفة

• الفرق المسؤولة عن تطوير واجهات المنتجات التي تعمل عبر المتصفح
• الوظائف المسؤولة عن المكونات القابلة لإعادة الاستخدام وبنية الواجهة الأمامية
• الفرق المسؤولة عن ربط واجهات الويب مع API
• الوظائف المسؤولة عن أدلة الاختبار والإتاحة والأداء
• القيادات التقنية المسؤولة عن معايير تسليم الواجهات ومراجعتها

تفترض الدورة أن المشاركين يكتبون HTML وCSS وJavaScript لتطبيقات الويب، ولا تتناول البرمجة التمهيدية أو برمجيات التصميم المرئي أو أبحاث تجربة المستخدم أو تطوير تطبيقات الهاتف أو تنفيذ الخدمات الخلفية.

الإدارات والقطاعات المستهدفة

تدعم الدورة الإدارات والقطاعات التي تبني واجهات ويب إنتاجية وتحافظ عليها.

• فرق هندسة البرمجيات والمنتجات الرقمية وتطوير الواجهات الأمامية
• منصات الخدمات المصرفية والتأمين والتجارة الرقمية
• بوابات الرعاية الصحية وخدمات تقنيات التعليم
• الخدمات الحكومية الرقمية وتطبيقات الخدمات المهنية
• قنوات الاتصالات والخدمات اللوجستية والخدمة الذاتية للعملاء

أهداف التعلم

بنهاية هذه الدورة، سيتمكن المشاركون من:

• مقارنة بنى المكونات في React وAngular وVue ومقايضات التسليم
• بناء مكتبات مكونات متجاوبة باستخدام رموز التصميم والواجهات محددة النوع
• تطبيق أنماط التوجيه والنماذج وإدارة الحالة وتكامل API
• تقييم واجهات الويب وفق معايير الإتاحة في WCAG 2.2
• استخدام الاختبارات الآلية وميزانيات الأداء وفحوص أمن الواجهة الأمامية
• بناء تطبيق صفحة واحدة بأسلوب إنتاجي ونشره

جدول الدورة

اليوم 1: بنية الأطر وإعداد المشروع

• مصفوفة مقارنة بنى React وAngular وVue
• هيكل مشروع Vite وخطة حدود الوحدات
• تصميم واجهات TypeScript وعقود البيانات
• مخطط تركيب المكونات وتدفق التبعيات
• اتفاقية مستودع الواجهة الأمامية وفروع Git

اليوم 2: المكونات والواجهات المتجاوبة

• نظام رموز التصميم وخصائص CSS المخصصة
• واجهة المكون القابل لإعادة الاستخدام وعقد الخصائص
• نمط التخطيط المتجاوب باستخدام CSS Grid وFlexbox
• بنية HTML الدلالية وتفاعلات ARIA
• مجموعة حالات المكونات وتوثيقها في Storybook

اليوم 3: الحالة والتوجيه والنماذج وAPI

• نمط التنقل وحماية المسارات باستخدام React Router
• خريطة قرار الحالة المحلية والمشتركة وحالة الخادم
• مواصفة التحقق من النماذج وحالات الخطأ
• مسار تكامل Fetch API ومعالجة الإخفاق
• قائمة مخاطر رموز المصادقة وتخزين المتصفح

اليوم 4: الجودة والإتاحة والتسليم

• مراجعة لوحة المفاتيح والتركيز وفق WCAG 2.2
• حزمة اختبارات المكونات والتفاعل باستخدام Testing Library
• ميزانية الأداء وتدقيق التصيير باستخدام Lighthouse
• مراجعة Content Security Policy ومخاطر التبعيات
• قائمة خط بناء المشروع والنشر على الاستضافة الثابتة

اليوم 5: ممارسة تطبيق الواجهة الأمامية

• تمرين مراجعة اختيار بنية الإطار
• تمرين تجميع المكونات المتجاوبة وربط الحالة
• تمرين اختبار النموذج المتاح والتفاعل بلوحة المفاتيح
• تمرين مراجعة جاهزية الأداء والأمن والنشر
• المهمة الختامية: حزمة تطبيق واجهة أمامية للإنتاج

التمارين التطبيقية

تستخدم الدورة أنشطة مقترحة لتحويل متطلبات الواجهة إلى أدلة تنفيذ قابلة للاختبار.

• نشاط مقترح: مقارنة React وAngular وVue لواجهة خدمة مالية وتوثيق قرار البنية.
• نشاط مقترح: بناء مكون متجاوب لبوابة رعاية صحية مع الحالات والتحقق وبيانات API.
• نشاط مقترح: اختبار مسارات لوحة المفاتيح وسلوك التركيز وأداء التصيير وحالات الإخفاق.
• نشاط مقترح: تجميع حزمة التطبيق مع الشيفرة والاختبارات ونتائج التدقيق وسجلات النشر.

الأسئلة الشائعة

لمن تناسب دورة أطر الواجهات الأمامية الحديثة، وما الذي تفترضه؟

تناسب الدورة المطورين ومهندسي الواجهات والبرمجيات والقيادات التقنية. وتفترض خبرة عملية في HTML وCSS وJavaScript، ولا تفترض خبرة متقدمة في إطار بعينه.

كيف تختلف هندسة واجهات المستخدم المتاحة عن تدريب تصميم الواجهات؟

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

هل يحتاج مطور الواجهة الأمامية إلى دراسة React وAngular وVue معا؟

توفر المقارنة أساسا لفهم أنماط المكونات والتوجيه والحالة والبيانات المشتركة. تستخدم الدورة React للتطبيق المتعمق، وتقارن خيارات البنية في Angular وVue.

كيف يطبق WCAG 2.2 في تطوير الواجهات الأمامية؟

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

الخاتمة

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