الـ Frontend: شنو يشتغل في البراوزر

الهدف

بنهاية الدرس تقدر تشرح ليش البراوزر يحتاج ثلاث لغات، تفتح DevTools وتشوف الـ DOM، وتتبع network request من أول ما تكتب URL لحين ما الصفحة تطلع.

ليش هذا الحين؟

ترى كل مطور تشغّله — سواء فريلانسر أو CTO — يستخدم كلمات "frontend" و"component" و"render" بشكل يومي. لو ما تفهم شنو يصير في البراوزر، ما تقدر تحكم على الشغل، وما تقدر تفهم ليش الصفحة بطيئة أو مكسورة. هذا مو درس نظري — هذا أساس كل تاجر يحتاجه.

الفكرة

البراوزر = viewer للوثائق يشغّل كود. والموضوع كله ثلاث طبقات:

HTML = الهيكل. كل عنصر تشوفه — زر، عنوان، صورة — هو HTML tag. البراوزر يقرأه ويبني منه شجرة اسمها DOM (Document Object Model).

CSS = المظهر. لون، حجم، مسافات. الـ CSS يطبّق على عناصر الـ DOM ويحدد شكلها.

JavaScript = السلوك. كل شي يتحرك أو يتغير بعد ما الصفحة طلعت — نقرة زر، modal يفتح، بيانات تطلع من السيرفر — هذا JS.

React / Next.js شنو دورهم؟ بدل ما تكتب HTML يدويا، تكتب components — قطع تقدر تعيد استخدامها بأي مكان. Next.js يضيف Server-Side Rendering: الـ HTML يتبنى على السيرفر أولا ويوصل للبراوزر جاهز، يعني سرعة أحسن و SEO أفضل. هالسبب الوحيد اللي تحتاجه لاختيار Next.js — مو لأنه "popular."

رحلة الـ request:

1. تكتب URL → 2. Browser يرسل HTTP request → 3. Server يرد بـ HTML
→ 4. Browser يقرأ HTML ويبني DOM → 5. يجيب CSS ويطبّقه
→ 6. يجيب JS ويشغّله → 7. الصفحة تطلع (paint)

سوّها

ترى هذا تمرين عملي — افتح أي موقع وانت تقرأ.

الخطوات:

1. افتح google.com في Chrome أو Safari.

2. افتح DevTools: على Mac اضغط Cmd + Option + I، على Windows F12. هذي أول مرة تقدر تشوف الـ internals.

3. روح لـ Elements tab. شف الـ HTML. الحين اضغط على أي element — مثلا زر البحث. تشوف الـ tag اللي يمثّله. صح؟

4. المفروض تشوف جانبه Styles panel. هالـ CSS المطبّق على هالعنصر. غيّر لون بشكل مباشر — اكتب color: red — وشف التغيير الحين على الصفحة. بس ترى هالتغيير ما ينحفظ — مؤقت وبس.

5. روح لـ Console tab. اكتب:

   document.title
   

   اضغط Enter. تشوف عنوان الصفحة. هذا JS يشتغل مباشرة في البراوزر — أول مرة تحرّك الـ console بنفسك.

6. جرّب:

   document.querySelector('input').style.background = 'yellow'
   

   شف الـ search box صار أصفر. أنت الحين تعدّل الـ DOM مباشرة — وهذي قوة الـ JavaScript.

7. روح لـ Network tab. سوّ refresh للصفحة (Cmd + R). شف الـ requests اللي طلعت. اضغط على أول request — هذا طلب الصفحة نفسها. شف:

   • Status: المفروض 200 = ناجح
   • Response Headers: معلومات من السيرفر
   • Preview: الـ HTML اللي رجع

8. جذي صرت تعرف كيف الصفحة وصلت: request → HTML → CSS + JS → paint. خوش فهم.

تأكّد

• DevTools مفتوح وتشوف الـ Elements tab ✓
• غيّرت لون عنصر بالـ Styles panel ✓
• شغّلت document.title في Console ✓
• شفت الـ network request الأول و status code ✓

لو أي خطوة ما اشتغلت — أكثر سبب شائع هو browser extension يخبّي DevTools. جرّب Incognito Mode (Cmd + Shift + N).

إذا خرب شي

"الصفحة مكسورة بس الـ HTML موجود" → الأغلب JS error. روح Console، شف الـ errors باللون الأحمر.

"الـ CSS ما يطبّق" → يمكن أكو rule ثاني أقوى (higher specificity). في Styles panel، الـ rules المشطوبة = overridden.

"الـ network request فاشل" → Status 4xx = مشكلة في طلبك (URL غلط أو ما عندك permission). Status 5xx = مشكلة في السيرفر.

"الصفحة بطيئة" → Network tab → روح لـ Waterfall. أي request طويل يعطّل اللي بعده.

شنو بعد؟

الدرس الجاي: الـ Backend — الجانب الثاني من المعادلة. البراوزر يطلب، السيرفر يرد. تعرف شنو يصير على الجانب الثاني.