هندسة الواجهات الأمامية
نصمم ونبني الواجهات التي يثق الناس فعلاً ببياناتهم — ثنائية اللغة افتراضيًا، ومدعومة لـ RTL عن قناعة، ومُتاحة منذ أول التزام. لكل بكسل نرسمه مسار تدقيق يردّه إلى قرار تصميم أو نتيجة بحث أو متطلب تنظيمي. الرقم المنزاح عندنا ليس خطأ مطبعيًا؛ بل وعد مكسور — لذلك نختبر ضد نفس سيناريوهات المسارات الحرجة التي يطلقها فريق الأنظمة الخلفية.
الحد الأدنى لأداء Lighthouse
أول رسم محتوى على شبكة الجيل الثالث
بوابة الوصول في الـ CI
لغتان، RTL وLTR، من قاعدة شيفرة واحدة
لماذا الواجهات الأمامية
الواجهة الأمامية سطح ثقة لا طلاء
الواجهة الأمامية هي المكان الذي تصبح فيه الثقة مرئية. حين يرسل المستخدم بيانات حرجة، الشيء الوحيد الذي يقف بين النية والنتيجة هو الشاشة التي يلمسها — وإن كذبت تلك الشاشة أو تأخرت أو أخفت ما سيحدث، فلن تنقذ العلاقة أي درجة من صحة الأنظمة الخلفية. نتعامل مع الواجهة بوصفها سطح ثقة: كل حالة — تحميل، فارغة، خطأ، جزئية، نجاح، نزاع — عليها أن تقول الحق عما يفعله النظام بلغة المستخدم وقت حاجته إليه. لهذا يبدأ عملنا بالتدفقات لا بالشاشات، وينتهي بالرصد لا بالتوقيع. التصميم والهندسة يجلسان على لوحة المفاتيح نفسها.
نرفض الخرافة المعاصرة بأن الواجهات الأمامية مجرد «واجهة مستخدم». مكوّناتنا تُرسَم على الخادم قبل أن يجري أول بايت من JavaScript، فتبقى الصفحة مفيدة على هاتف من عام 2014 عبر شبكة EDGE؛ ثم تُمتَرط الخدمات التفاعلية تدريجيًا حيث تستحق وزنها. الوصول ليس مرحلة — بل عقدٌ يتيح لمستخدم قارئ الشاشة أن يكمل نفس الحوالة التي يكملها المبصر بنفس عدد ضغطات المفاتيح. وبما أن كل عنوان وخطأ وتأكيد عليه أن يوجد بلغتين واتجاهين، فإننا نبني التدويل داخل المكوّن الأولي لا نُلصقه في النهاية. النتيجة واجهات تُحمَّل بسرعة وتُقرأ بوضوح وتصمد أمام تدقيق حقيقي — صباح ثلاثاء في القاهرة أو ليلة جمعة في الرياض.
ماذا نبني
من لوحات السجلات إلى تدفقات الموافقات، هذا ما يخرج من لوحات مفاتيحنا ويُطلق إلى الإنتاج.
منصات الويب
تطبيقات تُرسَم على الخادم عبر SvelteKit تُحمَّل في أقل من ثانية على شبكة الجيل الثالث — لأن الثقة تبدأ قبل تسجيل الدخول. أول بايت HTML يستلمه المستخدم يكون مفيدًا فورًا، ويتم ترط JavaScript تدريجيًا فقط حيث يستحق وزنه.
أنظمة التصميم
مكتبة مكوّنات يُبنى بداخل كل مكوّن أولي وصولٌ وتدويلٌ وتنسيق — مصدر واحد للحقيقة عبر أربع سطوح منتج. الزر الذي يجتاز بوابتنا يجتاز بوابتك أيضًا.
واجهات التدفقات الحرجة
تدفقات تأكيد-وتأكيد، والتحقق من المدخلات، وشفافية الأثر، ومسارات العكس — مُصمَّمة لمستخدمين قد يكونون لم يستخدموا تطبيق مؤسسات من قبل. كل حالة تُظهر ما سيحدث بلغة المستخدم قبل أن يُلتزم بأي شيء.
لوحات لحظية
أرصدة حفظ لحظية، وحالات ضمان، ومسارات تدقيق عبر WebSockets، مع تحديثات متفائلة وتدهور لطيف إلى الاستطلاع حين يسقط المقفل. المقفل الساقط لا يُظهر رقمًا خاطئًا أبدًا.
لوحات المشغّلين
أدوات إدارية داخلية يستخدمها فريقا الامتثال والمالية، بضوابط إدخال بمستوى تدقيق، وطوابير مراجعة، ومسار إجراء يردّ كل نقرة إلى معرّف مشغّل. الواجهة الداخلية تنال نفس معالجة الوصول والتدويل التي تنالها الواجهة العامة.
السطوح العامة للثقة
صفحات بشكل تسويقي لا تزال تطلق SSR وJSON-LD وإمكانية الوصول — لأن الصفحة الرئيسية سطح ثقة أيضًا. نفس المهندسين الذين يبنون لوحة السجلات يبنون موقع التسويق؛ لا يوجد فريق بديل.
كيف نعمل
حلقة إطلاقنا تجري يوميًا. هذه دورة واحدة من لوحة المفاتيح إلى الكناري.
حدّد مع التصميم
يُشارك المهندس مع مصمّم منتج على مواصفة مكتوبة: الحالات، والنص بلغتين، وملاحظات الوصول، واختبارات القبول. لا تُبنى شاشة بدون حالاتها وبدون أن يُدمج نصها أولًا.
نموذج أولي بكود حقيقي
لا نطلق Figma؛ نصنع النموذج الأولي في مكتبة المكوّنات الفعلية، لأن الدقة لا توجد إلا في زمن التشغيل الحقيقي. النموذج الذي لا يُرسَم على الخادم ليس نموذجًا بعد.
ابنِ مقابل الاختبارات
انحدار بصري، وaxe-core للوصول، واختبارات وحدة تجري عند كل التزام؛ البناء الأحمر يحظر الدمج. تُكتب الاختبارات قبل أن يصبح «الميزة جاهزة»، لا بعدها.
مراجعة للوصول والتدويل
يفحص المراجعون تحديدًا رسم RTL، وترتيب التركيز، والنص باللغتين — الفحوص الآلية لا ترى هذه بعد. كل تدفق مسارات حرجة ينال مراجعًا عربيًا أصليًا.
الإطلاق خلف أعلام
تتيح أعلام الميزات والتدرّج أن نطلق إلى 1% ثم 10% ثم 100%، مع ذراع رجع فوري. نستطيع إيقاف ميزة دون إعادة إطلاق.
راقب وكرّر
قياسات مستخدمين حقيقيين — Core Web Vitals، ومعدلات الأخطاء، وإكمال المهام — تُغذّي المواصفة التالية خلال الأسبوع نفسه. الإطلاق بداية العمل لا نهايته.
تعريف الجاهز
لا تُطلق الميزة إلا حين يتحقق كل هذا
يمكن الوصول إليه
صفر مخالفات axe-core، ومُكمل بلوحة المفاتيح، ومتحقَّق منه بقارئ الشاشة بلغتين.
ثنائي اللغة
نص إنجليزي وعربي دُمج بمراجعين أصليين؛ وتخطيط RTL متحقَّق منه في المتصفح لا مفترض.
قابل للرصد
قياسات، وحدود أخطاء، وحالات خطأ للمستخدم — منفّذة وموصلة بلوحات.
مُختبَر
اختبارات وحدة، وانحدار بصري، وتدفقات خضراء؛ الحالات الحدّية (فارغ، خطأ، انتهاء مهلة) مغطاة صراحة.
موثَّق
واجهة المكوّن موثَّقة؛ ومبرر التصميم مسجَّل كـ ADR حين لا يكون القرار بديهيًا.
الأدوات ولماذا نستخدمها
مُملّة عن قصد. اختيرت كل أداة لنمط فشلها لا لعرضها الترويجي.
SSR أولًا، وزمن تشغيل صغير، وتفاعلية وقت الترجمة؛ يطلق JavaScript أقل من أي إطار قِسنّاه.
يلتقط أخطاء البيانات الحرجة وقت الترجمة؛ نتعامل مع الأنواع كبراهين صحة خفيفة.
رموز التصميم كأصناف أدوات، فلا ينفصل الوصول والتنسيق عن الـ markup.
اختبار نهاية-لنهاية عبر المتصفحات على متصفح حقيقي؛ نثق بالاختبارات التي تُحمِّل التطبيق الفعلي.
تنقيط وصول آلي وبوابة CI؛ يلتقط مخالفات WCAG قبل أن يضطر إليها إنسان.
عزل المكوّنات والانحدار البصري؛ نظام التصميم لدينا هو مصدر حقيقة التطبيق.
RTL وLTR من نفس شجرة المكوّنات؛ لا تفرّع عربي منفصل للتطبيق.
إنفاذ ميزانية الأداء في الـ CI؛ الانحدارات لا تُدمج.
كيف نتواصل
حيث تلتقي الواجهة الأمامية ببقية الشركة
الأنظمة الخلفية
نشترك في تصميم عقود الـ API في OpenAPI أولًا؛ يتفق الطرفان على الأشكال قبل أن يكتب أيٌّ منهما كودًا. يصل تغيير المخطط كطلب سحب يكسر البناء إن كسر الواجهة.
الجودة
يشارك في سيناريوهات نهاية-لنهاية؛ يكتب الجودة التدفقات مقابل مكتبة مكوّناتنا، لا تفرّع Cypress منفصل يلزمنا بصيانته بالتوازي.
التصميم
قناة Slack نفسها؛ المهندسون والمصممون يراجعون طلبات السحب لبعضهم البعض. تغيير Figma بلا مراجع هندسي لا يُطلق.
DevOps
نمتلك خط الأنابيب معًا؛ نطلق نحن بوابة Lighthouse، ويطلق DevOps الكناري. لا أحدًا منّا يستطيع دمج انحدار يراه الآخر.
أسئلة تُطرح علينا
هل تطلقون فعلًا WCAG 2.2 AA في كل إصدار؟
نعم — هي بوابة CI. الالتزام الذي يدخل مخالفة axe-core يفشل البناء، ويسجّل مراجع وصول توقيعه على كل تدفق حرج قبل أن يصل إلى الكناري.
كيف تتعاملون مع العربية دون تطبيق منفصل؟
نفس شجرة المكوّنات تُرسَم بالاتجاهين. نوعنا Localized يفرض وجود اللغتين وقت الترجمة، ويتحقق مراجع RTL من الرسم في متصفح حقيقي قبل الدمج — لا في الافتراضات.
لماذا SvelteKit لا React؟
قِسنا. SvelteKit يطلق أصغر زمن تشغيل، وأنظف SSR، وأقل فخاخ لفريق يكتب قاعدة شيفرة واحدة بلغتين. وهو أيضًا زمن التشغيل الذي بُنيت عليه هذه الصفحة نفسها.
هل يكتب المصممون الكود، أم يصمّم المهندسون؟
كلاهما. تُكتب المواصفات بالاشتراك، وتعيش النماذج في مكتبة المكوّنات الحقيقية، ويُراجع طلبات السحب أيُّ انضباط يملك السطح. التسليم خرافة حذفناها.
ما ميزانية أدائكم؟
أول رسم محتوى أقل من 1.2 ث على 3G، وأداء Lighthouse ≥ 90 في كل طلب سحب، وميزانية 100kb JavaScript لكل مسار — منفّذة بـ Lighthouse CI في كل التزام.
مهمتنا
نبني واجهات تستحق الثقة بقول الحق — بسرعة، بلغتين، متاحة للجميع، وقابلة للرصد حين يخطئ شيء لا محالة. لا نجعل الثقة تشعر بالحسن؛ بل نجعلها حسنة فعلًا، ونترك الشعور يتبع.