الفرق الحقيقي بين Front-End Developer و Senior Front-End Engineer

  

الفرق بين شخص يعرف يكتب كود وشخص قادر على بناء نظام متكامل هو الفرق الحقيقي الذي يفصل بين مطوّر Front-End عادي ومهندس Senior.

 

هذا الدرس تعلّمته من عدة مواقف عملية أثناء عملي بمجال تطوير واجهات المستخدم باستخدام React.js.

 

المطوّر المبتدئ عادةً:

- يأخذ تصميم Figma ويبدأ في تحويله إلى كود.

- يركز على أن يطابق التصميم الأصل بدقة متناهية.

- يستخدم useState في كل شيء حتى في الحالات المشتقة التي لا تحتاجها.

- ينسى عمل Memoization للعمليات الحسابية المعقدة أو الدوال.

- عندما يواجه خطأ، يسأل: "أين المشكلة؟" وليس "لماذا حدثت المشكلة؟"

 

أما المهندس المخضرم:

- أول شيء يفعله هو التساؤل: "هل هذا المكون سيتكرر؟ لنقم بتحويله إلى مكون قابل لإعادة الاستخدام."

- يفكر في هيكلة المشروع: هل نستخدم هيكلية مجلدات تعتمد على الميزات؟ أم على المكونات؟ أم على النطاق الوظيفي؟

- يضع أداء التطبيق في اعتباره منذ البداية، بما في ذلك:

  ✅ التحميل الكسول (Lazy Loading)

  ✅ الاستيراد الديناميكي (Dynamic Imports)

  ✅ الميموية (Memoization)

  ✅ هياكل التحميل المؤقت (Skeleton Loaders)

  ✅ مراقبة حجم الحزمة (Bundle size monitoring)

 

موقف حقيقي حدث معي:

في أحد المشاريع، كانت هناك لوحة تحكم تحتوي على العديد من الرسوم البيانية والجداول.

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

 

عندما راجعت الكود، وجدت أن:

- جميع الرسوم البيانية تُعرض مرة واحدة.

- لا يوجد تحميل كسول للمكونات.

- لا يوجد ترقيم للصفحات في الجداول.

- لا يوجد استخدام لتقنيات Memoization في أي مكان.

 

قمت بإجراء تعديلات بسيطة لكنها مؤثرة شملت:

- استخدام React.lazy للتحميل الديناميكي.

- إضافة مكونات هيكل التحميل المؤقت (Skeleton components).

- تطبيق الترقيم والتمرير اللانهائي للجداول.

- استخدام useMemo و useCallback في الأماكن الحرجة.

- تحليل الأداء باستخدام أدوات مثل Lighthouse و React DevTools.

 

والنتيجة كانت: انخفاض وقت التحميل من 6 ثوانٍ إلى 1.8 ثانية فقط.

 

هناك أدوات وتفاصيل يهتم بها المهندس المخضرم دون أن يطلب منه أحد:

- استخدام HTML ذي دلالة صحيحة لتحسين إمكانية الوصول ومحركات البحث (Accessibility & SEO).

- فهم مؤشرات الأداء الأساسية للويب (Core Web Vitals).

- التعامل مع أنظمة الحوسبة السحابية وخطوط CI/CD (حتى لو بشكل أساسي).

- كتابة اختبارات الوحدة واختبارات نهاية إلى نهاية (Unit Testing / E2E Testing).

- مراجعة الكود لا تقتصر على الصياغة فقط، بل تشمل الهندسة المعمارية وتسمية المكونات وتجربة المستخدم.

 

الخلاصة:

للوصول إلى مستوى Senior، لا تكتفِ بالسؤال "كيف أنفذ هذه المهمة؟"، بل اسأل دائمًا:

"كيف أنفذها بشكل صحيح؟ وبسرعة؟ وبمرونة؟ وبطريقة تسهل صيانتها وتطويرها لاحقًا؟"

 

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

 

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