عندما أعمل على الواجهة الأمامية (frontend)، يدور ذهني غالبا حول سؤال "كيف": لماذا يعيد هذا المكون العرض دون داعٍ، لماذا ينكسر هذا التخطيط على تلك الشاشة، أين يجب أن أحفظ هذه الحالة؟ في أحد الأيام، بينما كنت أتعامل مع خلل قديم في توافق المتصفحات، توقفت للحظة. كل الأدوات التي أستخدمها يوميا، وكل مشكلة أحاول حلها، كانت في الواقع مبنية فوق ثلاثين عاما من التراكم المعرفي. في تلك اللحظة تساءلت من أين جاء هذا العالم الذي أعيش فيه كل يوم.
هذا المقال هو نتيجة ذلك الفضول. كيف تحول الويب من مستند بسيط في CERN إلى منصة التطبيقات الحالية؟ ولماذا أصبحت HTML وCSS وJavaScript على ما هي عليه؟ وكيف تصادمت المتصفحات فيما بينها؟ وكيف أعادت محركات البحث، وسط كل هذا، صياغة قواعد اللعبة من جديد؟ سأروي كل ذلك من منظوري الخاص، بعين المطور.
بدأ كل شيء عام 1989 باقتراح واحد
يُشار عادة إلى عام 1989 باعتباره سنة ميلاد الويب. في تلك السنة، اقترح تيم بيرنرز لي، الذي كان يعمل في CERN، نظاما يتيح للباحثين في أنحاء مختلفة من العالم مشاركة المستندات بسهولة، وأطلق عليه اسم World Wide Web. ثلاثة أشياء ما زلنا نستخدمها اليوم خرجت من ذلك الاقتراح: لغة تصف المستند (HTML)، وبنية تمنح المستند عنوانا (URL)، وبروتوكول ينقل المستند (HTTP).
عندما أُطلق أول موقع ويب عام 1991، كانت الصفحة ثابتة تماما. لم يكن هناك تفاعل ولا أي شيء مخصص للمستخدم؛ فالجميع كان يرى المحتوى نفسه. يبدو هذا غريبا الآن، لأن معظم عملي مبني على التفاعل. لكن ويب ذلك الزمن، أو ما أسميناه لاحقا Web 1.0، كان مكتبة يمكن قراءتها لكن لا يمكن الكتابة فيها.
جاء ما تبقى بسرعة. في منتصف العقد الأول من الألفية، فتحت المدونات والشبكات الاجتماعية ومحتوى المستخدمين الباب أمام Web 2.0؛ وبفضل AJAX بدأت الصفحات تجلب البيانات دون إعادة تحميل الصفحة كاملة. ثم انفجر استخدام الهاتف المحمول، فلم يعد التصميم المتجاوب (responsive design) بالنسبة لأمثالي خيارا بل ضرورة. أما اليوم، ومع SSR والتوليد الثابت (static generation) والحوسبة الطرفية (edge)، لم يعد الويب يقدم مستندات فحسب، بل بات يشغّل تطبيقات فعلية. في كل محطة من هذا الطريق، أرى كيف نمت تلك التقنيات الأساسية الثلاث معا.
HTML: الطبقة الأكثر تجاهلا لقيمتها
HTML هو الهيكل العظمي للصفحة. كانت النسخة الأولى من بيرنرز لي تحتوي على حفنة من الوسوم؛ أما اليوم فنعمل بمئات الوسوم الدلالية (semantic tags).
في رأيي، كانت اللحظة الأهم في تاريخ HTML هي HTML5 عام 2014.<header>،<nav>،<article>،<section>وغيرها من الوسوم الدلالية؛ و<video>و<audio>اللذان لا يحتاجان إضافات (plugins)؛ و<canvas>للرسم...كل هذا لم يسهّل عملي فحسب، بل أوضح أيضا معنى الصفحة للمتصفح ولبرامج الزحف الآلية.
ثمة أمر ننساه دائما: HTML النظيف وذو المعنى يؤثر مباشرة في تحسين محركات البحث (SEO). فبرنامج الزحف (crawler) لا يستطيع تمييز المحتوى الأساسي للصفحة عن القائمة والمعلومات الجانبية إلا من خلال الوسوم الصحيحة. أي أن اختيار العنصر الصحيح بدلا من نص مكدس بوسوم div ليس خيارا جماليا، بل قرار يتعلق بإمكانية الاكتشاف.
CSS: الطبقة التي أنقذت الويب من القبح
كانت الصفحات الأولى قبيحة لأن HTML يصف البنية لا المظهر. ظهرت CSS عام 1996 لسد هذه الفجوة بالتحديد، وفصلت المحتوى عن المظهر.
بالنسبة لي، اكتسبت CSS معناها دائما من خلال المشكلات الكلاسيكية التي حلتها. كان توسيط عنصر عموديا في وقت من الأوقات مهمة قائمة بذاتها؛ حولت Flexbox ذلك إلى أمر روتيني. أما Grid التي ظهرت عام 2017 فقد جلبت نظام تخطيط حقيقيا ثنائي الأبعاد. التخطيطات المعقدة التي كنا بالكاد نبنيها سابقا باستخدام الجداول أو float أصبحت الآن بضعة أسطر فقط.
اليوم، بفضل الخصائص المخصصة (custom properties) والطباعة المرنة عبر clamp( ) واستعلامات الحاوية (container queries)، أصبحت CSS أقوى بكثير مما كانت عليه. لكن يمكنني القول بثقة من واقع الخبرة: الفارق الحقيقي لا يأتي من حيل فردية، بل من نظام تصميم (design system) متسق وبنية CSS منضبطة.
JavaScript: اللغة التي حولت الصفحة إلى تطبيق
غيرت لغة البرمجة النصية التي كتبها بريندان آيش في Netscape عام 1995 (خلال عشرة أيام وفقا للأسطورة) شكل الويب إلى الأبد. سميت أولا Mocha، ثم LiveScript، وأخيرا أصبحت JavaScript لأسباب تسويقية. ورغم الاسم، لا علاقة لها بلغة Java.
جاءت الثورة الحقيقية لاحقا. جعلت AJAX من الممكن جلب البيانات دون إعادة تحميل الصفحة بأكملها. في عام 2009 نقل Node.js لغة JavaScript إلى خارج المتصفح، إلى الخادم (server)؛ فأصبح بالإمكان كتابة الواجهة الأمامية والخلفية بلغة واحدة. أما ES2015 (ES6) فقد منح اللغة شكلها الحالي: let/const، الدوال السهمية (arrow functions)، الأصناف (classes)، الوحدات (modules)، الوعود (promises)... معظم الشيفرة التي أكتبها ما زالت تعتمد على هذا الإصدار.
أعيش نتيجة هذا التطور كل يوم. في قلب الواجهة الأمامية الحديثة يقع React؛ أما في المشاريع بحجم الإنتاج فقد أصبح Next.js، الذي يكمل React بميزات العرض من جانب الخادم (SSR) والتوجيه (routing) والأداء، خياري الافتراضي. ومع نمو قاعدة الشيفرة تصبح سلامة الأنواع (type safety) ضرورة، لذا لم أعد أتصور الدخول في مشروع جاد دون TypeScript. إن عمود الأساس الذي نبنيه في Detartech هو بالضبط هذا الثلاثي.
حروب المتصفحات: كانت في الواقع حروبنا نحن أيضا
لفهم تطوير الويب، لا بد من فهم تاريخ المتصفحات؛ لأن ما يدعمه المتصفح يحدد مباشرة ما يمكنني استخدامه.
انطلق الأمر للجمهور مع ظهور Mosaic عام 1993، وهو أول متصفح شهير يعرض الصور والنصوص في الصفحة نفسها. ثم اندلعت حرب المتصفحات الأولى بين Netscape Navigator وInternet Explorer. أضاف كلا الطرفين وسوما غير قياسية وخاصة بهما، ما خلق كابوس توافق استمر لسنوات. وبصفتي شخصا ما زال يصادف آثار تلك الحقبة في الشيفرات القديمة، أقول: نحن المطورين من دفع فاتورة ذلك الصراع لفترة طويلة.
في عام 2004 أعاد Firefox بعض الانتعاش إلى المشهد، وفي عام 2008 أعاد Chrome التوازن بفضل محركه السريع V8. اليوم توجد ثلاثة محركات عرض (rendering engines) على الساحة: Blink الذي يقوم عليه Chrome وEdge، وWebKit الخاص بـ Safari، وGecko الخاص بـ Firefox. ومع انتقال Edge إلى Chromium عام 2020، تقاربت المعايير إلى حد كبير في نقطة واحدة. كان هذا بمثابة راحة كبيرة بالنسبة لي؛ فلم أعد أصارع التناقضات بين المتصفحات كما كنت سابقا، وبات بإمكاني بدلا من ذلك النظر إلى أمور جديدة مثل WebAssembly وPWA وWebGPU.
المجموعة التقنية الحديثة: أكثر مما تبدو عليه
اليوم، لا يقتصر تطبيق الويب الجاد على الواجهة الأمامية فقط؛ بل هو كل متكامل تعمل فيه الواجهة الأمامية والخلفية وقاعدة البيانات والبنية التحتية معا. فإذا كنت أبني الواجهة الأمامية بـ React وNext.js وTypeScript، فهناك خلفها بنية تدير منطق الأعمال (business logic) عبر Node.js، وتتصل بقاعدة بيانات، وتتوسع باستخدام الحاويات (containers).
إن اختيار هذه الطبقات بشكل صحيح يحدد منذ البداية أداء المشروع وقدرته على النمو. وهذا هو السبب في أننا في Detartech نبني هذه المجموعة التقنية (stack) بشكل متكامل من جهة واحدة، من الألف إلى الياء: فعندما لا ترتبط الأجزاء ببعضها بشكل سليم، ينهار حتى أفضل frontend. لمن يرغب في معرفة جميع الأدوات التي نستخدمها، جمعنا مجموعتنا التقنية في صفحة منفصلة؛ ومن يرغب في بناء النظام كاملا معنا يمكنه الاطلاع على خدمة تطوير الويب لدينا.
محركات البحث وSEO: إذا لم يجده أحد، فهل هذا المحتوى موجود أصلا؟
مع نمو الويب ظهرت مشكلة جديدة: كيف تجد ما تبحث عنه بين ملايين الصفحات؟ في التسعينيات دخلت أسماء مثل AltaVista وYahoo هذا المجال، لكن Google غيّرت قواعد اللعبة عام 1998. لم ينظر PageRank الخاص بلاري بيدج وسيرجي برين إلى محتوى الصفحة فقط، بل إلى مصداقية الروابط المشيرة إليها أيضا. وهذه الفكرة التي تعامل الرابط باعتباره نوعا من "التصويت" ما زالت في صميم تحسين محركات البحث (SEO) الحديث.
أنظر إلى SEO باعتباره جزءا لا يتجزأ من عملي، لأن التطبيق الذي لا يجده أحد عديم الفائدة مهما كتب بشكل جيد. أفكر في الأمر تقريبا ضمن ثلاثة محاور: SEO التقني الذي يضمن قدرة برنامج الزحف على مسح الموقع وفهرسته دون عوائق (سرعة الموقع، Core Web Vitals، البيانات المهيكلة)؛ وSEO داخل الصفحة الذي يشمل العناوين والتسلسل الهرمي الدلالي وجودة المحتوى؛ وSEO خارج الصفحة الذي يتشكل من الروابط القادمة من مصادر موثوقة. ومن بين هذه المحاور، فإن الموقع السريع والسليم تقنيا يغطي نصف عمل SEO التقني أثناء كتابتي للشيفرة نفسها.
تغيرت طبيعة العمل أيضا في الآونة الأخيرة. لم يعد البحث مجرد "عشرة روابط زرقاء"؛ فأدوات مثل ChatGPT وPerplexity وGoogle AI Overviews أصبحت تقدم إجابة مباشرة للسؤال وتذكر المصادر. تسمى هذه الحقبة الجديدة GEO (تحسين المحركات التوليدية)؛ والهدف أن تظهر العلامة التجارية كمصدر في إجابات الذكاء الاصطناعي. وأضيف هنا أن SEO التقني وبنية المحتوى والعمل على المصداقية تشكل تخصصا منفصلا يجب تناوله بشكل متكامل؛ ونحن نقدم هذا كـخدمة SEO منفصلة.
فما الدرس الذي استخلصته من كل هذا؟
عند النظر إلى قصة الويب الممتدة ثلاثين عاما، أرى ما يلي: كل طبقة جديدة ظهرت لسد فجوة الطبقة السابقة. وضعت HTML البنية، وأضافت CSS المظهر، وجلبت JavaScript التفاعل؛ ونضّجت المتصفحات كل ذلك من خلال التنافس فيما بينها، وأعادت محركات البحث تعريف إمكانية الاكتشاف من جديد.
أكبر درس تعلمته كمطور هو أن الأساسيات لا تتغير. تتغير الأدوات كل عام، وتأتي الأطر (frameworks) وتذهب؛ لكن HTML ذا معنى، وCSS منضبطة، وJavaScript مفهومة فهما صحيحا، ونهج SEO مدروس منذ البداية، تظل جميعها العمود الفقري لمنتج ويب جيد. عندما أبدأ مشروعا جديدا، فإن السؤال الذي أطرحه على نفسي ليس "أي إطار عمل؟"، بل "هل أفهم هذا النظام حقا؟".
إذا كان لديك مشروع ويب عالي الأداء، ومتوافق مع SEO، وقابل للتوسع، وترغب في تحقيقه بملكية تقنية كاملة من الألف إلى الياء، يمكنك طلب اجتماع تمهيدي معنا.
