أدوات تطوير الويب مع التركيز على git و Docker و React

ملخص

أتقن Git مع الالتزامات التقليدية (conventional commits) و GitHub Actions، واستخدم الحاويات (containerize) مع بناءات Docker متعددة المراحل، وابنِ واجهات React باستخدام Vite (وليس Create React App الذي تم إيقافه)، وتوسع باستخدام أدوات حديثة مثل Bun و Turborepo و pnpm لتبسيط سير عمل التطوير والنشر.

تطورت أدوات تطوير الويب بشكل كبير. ما كان متطوراً في عام 2020 أصبح قديماً في عام 2026. تم إيقاف Create React App. لم يعد npm هو مدير الحزم الافتراضي للعديد من الفرق. مهارات Docker أصبحت من الأساسيات. ولم يعد CI/CD اختيارياً.

يغطي هذا الدليل الأدوات المهمة في تطوير الويب الاحترافي اليوم، مع التركيز على Git و Docker و React — الثلاثي الذي يتولى التحكم في المصدر، والنشر، وواجهات المستخدم.

Git: التحكم في الإصدارات كبنية تحتية

Git ليس مجرد نظام للتحكم في الإصدارات؛ إنه العمود الفقري لتطوير الفريق. الإتقان يعني أكثر من مجرد git push و git pull.

المفاهيم الأساسية التي تحتاجها

الالتزامات (Commits) ورسائل الالتزام: يجب أن يمثل الالتزام تغييراً منطقياً واحداً. اكتب رسائل التزام واضحة. المعيار الصناعي في عام 2026 هو الالتزامات التقليدية (Conventional Commits):

type(scope): subject

body

footer

مثال:

feat(auth): add JWT token refresh mechanism

Implement automatic token refresh on API requests.
Store refresh token in secure cookie. Add tests for edge cases.

Fixes #456
Refs #789

الأنواع: feat، fix، docs، style، refactor، test، chore، perf

يتيح هذا التنسيق التوليد التلقائي لسجل التغييرات (changelog) ويجعل تاريخ git مقروءاً.

الفروع (Branches): استخدم فروع الميزات (feature branches). سير العمل النموذجي:

• الفرع الرئيسي Main (جاهز للإنتاج)
• فرع التطوير Develop (فرع التكامل)
• فروع الميزات Feature (فرع لكل ميزة)

اصطلاح تسمية الفروع: feature/user-auth، fix/sidebar-overflow، docs/API-guide

الدمج (Merge) مقابل إعادة التأسيس (Rebase): الدمج ينشئ التزام دمج (يزحم التاريخ). إعادة التأسيس تعيد كتابة التاريخ (أكثر نظافة). لتطوير الفريق، قم بضغط الالتزامات (squash) أثناء دمج طلب السحب (PR) للحفاظ على نظافة الفرع الرئيسي.

طلبات السحب (Pull Requests): أكثر من مجرد مراجعة للكود، طلبات السحب هي المكان الذي يحدث فيه تواصل الفريق. استخدم قوالب PR لتوحيد المعلومات:

## Description
What does this PR do?

## Testing
How was this tested?

## Screenshots
(if UI change)

## Related Issues
Fixes #123

GitHub وسير العمل المتقدم

GitHub Actions: أتمتة الاختبار، والتدقيق (linting)، والنشر مع كل عملية دفع (push). سير العمل الأساسي:

name: Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm install
      - run: npm run test
      - run: npm run lint

يعمل هذا تلقائياً مع كل عملية دفع. الاختبارات الفاشلة تمنع الدمج في الفرع الرئيسي.

إدارة الأسرار (Secrets Management): استخدم GitHub Secrets لمفاتيح API وبيانات الاعتماد. لا تقم أبداً برفع ملفات .env التي تحتوي على قيم حقيقية.

Docker: الحاويات والنشر

يقوم Docker بتغليف تطبيقك وتوابعه في حاوية — مما يضمن عمله بنفس الطريقة في كل مكان.

لماذا يهم Docker

يتم القضاء على عدم تطابق بيئة التطوير ("يعمل على جهازي"). النشر يصبح قابلاً للتكرار. التوسع يصبح ممكناً. في عام 2026، إذا لم يكن تطبيقك داخل حاوية، فأنت متأخر.

أساسيات Dockerfile

ملف Dockerfile أساسي:

FROM node:22-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

لكن هذا بسيط للغاية: الصورة الناتجة ستكون ضخمة.

البناءات متعددة المراحل (الطريقة الحديثة)

# Build stage
FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Runtime stage
FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY package*.json ./
EXPOSE 3000
CMD ["npm", "start"]

تؤدي البناءات متعددة المراحل إلى صور نهائية أصغر بكثير من خلال استبعاد توابع البناء.

Docker Compose للتطوير المحلي

ملف Dockerfile وحده لا يكفي. من المحتمل أنك تحتاج إلى قاعدة بيانات، وذاكرة كاش، وما إلى ذلك. يقوم Docker Compose بتنسيق حاويات متعددة:

services:
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgres://user:pass@db:5432/app

  db:
    image: postgres:17-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: app
    volumes:
      - db-data:/var/lib/postgresql/data

volumes:
  db-data:

(مفتاح version: في المستوى الأعلى لم يعد مطلوباً في Docker Compose v2 وسيتسبب في تحذير إذا تم تضمينه.)

باستخدام هذا، فإن أمر Docker compose up (أصبح Compose v2 الآن إضافة لـ Docker CLI — لاحظ المسافة، وليس الواصلة) يقوم بتشغيل مجموعتك البرمجية بالكامل محلياً، بما يطابق بيئة الإنتاج.

حاويات التطوير (Dev Containers)

يدعم Visual Studio Code و GitHub Codespaces حاويات التطوير: حاويات Docker كبيئة تطوير خاصة بك. يستخدم فريقك بالكامل بيئات متطابقة (نفس إصدار Node، نفس PostgreSQL، إلخ).

.devcontainer/devcontainer.json:

{
  "image": "mcr.microsoft.com/devcontainers/TypeScript-node:22",
  "postCreateCommand": "npm install",
  "forwardPorts": [3000, 5432]
}

React: بناء واجهات المستخدم

لا يزال React هو مكتبة واجهة المستخدم المهيمنة. لقد تغيرت الأدوات المحيطة به بشكل كبير منذ عام 2024.

Vite: المعيار الجديد (وليس Create React App)

تم إيقاف Create React App (CRA) رسمياً اعتباراً من 14 فبراير 2025. استخدم Vite بدلاً منه.

لماذا Vite أفضل:

• بدء تشغيل خادم التطوير فوري (CRA: أكثر من 30 ثانية؛ Vite: أقل من ثانية واحدة)
• استبدال سريع للوحدات (HMR) (CRA: 3-5 ثوانٍ؛ Vite: أقل من 100 مللي ثانية)
• أحجام حزم أصغر
• نظام إضافات أفضل

إعداد React باستخدام Vite:

npm create vite@latest my-app -- --template React
cd my-app
npm install
npm run dev

هذا كل شيء. لديك تطبيق React مع:

• خادم تطوير Vite
• تحسين بناء الإنتاج
• حل الوحدات (Module resolution)
• دعم وحدات CSS

ميزات React 19 الجديرة بالمعرفة

يتضمن React 19 (الذي صدر في 5 ديسمبر 2024؛ وأحدث إصدار فرعي حتى منتصف 2026 هو 19.2) ما يلي:

• مكونات الخادم (Server Components) (مستقرة): مكونات تعمل فقط على الخادم، مما يقلل من JavaScript في جانب العميل
• الإجراءات (Actions) و useActionState: وظائف غير متزامنة من الدرجة الأولى لعمليات إرسال النماذج والتعديلات، مع حالة انتظار ومعالجة أخطاء مدمجة
• خطاف useFormStatus: قراءة حالة الإرسال لنموذج <form> أب من أي مكون تابع دون الحاجة لتمرير الخصائص (prop drilling)
• خطاف useOptimistic: إظهار تحديثات واجهة المستخدم المتفائلة أثناء تنفيذ تعديل على الخادم
• الجديد use API: قراءة الوعود (promises) والسياق (context) بشكل مشروط داخل العرض (render)
• بيانات الوثيقة الوصفية (Document metadata): عرض وسوم <title> و <meta> و <link> مباشرة في المكونات — يقوم React برفعها إلى رأس المستند تلقائياً

(يُنسب التجميع التلقائي أحياناً إلى React 19 — ولكنه شُحن فعلياً في React 18.)

بالنسبة لمعظم المشاريع، يعد استخدام إطار عمل مثل Next.js (الذي يطبق مكونات الخادم والإجراءات بشكل افتراضي) هو المسار الأسهل لهذه الميزات.

TypeScript في React

لم يعد استخدام TypeScript في React اختيارياً. يتضمن قالب Vite الخاص بك TypeScript بشكل افتراضي:

interface UserProps {
  name: string;
  age: number;
}

export function User({ name, age : UserProps) {
  return <div>{name, {age</div>;
}

الأنواع الرئيسية:

• الخصائص (Props): واجهة لخصائص المكون
• الحالة (State): نوع لقيم useState
• معالجات الأحداث: React.ChangeEvent، React.FormEvent

اختبار المكونات

تعد Vitest (أداة تشغيل الاختبارات من Vite) و React Testing Library هما المعيار الحديث:

import { render screen } from '@testing-library/React';
import { User } from './User';

describe('User' () => {
  it('renders user info' () => {
    render(<User name="Alice" age={30} />);
    expect(screen.getByText('Alice, 30')).toBeInTheDocument();
  });
});

الأدوات المساعدة

مديرو الحزم: pnpm و Bun

npm مقابل pnpm: يعد pnpm أسرع بمرتين إلى ثلاث مرات، ويستخدم مساحة قرص أقل بنسبة 50%، ولديه حل أفضل للتوابع. لقد انتقلت العديد من الفرق إليه.

Bun: بيئة تشغيل JavaScript متكاملة، وأداة تجميع (bundler)، ومشغل اختبارات، ومدير حزم — مكتوب بلغة Zig ومدعوم بـ JavaScriptCore. تثبيت فائق السرعة للحزم، ودعم أصلي لـ TypeScript. صُمم كبديل مباشر لـ Node.js، مع توافق بنسبة 95% تقريباً مع Node اعتباراً من عام 2026. يستخدم في الإنتاج من قبل الفرق التي يمكنها تحمل بعض الحالات الاستثنائية للحزم.

المستودعات الموحدة (Monorepos): Turborepo و Nx

غالباً ما تستخدم المشاريع الكبيرة مستودعات موحدة: حزم متعددة في مستودع واحد. يبسط Turborepo هذا الأمر:

{
  "tasks": {
    "build": {
      "outputs": ["dist/**"],
      "cache": true
    }
  }
}

يقوم Turborepo بتخزين عمليات البناء (builds) مؤقتاً، لذا فإن إعادة بناء الحزم غير المتغيرة تتم بشكل فوري.

جودة الكود

ESLint: الـ Linting يفرض قواعد جودة الكود. إعداد حديث (2026):

{
  "extends": ["eslint:recommended", "plugin:React/recommended"],
  "parserOptions": {
    "ecmaVersion": 2024,
    "sourceType": "module"
  }
}

Prettier: التنسيق التلقائي. لا مزيد من الجدالات حول أسلوب الكتابة. كود الجميع سيبدو متطابقاً.

Husky: خطافات Git (Git hooks) للأتمتة. قم بتشغيل الاختبارات/الـ linting قبل السماح بالـ commits. تم إزالة أمر husky add القديم في Husky v9 (2024)؛ الإعداد الحديث ينشئ ملف الخطاف مباشرة:

# In package.json: "prepare": "husky"
npm install --save-dev husky
npx husky init
echo "npm run lint" > .husky/pre-commit

سير عمل التطوير النموذجي

1. الفرع (Branch): git checkout -b feature/new-component
2. التطوير: البرمجة محلياً باستخدام خادم تطوير Vite (تحديث فوري)
3. الاختبار: npm run test (Vitest)
4. الـ Lint: npm run lint (ESLint, Prettier)
5. الـ Commit: git commit -m "feat(components): add button variants"
6. الـ Push: git push origin feature/new-component
7. الـ PR: إنشاء طلب سحب (pull request) على GitHub
8. CI/CD: تقوم GitHub Actions بتشغيل الاختبارات، الـ linting، وبناء صورة Docker
9. المراجعة: الفريق يراجع الكود
10. الدمج (Merge): دمج التغييرات (Squash and merge) في الفرع الرئيسي (main)
11. النشر: تقوم GitHub Actions بالنشر في بيئة الإنتاج

الخلاصة

لقد نضجت أدوات تطوير الويب بشكل كبير. حل Vite محل Create React App. وتتحدى pnpm و Bun نظام npm. أصبح Docker من الأساسيات التي لا غنى عنها. أصبحت مسارات عمل Git معيارية. وأصبح الـ CI/CD تلقائياً.

إتقان هذه الأدوات هو ما يميز المطورين المبتدئين عن المحترفين. المبتدئ يكتب كوداً يعمل، أما المحترف فيكتب كوداً قابلاً للنشر، والاختبار، والصيانة. هذه الأدوات هي ما تمكنك من تحقيق تلك الاحترافية.

ركز على إتقان هذه المجموعة بعمق: Git للتحكم في الإصدارات، Docker للنشر، React مع Vite لواجهة المستخدم، TypeScript للأمان، و GitHub Actions للأتمتة. هذه المجالات الخمسة تغطي 80% مما تحتاجه لإطلاق تطبيقات ويب بجودة الإنتاج.