الخلاصة والمصادر
الخلاصة
- 1. ما هو إطار العمل؟ ولماذا لا نبدأ من الصفر: الإطار هيكل جاهز يتولّى الأعمال المتكرّرة (استقبال الطلب، التوجيه، التحقّق، الأخطاء، رسم الواجهة) وينادي دوالك في الوقت المناسب. أنت تنادي المكتبة، والإطار يناديك.
- 2. أنواع أطر العمل وكيف تختار: أين يعمل الإطار يحدّد نوعه: في المتصفح (React)، على الخادم (Express، FastAPI)، أو في الاثنين (Next.js). اختر حسب اللغة التي تعرفها ونوع ما تبنيه، وتعلّم إطارًا واحدًا جيدًا قبل الثاني.
- 3. Node.js وExpress: خادم بـ JavaScript: الطلب يمرّ في سلسلة وسائط بالترتيب. تحقّق من المدخلات، أعد الرمز الصحيح، واجعل معالج الأخطاء آخر حلقة في السلسلة.
- 4. FastAPI: واجهات بايثون حديثة: اكتب الأنواع مرة فتحصل على التحقّق والتوثيق والأخطاء الواضحة مجانًا. نموذج Pydantic هو عقد الواجهة.
- 5. React: واجهات من مكوّنات: الواجهة دالة في الحالة: UI = f(state). قسّم الصفحة لمكوّنات صغيرة، ومرّر البيانات للأسفل بالـ props، وغيّرها للأعلى بالدوال، ولا تعدّل الحالة مباشرة بل أنشئ نسخة جديدة.
- 6. Next.js: React مع خادم وتوجيه: المجلد مسار، والمكوّن خادمي افتراضيًا: يجلب البيانات ويرسل HTML جاهزًا. أضف "use client" فقط للقطعة الصغيرة التي تحتاج حالة أو أحداثًا في المتصفح.
قاموس المصطلحات
| المصطلح | التعريف | الجزء |
|---|---|---|
| إطار العمل | هيكل جاهز يتولّى الأعمال المتكرّرة وينادي كودك في الوقت المناسب. | 1 |
| المكتبة | مجموعة دوال جاهزة تناديها أنت متى شئت. | 1 |
| عكس التحكّم | الإطار يمسك الحلقة الرئيسية وينادي دوالك، لا العكس. | 1 |
| إطار واجهة | يعمل في المتصفح ويرسم الصفحة من الحالة: React، Vue. | 2 |
| إطار خادم | يستقبل الطلبات ويرد عليها: Express، FastAPI، Django. | 2 |
| إطار متكامل | واجهة وخادم في مشروع واحد: Next.js، Nuxt. | 2 |
| حلقة الأحداث | آلية Node لتنفيذ ما جهز من عمليات دون انتظار البطيء. | 3 |
| Middleware | دالة (req, res, next) في سلسلة معالجة الطلب. | 3 |
| req.params | قيم المقاطع الديناميكية مثل :id. | 3 |
| Pydantic | مكتبة تحقّق وتحويل بيانات من تلميحات الأنواع. | 4 |
| 422 | رد FastAPI حين تفشل البيانات في التحقّق. | 4 |
| Depends | حقن اعتمادية في مسار، قابلة للاستبدال في الاختبار. | 4 |
| UI = f(state) | الواجهة نتيجة الحالة؛ غيّر الحالة وReact يعيد الحساب. | 5 |
| المكوّن | دالة باسم يبدأ بحرف كبير تعيد JSX وتُستخدم كوسم. | 5 |
| JSX | شكل يشبه HTML داخل JavaScript يُترجم لـ createElement. | 5 |
| SSR | التصيير على الخادم: HTML يصل بالمحتوى جاهزًا. | 6 |
| App Router | توجيه Next.js بالمجلدات تحت app/. | 6 |
| page.tsx / layout.tsx | الصفحة نفسها / الغلاف المشترك الذي لا يُعاد رسمه. | 6 |
مصادر هذا الدرس
مرتّبة بالنوع. ابدأ بالتوثيق الرسمي إذا تبي المرجع الدقيق، وبالمقال أو الفيديو إذا تبي الشرح أولًا.
توثيق رسمي9
MDN: Server-side web frameworksما الذي يقدّمه إطار الخادم، وكيف تقارن بين الأطر، بأمثلة من Express وDjango.developer.mozilla.orgMDN: Introduction to client-side frameworksلماذا ظهرت أطر الواجهة، وما المشكلة التي تحلّها، ومقارنة بين أشهرها.developer.mozilla.orgExpress: Getting startedالتوثيق الرسمي من التثبيت إلى المسارات والوسائط.expressjs.comNode.js: The event loopشرح Node الرسمي لحلقة الأحداث ومراحلها.nodejs.orgFastAPI Tutorial - User Guideالدليل الرسمي خطوة بخطوة، من أوضح التوثيقات في عالم بايثون.fastapi.tiangolo.comPydantic documentationالنماذج والقيود والتحقّق المخصّص.docs.pydantic.devReact: Quick Startالتوثيق الرسمي الجديد، يبدأ من المكوّن الأول بأمثلة تفاعلية.react.devThinking in Reactطريقة تقسيم واجهة لمكوّنات وحالة.react.dev
خلّصت الدرس؟
سجّل الدخول ليُحفظ تقدّمك.