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

ملخص

أتقن Git مع conventional commits و GitHub Actions، وقم بالحوينة (containerize) باستخدام بناء Docker متعدد المراحل (multi-stage builds)، وابنِ واجهات 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 ورسائل الـ Commit: يجب أن يمثل الـ commit تغييراً منطقياً واحداً. اكتب رسائل commit واضحة. المعيار الصناعي في عام 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: ينشئ Merge "commit دمج" (يزحم التاريخ). بينما يقوم Rebase بإعادة كتابة التاريخ (أكثر نظافة). لتطوير الفريق، قم بعمل squash للـ commits أثناء دمج PR للحفاظ على نظافة الفرع الرئيسي.

طلبات السحب (Pull Requests): أكثر من مجرد مراجعة للكود، الـ PRs هي المكان الذي يحدث فيه التواصل بين أعضاء الفريق. استخدم قوالب 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@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npm run test
      - run: npm run lint

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

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

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

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

لماذا يهم Docker

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

أساسيات Dockerfile

ملف Dockerfile أساسي:

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build

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

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

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

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

# Runtime stage
FROM node:18-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 بتنسيق حاويات متعددة:

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

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

volumes:
  db-data:

باستخدام هذا، يقوم Docker-compose up بتشغيل بيئتك بالكامل محلياً، بما يطابق بيئة الإنتاج.

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

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

.devcontainer/devcontainer.json:

{
  "image": "mcr.microsoft.com/vscode/devcontainers/TypeScript-node:18",
  "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 مللي ثانية)
• أحجام حزم (bundle sizes) أصغر
• نظام إضافات أفضل

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

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

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

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

ميزات React 19 التي تستحق المعرفة

يتضمن React 19 (الذي صدر في 5 ديسمبر 2024):

• Server Components (مستقر): دوال تعمل فقط على الخادم، مما يقلل من JavaScript في جانب العميل
• useFormStatus hook: ربط بحالة إرسال النموذج دون تتبع يدوي
• Automatic Batching (أصبح عالمياً الآن): يتم تجميع التحديثات معاً لتحسين الأداء

بالنسبة لمعظم المشاريع، فإن استخدام Next.js (الذي يطبق Server Components افتراضياً) يتولى هذه الأمور. ميزات React 19 المباشرة تهم أكثر أطر العمل مثل Remix.

TypeScript في React

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

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

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

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

• Props: واجهة لخصائص المكون (component props)
• State: نوع لقيم useState
• معالجات الأحداث (Event handlers): 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: بديل لـ Node.js مكتوب بلغة Rust. تثبيت حزم فائق السرعة، دعم أصلي لـ TypeScript، مجمع (bundler)، ومشغل اختبارات. لا يزال جديداً نسبياً ولكنه يكتسب شعبية.

الـ Monorepos: Turborepo و Nx

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

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

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

جودة الكود

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

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

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

Husky: خطافات Git (Git hooks) للأتمتة. قم بتشغيل الاختبارات/linting قبل السماح بالـ commits:

npx husky add .husky/pre-commit "npm run lint"

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

1. إنشاء فرع: git checkout -b feature/new-component
2. التطوير: البرمجة محلياً باستخدام خادم تطوير Vite (تحديث مباشر)
3. الاختبار: npm run test (Vitest)
4. الـ Linting: npm run lint (ESLint, Prettier)
5. الـ Commit: git commit -m "feat(components): add button variants"
6. الـ Push: git push origin feature/new-component

طلب السحب (PR): إنشاء طلب سحب على GitHub

التكامل والنشر المستمر (CI/CD): تقوم GitHub Actions بتشغيل الاختبارات، وفحص التنسيق (linting)، وبناء صورة Docker

المراجعة: يقوم الفريق بمراجعة الكود

الدمج: دمج التغييرات (Squash and merge) في الفرع الرئيسي (main)

النشر: تقوم GitHub Actions بالنشر في بيئة الإنتاج

الخلاصة

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

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

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