أسئلة مقابلة مهندس واجهات أمامية (Frontend)

ارسم الحدّ في الجملة الأولى. «كنت مسؤولاً عن شاشات الدفع الثلاث: نموذج العنوان وخطوة الدفع وصفحة التأكيد. لم أبنِ الربط مع بوابة الدفع نفسها.» هذه الجملة وحدها تفصلك عن أغلب القائمة، لأن معظم المرشحين يجيبون بصيغة الجمع من أولها إلى آخرها.

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

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

جملة واحدة ثم انتقل. الإجابة الطويلة تبدو شكوى مهما اجتهدت في صياغتها.

اربطها بالعمل نفسه: «أعمل على لوحة إدارة داخلية منذ سنتين وأريد أن أكون أقرب إلى منتج يستخدمه الناس فعلاً.» لا تصف مديراً. ولا تصف راتباً حتى لو كان هو السبب — للراتب سؤاله الخاص وهذا ليس هو.

أعطِ نطاقاً بحدّ أدنى تقبله فعلاً، وقل على أي سوق بنيت الرقم: سوقك المحلي، أم سوق الجهة التي ستعمل لها، أم العملة التي ستُدفع بها. ثلاثة أرقام مختلفة للوظيفة نفسها، وهذه المهنة تحديداً هي التي تتباعد فيها الثلاثة.

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

وقبل أن تجيب، من حقك أن تسأل ولا يكلّفك شيئاً: ما نطاق هذه الدرجة، وأين ينتهي سقفها؟

الفخ أن تقول «Full-stack» لأن الإعلان قالها. اذكر الطبقة التي يُوثَق بك فيها بلا مراجعة، ثم الطبقة التي تعمل فيها مع مراجعة. جملتان صادقتان أفضل من واحدة لامعة.

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

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

في الأسواق التي لا تنظّم شفافية الأجور يُسأل هذا مباشرةً ولا يُعدّ تطفلاً. وفي الأسواق التي تنظّمها للمتقدّم حقّ في معرفة أجر الوظيفة قبل المقابلة، ولا يُفترض بصاحب العمل أن يسأل عن تاريخ الأجر — ونطاق ذلك أضيق مما يُشاع، وصفحة الفرز العامة على هذا الموقع تشرحه بدقة.

عملياً: اعرف رقمك الشامل مع بدل السكن والمواصلات، لأن الراتب الأساسي وحده، حيث يُقسَّم الأجر على هذا النحو، يقلّل من قيمتك بفارق كبير، ومن يقارن أساسك برقمه الشامل «سيتفوّق» عليك وهو يخفض دخلك.

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

يُطرح صراحةً في وظائف الفرق الموزّعة، ويُقاس ضمناً في غيرها حتى لو لم يُطرح. والمقصود ليس فصاحتك بل هل تستطيع أن تعترض على قرار تقني بالإنجليزية أمام أشخاص لا يعرفونك.

الإجابة الجيدة تصف الاستخدام لا المستوى: «كتابةً يومياً في المراجعات والتوثيق، وشفهياً في اجتماع أسبوعي مع فريق في منطقة زمنية أخرى.» أما «مستوى متقدّم» فلا تعني شيئاً وتُختبر بعدها بدقيقتين.

الخطأ أن تبدأ بتعداد الحلول. الصواب أن تقيس، وأن تقول ذلك قبل أن تفعل أي شيء.

الترتيب: تأكّد أن إعادة الرسم حقيقية بأداة القياس الخاصة بالإطار أو بعدّاد بسيط، لأن نصف الحالات يكون البطء في مكان آخر تماماً وأنت على وشك تحسين مكوّن لم يكن هو المشكلة. ثم ابحث عمّا تتغيّر هويته مع كل ضغطة: كائن أو دالة أو مصفوفة تُنشأ داخل الأب في كل رسم، أو سياق قيمته كائن جديد كل مرة، أو مفتاح غير ثابت. ثم اسأل هل الحالة في مكانها الصحيح أصلاً: حالة حقل الإدخال الموضوعة ثلاث طبقات فوقه هي السبب الأكثر تكراراً، وإنزالها إلى مكانها يتفوّق على أي تخزين مؤقت.

وبعد هذه الثلاث فقط أذهب إلى الحفظ المؤقت (memoization)، وأقول ثمنه بصوت مسموع: له تكلفة، ويُبطَل بأي اعتمادية غير مستقرة، وهو حول مكوّن تتغيّر مدخلاته فعلاً في كل رسم مجرد عبء مع تعليق فوقه.

الإجابة التي تُعجب هي التي تسمّي ما ستفحصه وما النتيجة التي ستجعلك تترك هذا الخيط.

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

وقل جزء الرابط صراحةً: الفلاتر والتبويبات والصفحات وكلمة البحث مكانها في الرابط (URL) لأن المستخدم يتوقع أن يشاركه ويعيد تحميله. نصف وجع إدارة الحالة في هذه المهنة سببه تعلّم هذه القاعدة متأخراً.

هذا السؤال يفصل بوضوح بين من صحّح مشكلة رسم حقيقية ومن بنى مزايا فقط. ويُطرح مفتوحاً عن قصد: المسافة التي تقطعها هي المقياس.

العمود الفقري: يقع الحدث فتعمل دالتك على الخيط الرئيسي. تضبط الحالة، فتُجدوَل المهمة ولا تُنفَّذ فوراً. يحسب الإطار ما تغيّر ويكتب في الـ DOM. ثم يعيد المتصفح حساب الأنماط، ثم التخطيط (layout)، ثم الطلاء، ثم التركيب. بعض الخصائص تتخطى التخطيط تماماً وبعضها يفرضه.

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

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

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

حالتان تستحقان التسمية: حساب مشتق مكلف على مجموعة كبيرة، وقيمة تُمرَّر إلى ابن محفوظ حيث ثبات الهوية هو الغرض كله. وما عدا ذلك: «قِسته فوجدته ملموساً».

التصيير الافتراضي — رسم الصفوف الظاهرة وحدها مع هامش — هو الإجابة المتوقعة، فاصل إليها بسرعة ثم أنفق وقتك على ثمنها. ارتفاعات الصفوف المتغيرة تكسر التنفيذ الساذج. البحث والتنقّل بلوحة المفاتيح داخل قائمة افتراضية يحتاجان عناية لأن الصف المقصود قد لا يكون موجوداً في الشجرة. وإتاحة الوصول تصبح أصعب لأن قارئ الشاشة لا يرى ما ليس مرسوماً، ولهذا وُجدت خصائص عدد الصفوف.

والنسخة الأقوى من الإجابة تردّ بسؤال: هل يحتاج المستخدم خمسة آلاف صف، أم يحتاج أن يجد واحداً؟ الترقيم وتحسين الفلترة يحلّان المشكلة نفسها بلا أي من هذه التكاليف، واقتراح ذلك أولاً غريزة منتج يلاحظها المُقابِل.

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

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

أجب بما تتحقق منه لا بأي مكتبة تستخدم، لأن المكتبة تتغيّر كل ثلاث سنوات والمبدأ لا يتغيّر.

اختبر ما يراه المستخدم: النص على الشاشة، والاسم والدور المتاحان للعنصر، وما يحدث بعد الضغط. ولا تتحقق من حالة داخلية ولا من أسماء أصناف التنسيق، لأن هذه بالضبط ما تريد أن تبقى حراً في تغييره — واختبار ينكسر حين تعيد تسمية صنف CSS ضريبة بلا مقابل.

ثم ارسم الحدّ بصدق: اختبارات وحدة للمنطق الذي لا DOM فيه، واختبارات مكوّن للسلوك، وعدد صغير من اختبارات المسار الكامل للمسارين أو الثلاثة التي يكون انكسارها حادثاً. قل إن العدد صغير وقل لماذا: بطيئة ومتقلّبة، ومجموعة اختبارات يتجاهلها الفريق أسوأ من لا شيء.

وإن سُئلت بماذا تبدأ في قاعدة كود بلا اختبارات، فالإجابة الجيدة: المسار الذي يأتي بالمال، لا الملف الذي يبدو أسوأ.

قل أين يعيش التحقق ومتى يعمل، فهذا هو السؤال الحقيقي. تحقّق عند مغادرة الحقل لا عند كل حرف لشيء ما زال المستخدم يكتبه؛ أظهر الخطأ بعد أن يُلمَس الحقل لا قبله؛ ولا تجعل القاعدة موجودة في العميل وحده، لأن الخادم سيستقبل الطلب مباشرةً عاجلاً أو آجلاً.

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

بُعد واحد مقابل بُعدين: Flexbox يوزّع على محور، وGrid يرتّب صفوفاً وأعمدة معاً. القاعدة العملية: إن كنت تحسب هوامش لتصطف الأعمدة، فأنت تحتاج Grid وتقاوم ذلك.

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

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

لأن z-index يرتّب الأشقاء داخل سياق التكديس نفسه، وأحد الآباء أنشأ سياقاً جديداً بسبب transform أو filter أو شفافية أقل من واحد. عنصرك في أعلى صندوق هو نفسه في الأسفل. قل هذا ثم قل إنك ستصعد في الشجرة بدل أن ترفع الرقم.

مكدّس نداء واحد، وطابور مهام، وطابور منفصل للمهام الدقيقة يُفرَّغ بالكامل بعد كل مهمة وقبل أن يرسم المتصفح. ردود الوعود مهام دقيقة، والمؤقتات ومعظم الأحداث مهام عادية.

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

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

هذا السؤال يكافئ الخبرة المباشرة بالأجهزة المتوسطة والشبكات الضعيفة، ويستحق تحضيراً جاداً كلما كان مستخدموك على هذا الجهاز بالضبط وعلى هذه الشبكة بالضبط — فصفحة ضُبطت على حاسوب محمول وشبكة مكتب لم تلتقِ بهم قط.

اشتغل بترتيب التكلفة الحقيقية: أرسل جافاسكربت أقل — تقسيم حسب المسار، وتأجيل كل ما لا تحتاجه الشاشة الأولى، ومساءلة كل اعتمادية عن وزنها بدل افتراض أنها تستحقه. أرسل صوراً بمقاس الجهاز بصيغة حديثة وبأبعاد محجوزة. أخرج أول رسم ذي معنى من الخادم بدل انتظار حزمة تُنزَّل وتُحلَّل وتُروى.

ثم قل ما لا يقوله معظم المرشحين: التحليل والتنفيذ هما الجزء المكلف على جهاز ضعيف، لا التنزيل. حزمة بحجم 300 كيلوبايت على شبكة سريعة ومعالج ضعيف تبقى صفحة مجمّدة لثانية ونصف. هذه الجملة وحدها تقول للمُقابِل إنك قِست على هاتف حقيقي.

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

كن ملموساً أو لا تجب. النسخة العامة من هذه الإجابة — أن إتاحة الوصول مهمة وينبغي اتباع المعايير — لا تساوي شيئاً وقد سمعها المُقابِل أربعين مرة.

الملموس يبدو هكذا: كل عنصر تفاعلي يمكن الوصول إليه وتشغيله بلوحة المفاتيح وحدها، وحلقة التركيز ظاهرة لا محذوفة. كل زر له اسم متاح لا مجرد أيقونة. اللون ليس الطريقة الوحيدة لنقل المعلومة أبداً. العناوين مرتّبة وتصف البنية لا مختارة حسب حجمها. أخطاء النموذج مرتبطة بحقولها ومُعلَنة لا ملوّنة بالأحمر فقط. وكل ما يظهر فوق الصفحة — نافذة أو قائمة — يحبس التركيز داخله ويعيده حين يُغلق.

وأفضل إجابة على هذا السؤال قصة: شيء اكتشفته لأنك جرّبت شاشتك بلا فأرة، أو مع قارئ شاشة لعشر دقائق. أما «شغّلنا أداة فحص آلي» فإجابة أضعف مما تبدو، وقول ذلك صراحةً — أن الأدوات الآلية تلتقط أقلية من المشكلات الحقيقية — علامة من فعلها بيده.

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

اذهب إلى المصمّم باقتراح قطع محدّد لا بالمشكلة. «الانتقال المتحرّك يومان والباقي يوم. إما أن ننشره بلا الحركة ونضيفها الدورة القادمة، أو نحذف لوحة الفلاتر ونبقي الحركة.» خياران وترجيح.

والفشل الذي يستمع إليه المُقابِل هو المهندس الذي يبني نسخة أسوأ في صمت، أو يتجاوز الموعد في صمت. كلاهما قرار اتُّخذ منفرداً ولم يكن من حقه أن يُتَّخذ منفرداً.

نعم، في مكان واحد عند الحدّ، ثم اذهب واطلب تعديل الواجهة. النصفان مهمان: المعالجة المبعثرة في المكوّنات هي كيف يصير الشكل السيئ دائماً، والمعالجة في محوّل واحد تُبقي التكلفة ظاهرة والتغيير رخيصاً حين تتحسّن الواجهة.

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

لا توجد إجابة يريدونها، وتوجد قطعاً إجابة لا يريدونها وهي الترتيب والمفاضلة. المُختبَر هو: هل تستطيع أن تحمل تفضيلاً دون أن تتديّن به.

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

وأقوى ما تضيفه هنا: قل ما الذي يغيّر رأيك. «لو كان معظم الفريق قادماً من منظومة أخرى لاخترت منظومتهم، لأن إطاراً أحبّه ولا يستطيع أحد مراجعته أسوأ من إطار أتحمّله.» هذه الجملة هي ما يبدو عليه قائد فريق.

وإن لم تعمل إلا في واحد، قل ذلك وصِف ما الذي تريد معرفته عن غيره قبل الاختيار. ادّعاء الاتساع يُكشف بسؤال متابعة واحد.

اسأل عن السياسة قبل أن تبدأ التمرين لا بعده. مواقف الشركات متباينة بحدّة: بعضها يطلب ألا تستعين بشيء أثناء التقييم، وبعضها يسمح في التحضير ويمنع في الغرفة، وبعضها يريد أن يرى كيف تستعين. لا أحد ينزعج من السؤال، وكثيرون ينزعجون من اكتشاف الأمر لاحقاً.

وحين يكون مسموحاً، فالمُقاس ليس هل استخدمته. المُقاس هل تميّز بين ناتج يعمل وناتج يبدو أنه يعمل. فاروِ المراجعة لا التوليد: أي جزء أخذته كما هو، وأي جزء رفضته ولماذا، وماذا اختبرت فيه، وأين رجعت إلى التوثيق لأنك لم تكن واثقاً.

والإجابة الفاشلة هي أحد الطرفين: التظاهر بأنك تكتب كل شيء بيدك في مهنة لم يعد فيها أحد يفعل، أو تسليم كود لا تستطيع الدفاع عن سطوره. وكلاهما الفشل نفسه بثوبين: ادّعاء ملكية لا تستطيع إسنادها.

وقل شيئاً عمّا لا تفوّضه. أغلب من فكّر في هذا لديه خط: الجزء الأمني، أو ما يمسّ المال، أو مراجعة الكود نفسها. تسمية خطّك إجابة قوية.

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

وسمِّ الفخ: الكود الذي يبدو أسوأ هو غالباً الكود الذي احتكّ بأكثر الحالات الحديّة، وإعادة كتابته هي كيف تُعيد أخطاء خمس سنوات مُصلَحة.

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

أي الجانبين مقبول، لكن النسخة التي كنت فيها أنت المراجِع أكشف وأقلّ من يرويها. المُختبَر: هل تفصل الخلاف على الكود عن الخلاف مع الشخص.

الشكل المفيد: ما كان الخلاف التقني فعلاً، وماذا فعلت حين تجاوز خيط التعليقات أربع ردود، وكيف انتهى. والتصرّف الصحيح عند الرد الرابع مكالمة ربع ساعة، وقول ذلك تفصيلة صغيرة تُقرأ على أنها خبرة.

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