خارطة طريق الـFrontend: من HTML إلى React و Next.js

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

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

‏HTML و CSS بشكل صحيح

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

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

‏JavaScript — المرحلة التي تستحق ألّا تتعجّلها

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

• اللغة نفسها — النطاق، والإغلاقات، و this، ودوال المصفوفات والكائنات، والتفكيك، والوحدات.
• ‏DOM والأحداث — اختيار العناصر، والاستماع، وكيف يعمل تصاعد الأحداث فعلاً.
• ‏JavaScript غير المتزامنة — حلقة الأحداث، و promises، و async/await، ولماذا يفاجئ الترتيبُ الناسَ.
• ‏HTTP من جانب العميل — fetch، وأشكال الطلب والاستجابة، ورموز الحالة، و JSON، و CORS.
• أساسيات المتصفّح — التخزين، وعنوان URL، والسجلّ، وسلوك العرض الأساسي.

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

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

اختيار إطار عمل واحد

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

لدى React أكبر منظومة وأوسع سوق عمل وتقترن بـ Next.js. و Vue أصغر لكنها مصمّمة بشكل جيد فعلاً، وتُعدّ غالباً ألطف في التعلّم، وتقترن بـ Nuxt. وهما بديلان لا خطوتان متتاليتان. اختر واحداً، وتعمّق فيه، وتجاهل الآخر حتى تُطلق شيئاً — فالمطوّر الذي يتقن React أكثر قابلية للتوظيف بكثير ممّن يعرف قليلاً من كليهما.

ترتيب معقول لتعلّم React

1. المكوّنات و props — تقسيم الواجهة إلى قطع وتمرير البيانات إلى الأسفل.
2. الحالة والخطّافات الأساسية — useState و useEffect، بما في ذلك متى لا يكون التأثير هو ما احتجته.
3. القوائم والمفاتيح والعرض الشرطي والنماذج بحقول متحكَّم بها.
4. التوجيه، ثم جلب البيانات من واجهة API مع معالجة حالات التحميل والخطأ.
5. حالة الخادم بمكتبة مثل React Query — التخزين المؤقّت وإعادة التحقّق، ولماذا تتفوّق على useEffect للبيانات.
6. الحالة المشتركة في العميل، ثم عمل الأداء — التذكير، والقياس قبل التحسين.
7. معمارية المكوّنات — التركيب، وأين ترسم الحدود مع نمو التطبيق.

‏Next.js واستراتيجيات العرض

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

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

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

ما يفصل المحترفين

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

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

كيف تتقدّم فعلاً

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