أهم أسئلة المقابلات لتوظيف مطور واجهة أمامية

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

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

المهارات المطلوبة من مطور الواجهات الأمامية

تلخص النقاط التالية المهارات المطلوبة من مطور الواجهات الأمامية:

• إتقان اللغات الثلاثة الأساسية للويب: لغة HTML ولغة CSS ولغة جافا سكريبت
• إتقان العمل على إطار عمل جافا سكريبت عصري واحد على الأقل مثل React أو Angular.js أو Vue.js
• إتقان استخدام مكتبات CSS مثل Bootstrap أو Tailwind وغيرها
• إتقان العمل على بيئة اختبار مثل Mocha أو Jest
• إتقان العمل مع الواجهات البرمجية RESTful APIs للتواصل مع الواجهة الخلفية
• القدرة على تنفيذ تصاميم UI/UX بدقة وسهولة

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

سنبدأ مع أهم الأسئلة التي قد تُطرح على المتقدم حول لغة HTML5 وميزاتها، وكيفية الرد على كل سؤال بطريقة مناسبة.

أهم الأسئلة التي تُطرح حول HTML

من أكثر الأسئلة شيوعًا حول لغة HTML، نذكر الآتي.

ما هي لغة HTML5؟

لغة HTML هي لغة توصيف Mark language تعطي صفحة الويب هيكلها، فهي بمثابة الأساسات والجدران والسقف إن شبهنا صفحة الويب بمنزل قيد البناء. أحدث نسخة من هذه اللغة هي HTML5، ويمكن أن نلخّص الغاية الأساسية من تطوير مواصفات HTML5 بإيجاد عناصر أصلية تنفّذ وظائف شائعة مثل استخدام عنصر مشغّل الفيديو <video>، بدلًا من استخدام إضافات خارجية؛ إضافةً إلى تقديم عناصر دلالية Semantic elements تهيكل محتوى الصفحة بطريقة توضح طبيعة المحتوى الذي يضمه العنصر مثل <article> و <table> وغيرها.

هل تحتاج الصفحة إلى عناصر HTML أساسية حتى تعمل جيدًا؟

علينا أن نميز هنا بين سياقين أساسيين:

• عرض الصفحة الذي يقع على عاتق المتصفح غالبًا
• الهيكلية البنّاءة للصفحة التي تقع على عاتق المطوّر

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

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

ما الفرق بين عناصر الكتل Block elements والعناصر السطرية Inline elements؟

يبدأ العنصر الكتلي Block elements سطرًا جديدًا في الصفحة ويمتد ليغطي كامل اتساع السطر حتى لو احتاج المحتوى إلى مساحة أقل، في حين لا يبدأ العنصر السطري Inline elements سطرًا جديدًا ويحتل فقط مساحة تعادل المساحة المطلوبة، وبالتالي يمكن أن يأتي عنصر آخر إلى جواره في السطر ذاته.

لا يُسمح للمطور بضبط أبعاد العنصر السطري، لكنه يستطيع ذلك مع العناصر الكتلية. ومن الأمثلة على العناصر الكتلية نجد العنصرين <p> و <div>، بينما نجد أن العنصر <span> هو عنصر سطري.

ما هي HTML الدلالية؟ وأين تظهر أهميتها؟

تتلخص HTML الدلالية باستخدام عناصر تعرف بكل وضوح طبيعة المحتوى الذي تضمه وطريقة هيكلة هذا المحتوى مثل استخدام عنصر تحديد ترويسة الصفحة <header> وعناصر تقسيم الصفحة إلى أجزاء مثل <section> و <article>. وتظهر أهميته في نواح ثلاث:

• سهولة القراءة Readability
• سهولة الوصول Accessibility
• تحسين محركات البحث SEO

ماهي WCAG؟

WCAG هي اختصار لعبارة Web Content Accessibility Guidelines طورتها منظمة اسمها W3C وتعني إرشادات إتاحة محتوى الويب، وهي مجموعة من الإرشادات التي تضمن أن تكون مواقع الويب سهلة الوصول Accessible وقابلة للاستخدام السلس والتشغيل الجيد وأن تكون مفهومة ومناسبة لجميع المستخدمين، بمن في ذلك ذوي الاحتياجات الخاصة.

أعط امثلة عن ممارسات في HTML تزيد من سهولة الوصول إلى محتوى الصفحة

هنالك العديد من الممارسات التي تزيد من سهولة الوصول إلى الصفحة، نذكر منها ما يلي:

• استخدام العنصر الأصلي <button> في كل مرة نحتاج فيها إلى زر، بدلًا من أي عناصر أخرى مشابهة مثل <input> أو <div>، فهو يدعم تلقائيًا استخدام لوحة المفاتيح والفأرة
• استخدام الخاصية alt في الصور <img>، فهي تشرح نصيًا محتوى الصورة في حال لم يتمكن المتصفح من عرضها
• استخدام عناصر HTML الدلالية مثل <figure> لأنه يقدم إمكانيات أكبر من <img> تتعلق بسهولة الوصول
• استخدام خاصيات WCAG عندما لا تكون الخاصيات الأصلية للعناصر كافية مثل role و -aria وغيرها

ما هي الاستمارات forms في HTML؟ لخص آلية عملها؟

الاستمارة <form> هي عنصر أصلي في HTML، وغايته هي نقل محتوى عناصره إلى الخادم وفق تنسيق معين. تضم الاستمارة عناصر إدخال مختلفة، مثل الأزرار والصناديق النصية وصناديق التحقق وغيرها.

نحتاج في الاستمارة إلى خاصيتين:

1. خاصية action لتحديد وجهة البيانات المرسلة
2. خاصية method لتحديد طريقة الإرسال POST أو GET

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

ما الآليات المقترحة لتحسين محركات البحث من خلال هيكلية HTML؟

بإمكاننا الانتباه إلى الكثير من الممارسات أثناء هيكلة الصفحة باستخدام HTML لتحسين محركات البحث منها:

• استخدام عناصر HTML دلالية لأنها تعطي هيكلة ومعنى محدد لهذه الهيكلية مثل <nav> و <header> و <main> وغيرها
• استخدام العنصر الوصفي <meta> لوصف الصفحة وتحدي كلمات مفتاحية للبحث وتحديد نافذة العرض وغيرها من البيانات الوصفية
• استخدام النصوص البديلة عن الصور لأن محركات البحث تفضل النصوص المكتوبة
• استخدام الروابط الداخلية ضمن الصّفحة الواحدة أو الموقع لتساعد زواحف محركات البحث.

نماذج عن الأسئلة التي تُطرح حول CSS وأطر عملها والتصميم المتجاوب

فيما يلي أهم النقاط التي قد يُسأل فيها المتقدم للوظيفة مطور واجهات أمامية حول لغة CSS

ما هي لغة CSS؟ وما آخر إصداراتها؟

أولًا، لا تُعَدّ CSS لغة برمجة وليست لغة توصيف Mark Up أيضًا، وإنما هي لغة تنسيق صفحات؛ إذ تُستخدم لتطبيق تنسيقات تتعلق باللون والموقع وخطوط الكتابة والأبعاد وغيرها على عناصر HTM. آخر إصدارات اللغة هي CSS3، وتتفاوت المتصفحات في دعم قواعدها فهي لغة محمولة تفسرها المتصفحات.

ما هي المحددات Selectors في CSS؟ تحدث عن أهم أنواعها باختصار

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

• محدد المعرفّ ID Selector: ويستهدف العنصر وفق قيمة الخاصية id له
• محدد الصنف Class Selector: يطبق التنسيق على أي عنصر يمتلك قيمةً محددةً للخاصية class
• محدد الخاصيات Attribute Selector: يستهدف العناصر التي تمتلك قيمةً محددةً لخاصية محددة
• محددات زائفة Pseudo Selectors: تستهدف العناصر التي تتميز بوضع معين، كأن تكون العناصر الأولى من نوعها أو أن يكون مؤشر الفأرة مارًا فوقها

ما الفرق بين العناصر الزائفة والأصناف الزائفة؟

العناصر والأصناف الزائفة كيانان مختلفان في CSS يشكلان معًا المحدد الزائف؛ فالأصناف الزائفة Pseudo Classes هي أصناف تستهدف العناصر بناءً على حالتها وموقعها مثل hover: الذي يطبق التنسيق على عنصر يمر مؤشر الفأرة فوقه؛ أما العنصر الزائف Pseudo element، فهو عنصر افتراضي يُعرّف فقط لتطبيق تنسيق على جزء محدد من عنصر HTML، كأن تنسّق النص الذي يحدّده المستخدم selection::.

اشرح أفضلية تطبيق قواعد التنسيق في CSS

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

1. محدد معرّف
2. محدد الصنف
3. محدد العنصر

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

ما هي استعلامات الوسائط في CSS؟

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

ما هي SCSS؟ وكيف تعمل؟

SCSS هي معالج أولي Preprocessor للغة CSS لتوسيع إمكاناتها بإضافة متغيرات ودوال ودعم الوراثة والتداخل وغيرها من الميزات. تفسّر شيفرة SCSS إلى CSS ثم تُستخدم.

اشرح كيف تدعم Bootstrap و Tailwind و Bulma الصور المتجاوبة

تقدم كل من Bootstrap و Bulma صنفي تنسيق مخصصين للتحكم بطريقة عرض الصورة؛ إذ تقدم Bootstrap الصنف img-fluid.، بينما تقدم Bulma الصنف is-responsive.، أما Tailwind، فلا تقدم صنفًا جاهزًا، لكن يمكن استخدام الفئتين max-w-full و h-auto ونقاط التوقف *-w التي تضبط حجم الصورة وفقًا لأبعاد شاشات العرض.

اشرح كيف تنسق Bootstrap و Tailwind و Bulma شريط التنقل Navbar

تدعم كل من Bootstrap وBulma تنسيق شريط التنقل بسهولة من خلال الصنف الجاهز navbar، الذي يحمل نفس الاسم في الإطارين ويوفر تصميمًا مدمجًا تلقائيًا. أما في Tailwind CSS، فليس هناك مكون جاهز لشريط التنقل، مما يتطلب بناءه يدويًا باستخدام الأصناف الفردية لتحديد كل جزء من التصميم.

ما هو نهج التصميم للهاتف أولا Mobile-First؟ وكيف يعزز التصميم المتجاوب لصفحة الويب؟

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

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

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

يُستخدم العنصر كالتالي:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

إذ تفرض الخاصية content="width=device-width, initial-scale=1.0" على المتصفح أن يجعل اتساع الصفحة مطابقًا لاتساع شاشة الجهاز الذي يعرضها، وبأبعادها الفعلية دون تكبير أو تصغير.

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

يمكن أن نقدم صورًا متجاوبة بتأمين عدة نسخ من الصورة بأبعاد مختلفة، ثم نستخدم بعد ذلك الخاصيتين scrset و sizes للعنصر <img>، أو استخدام العنصر الدلالي <picture> لتقديم هذه النسخ إلى المتصفح كي يختار الأنسب، وفقًا لأبعاد شاشة العرض.

كيف يحسن تخطيط الشبكة الانسيابية Fluid Grid تجاوب الصفحة وكيف يُطبق؟

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

نماذج عن الأسئلة التي تطرح حول لغة جافا سكريبت JavaScript وأطر عملها

في ما يلي بعض المواضيع التي تطرح بمقابلات توظيف مطوري الواجهات الأمامية حول لغة جافا سكريبت وأطر عمل الواجهات الأمامية التي تعتمد عليها.

ماهي لغة جافا سكريبت؟ ما هي أهم ميزاتها؟

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

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

تدعم جافا سكريبت الأنواع الأولية string و number و boolean و null و undefined و symbol و bigint، وأيضًا أنواع مركبة مثل object و array و function. تُعَد لغة جافاسكربت ديناميكية من ناحية تحديد نوع المتغيرات، فلن نحتاج إلى تحديد نوع المتغير عند التصريح عنه، بل يحدد لاحقًا أثناء التنفيذ.

ما الفرق بين القيمتين null و undefined؟

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

وضح كيف تعمل الدوال المسماة وغير المسماة والدوال من مراتب عليا Higher-Order

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

ما هي الواجهات البرمجية الأصلية API في جافا سكريبت؟ اُذكر أهمها

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

من أهم هذه الواجهات هي:

• واجهة DOM
• واجهة إحضار البيانات Fetch
• واجهة الطرفية Console
• واجهتي تخزين البيانات في طرف العميل LocalStorage و SessionStorage
• واجهة العمل مع الملفات File

ما هي واجهة DOM؟ وما هي أهم الدوال المستخدمة فيها؟

تقدم واجهة DOM وسيلةً للتعامل مع هيكلية HTML أو XML للصفحة، وذلك عن طريق ترتيب عناصرها على شكل شجرة تمثل كل عقدة فيها جزءًا من الصفحة عنصر، خاصية، وهكذا. تستخدم الواجهة في إجراء تعديلات أو إضافات إلى هيكلية الصفحة. من الدوال المستخدمة ()document و ()element.

وضح بإيجاز مفهوم البرمجة غير المتزامنة والوعد في جافا سكريبت، واعط مثال عن ذلك

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

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

ما هو تنسيق JSON؟ وكيف يستخدم في جافا سكريبت؟

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

يستخدم JSON في جافا سكريبت عادةً لتبادل البيانات بين الخادم والعميل، ونستخدم التابع ()JSON.stringify لتحويل كائن جافا سكريبت إلى كائن JSON و ()JSON.parse لتحويل كائن JSON إلى كائن جافا سكريبت.

وضح وظيفة الواجهتين XMLhttpRequest و Fetch وما الفرق الجوهري بينهما

كلاهما واجهتان لتنفيذ طلبات HTTP من وإلى الخادم. تعتمد الأولى على الاستدعاءات، بينا تعتمد الثانية الأكثر تطورًا على الوعود. لا يُنصح حاليًا باستخدام XHR، وينبغي استبدالها بالواجهة Fetch التي تدعمها معظم المتصفحات الحديثة.

تحدث بإيجاز عن LocalStorage و SessionStorage و IndexedDB وحالات استخدامها

كل من LocalStorage و SessionStorage و IndexedDB هي وسائل لتخزين البيانات على طرف العميل أو المتصفح، أي أنها توفر لنا طرق لحفظ المعلومات محليًا في جهاز المستخدم بدون الحاجة إلى إرسالها إلى الخادم وفيما يلي أبرز الفروقات فيما بينها.

تُعَد SessionStorge ذاكرة تخزين مؤقتة محدودة الحجم يقارب حجمها حوالي 5 ميجابايت، وتستخدم لتخزين البيانات النصية فقط مؤقتًا خلال جلسة العمل، بحيث تفقد محتواها عند إغلاق المتصفح. من حالات استخدامها تخزين بيانات استمارات الويب مؤقتًا خلال الجلسة لتفادي فقدانها.

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

في حين أن IndexedDB  هي قاعدة بيانات مدمجة في المتصفح، توفر ذاكرة كبيرة الحجم ومفهرسة وتدعم العمليات غير المتزامنة. تخزن هذه الذاكرة مختلف أنواع البيانات مثل تخزين قواعد بيانات أو الملفات الكبيرة لاستخدامها دون اتصال مع الإنترنت.

ماهو المكون Component؟ وكيف تقدمه كل من أطر React و Angular و Vue.js؟

المكون Component هو وحدة مستقلة في واجهة المستخدم، تجمع بين الهيكلية بلغة HTML والتنسيق بلغة CSS ومنطق العمل بلغة JavaScript أو TypeScript، وهو قابل لإعادة الاستخدام بسهولة عبر أجزاء مختلفة من التطبيق.

تقدم كل مكتبة أو إطار من أطر عمل جافا سكريبت المكونات بطريقة مختلفة ففي مكتبة رياكت React يكون المكوّن عبارة عن دالة أو صنف Class يعيد شيفرة JSX، وهي صيغة قريبة من HTML تكتب داخل JavaScript. أما في إطار عمل أنغولار Angular فيكون المكون عبارة عن صنف مكتوب بلغة TypeScript يُعرّف باستخدام مُزخرف Decorator مثل Component@ لتحديد القالب Template والنمط Style المرتبط به. أما بالنسبة لفيو جي إس Vue.js فالمكون فيه عبارة عن ملف مفرد له الامتداد .vue، يحتوي على ثلاثة أقسام هي القالب Template والتنسيق Style، والمنطق البرمجي Script.

اشرح المقصود بإدارة الحالة وكيف نتعامل معه في كل من React و Angular و Vue.js

تعني إدارة الحالة State Management تنظيم البيانات المشتركة بين مكونات واجهة المستخدم المختلفة ومتابعة تغييراتها بطريقة تضمن تحديث الواجهة بشكل متناسق وسليم كلما تغيرت هذه البيانات.

يتعامل كل إطار عمل جافا سكريبت مع إدارة الحالة بأسلوبه الخاص ففي رياكت React مثلًا، تعتمد إدارة الحالة على استخدام دوال مثل useState وuseReducer لإدارة الحالة داخل المكوّنات، أو عبر مكتبات خارجية مثل Redux و Zustand لإدارة حالات أكثر تعقيدًا ومشاركة الحالة عبر التطبيق. في حين يستخدم أنغولار Angular الخدمات Services لنقل وإدارة البيانات بين المكوّنات، مع دعم قوي للمكتبات التفاعلية مثل RxJS، ويمكن أيضًا الاعتماد على مكتبات إدارة الحالة مثل NgRx لبناء أنظمة معقدة تعتمد على التدفق أحادي الاتجاه للبيانات One-way Data Flow من المصدر للوجهة وبهذا يسهل علينا تتبع أين وكيف تتغير البيانات. 

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

أخيرًا في فيو جي إس Vue.js نتعامل مع الحالة محليًا داخل المكون باستخدام الدالة ()data، وعند الحاجة لمشاركة الحالة بين المكونات أو إدارة حالة أوسع، يمكننا استخدام مكتبات مثل Vuex أو Pinia لتوفير إدارة حالة مركزية.

ماهو التوجيه Routing؟ وكيف تحققه كل من React و Angular و Vue.js؟

التوجيه Routing هو عملية إدارة التنقل بين صفحات أو مكونات التطبيق دون الحاجة لإعادة تحميل الصفحة بأكملها. وهو يسمح للمطورين ببناء تطبيقات الصفحة الواحدة SPA بسهولة وذلك عن طريق تحميل المحتوى المطلوب فقط وتحديثه على الصفحة الحالية.

تحقق المكتبة رياكت React التوجيه من خلال استخدام الوحدة البرمجية react-router-dom التي تسمح بتحديد الوجهات routes داخل التطبيق وتوجيه المستخدم إلى المكونات المناسبة بناءً على عنوان URL.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

ويستخدم أنغولار Angular الوحدة البرمجية angular/router@ المدمجة داخله لتحديد الوجهات والتعامل مع التنقل بين المكونات ضمن تطبيق واحد دون إعادة تحميل الصفحة.

import { RouterModule } from '@angular/router';

بينما يستخدم إطار فيو جي إس Vue.js الوحدة vue-router، وهي مكتبة مخصصة تسهل إدارة الوجهات والتنقل بين المكونات

import VueRouter from 'vue-router';

ما المقصود بالتصيير من جانب الخادم SSR؟ اشرح آلية عمله

التصيير من جانب الخادم Server-Side Rendering -أو SSR اختصارًا- هو أسلوب يقوم فيه الخادم بتوليد الصفحة كاملة بصيغة HTML قبل إرسالها إلى المتصفح، أي يتولى الخادم مهمة تحضير المحتوى وتجميعه، ثم يرسله للمستخدم جاهزًا للعرض، بدلاً من أن ينتظر المتصفح كي يقوم بتجميع الصفحة.

يعمل التصيير من جانب الخادم SSR على النحو التالي:

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

ما المقصود بالتوليد الساكن للصفحات SSG؟ اشرح هي آلية عمله

توليد الصفحات الساكن Static Site Generation -أو SSG اختصارًا- هو أسلوب لإنشاء صفحات HTML جاهزة في وقت بناء وتجهيز الموقع Build Time، وليس عند كل طلب من المستخدم. أي أن الخادم أو أداة البناء تعد الصفحات مرة واحدة ثم تُخزنها كملفات HTML ثابتة يمكن تقديمها مباشرة عند طلبها.

في هذه الحالة يُحمّل المتصفح ملف HTML بأبسط شكل ممكن Minimal HTML file ثم يستخدم جافا سكريبت لإحضار المحتوى وتصييره وعرضه ديناميكيًا وفق الآلية التالية:

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

كيف تتعامل أطر العمل المختلفة مع SSR و SSG؟

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

• تعتمد React على إطار العمل Next.js، الذي يوفّر دعمًا كاملاً لكل من SSR وSSG
• يعتمد Vue.js على إطار العمل Nuxt.js، الذي يدعم كلا النمطين SSR و SSG *يستخدم أنغولار إطار العمل Angular Universal لتحقيق SSR ولا يدعم SSG بشكل رسمي

ما هي لغة TypeScript؟

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

نصائح للمتقدمين لوظيفة مطور واجهات أمامية

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

إتقان الأساسيات

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

الاطلاع على مشاريع سابقة

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

فهم أساسيات مكتبات وأطر عمل الواجهة الأمامية

من المهم جدًا إتقان أساسيات بعض أطر عمل جافا سكريبت مثل React أو Angular.js أو Vue.js وفقًا لمتطلبات الشاغر الوظيفي المطلوب

فهم أساسيات واجهة المستخدم وتجربة المستخدم UI/UX

فهذه الأساسيات أصبحت معايير في تطوير الواجهات الأمامية ومعرفتها أمر مستحب، ويفضل امتلاك أساس جيد حول سهولة الوصول Accessiblity والتصميم المتجاوب Responsive Design ومبادئ تطوير واجهات مستخدم سهلة الفهم والاستخدام.

المراجع

1. h5bp/Front-end-Developer-Interview-Questions
2. Front End Developer Interview Questions
3. Front End Interview Handbook

اقرأ أيضًا

• دليلك الشامل لفهم المسارات المهنية لمجال تجربة المستخدم
• كيف تحضر لمقابلة عمل ناجحة؟
• التحضير لمقابلة العمل بهدف الحصول على وظيفة مدير المنتج