لماذا أكتب JavaScript نقية في 2026؟

رغم الانتشار واسع النطاق لأطر العمل الحديثة، يبقى Vanilla JS هو الأساس الذي يمنحني السرعة والأداء الشاقولي وفهماً عميقاً لما يدور تحت غطاء المتصفح.

من خلال تجربتي العملية في بناء مشروعي TypeEBx وRebex Todo، توصلت إلى استنتاجات واضحة حول أهمية العودة إلى الأساسيات.

في عصر يهيمن فيه React وSvelte والأدوات المتقدمة على بيئة تطوير الويب، قد يبدو قولي: "ما زلت أكتب Vanilla JS" كأنه دعوة للعودة إلى الماضي.

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

الدليل العملي: تطبيقان بدون أطر عمل

لقد قمت بتطبيق هذا التوجه عملياً من خلال بناء مشروعين مكتملين بالكامل باستخدام JavaScript فقط.

1. TypeEBx (لعبة اختبار سرعة الكتابة): لعبة تفاعلية تعتمد على البرمجة الصريحة، وتتضمن ثلاثة أوضاع لعب، حساب WPM في الوقت الفعلي، نظام صحة ديناميكي، ومضاعفات Combo تصل إلى 20x.
2. Rebex Todo (تطبيق إدارة المهام): تطبيق إنتاجية متكامل يقدم عمليات CRUD كاملة، تعديلاً مباشراً (Inline Editing)، وتصدير/استيراد البيانات بصيغة JSON.

النتيجة المباشرة لتجربتي

• سرعة تحميل لحظية: غياب الـ Virtual DOM والطبقات البرمجية الثقيلة أدى لاستجابة خاطفة.
• حجم حزمة متناهي الصغر (Ultra-light Bundle): عدم وجود مكتبات خارجية جعل الحزمة مجرد بضع كيلوبايتات يتم تحميلها وتفسيرها فوراً.
• تحكم كامل وإدراك تام: معرفة سبب وجود كل سطر كود وكيفية تفاعله المباشر مع ذاكرة المتصفح.

المكاسب الحقيقية للعمل بـ Vanilla JS

1. الاستيعاب العميق لـ DOM وشجرة العناصر

عند التعامل المباشر مع شجرة DOM وتفويض الأحداث (Event Delegation)، تتضح لي آلية عمل المتصفحات (Reflow & Repaint)، وهو ما يجعلني أتفادى الأخطاء البرمجية الشائعة حتى عند العودة لاستخدام أطر العمل مثل React.

2. إدارة الحالة بوضوح (State Management)

بدون الاعتماد على مكتبات إدارية خارجية مثل Redux، يُجبرني Vanilla JS على بناء نموذج الحالة الموحدة وتنظيم تدفق البيانات (Data Flow) بنفسي، وهي المهارة الأساسية التي تحول الكود من عشوائي إلى معمارية نظيفة.

3. المعمارية النمطية (ES6 Modules)

تتيح لي الموديلات النمطية بـ ES6 تقسيم الكود وفصل المسؤوليات ونشر التطبيقات بخفة ودون الحاجة لإعدادات معقدة:

// state.js - إدارة الحالة المركزية
export const state = { 
  tasks: [], 
  filter: 'all' 
};

// render.js - معالجة العرض والـ DOM
export function render(state) {
  // إعادة رسم عناصر الواجهة بناءً على الحالة
}

// app.js - نقطة الانطلاق
import { state } from './state.js';
import { render } from './render.js';

4. الأداء الخالص (Zero Abstraction Overhead)

كل حدث أو تعديل أنفذه يتم فوراً دون الحاجة لتمريره عبر خوارزميات Reconciliation algorithms أو معالجة الطبقات الوسيطة.

هل يعني هذا الاستغناء عن أطر العمل؟

بالطبع لا! أطر العمل مثل React لها دور جوهري عند تطوير تطبيقات كبيرة مع فرق عمل متعددة.

لذا اعتمدت عليها في مشاريع مثل Rebex Shop و Git Snaps.

لكن الفارق الجوهري بالنسبة لي هو: أن أكون متمكنة من الأساسيات المتينة قبل الانتقال إلى أدوات التسهيل.

الخلاصة

• ابدأ بـ Vanilla JS أولاً: الفهم المتعمق للغة يوفر عليك مئات الساعات من التخبيط التقني في المستقبل.
• اختر أداة العمل بناءً على الاحتياج: أستخدم أطر العمل عندما يحتاج المشروع لزيادة الإنتاجية، وليس فقط لمجرد مواكبة التوجهات.
• فهم ما يدور تحت الغطاء: لا تكن مجرد مستخدم للمكتبات، بل كن مهندساً يدرك كيف تعمل بيئة التشغيل فعلياً.