الهدف
بنهاية الدرس تقدر تشرح ليش البراوزر يحتاج ثلاث لغات، تفتح 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)