---
title: 'تعلم Svelte: الدليل الحديث لبناء تطبيقات ويب فائقة السرعة'
description: دليل عميق وعملي وودود لإتقان Svelte — يغطي الأساسيات، والأداء، وحالات الاستخدام الواقعية، والأنماط الجاهزة للإنتاج.
url: https://nerdleveltech.com/ar/learn-svelte-the-modern-guide-to-building-lightningfast-web-apps
language: ar
date: '2025-11-24'
category: frontend
tags:
- Svelte
- JavaScript
- Frontend
- Web Development
- Performance
- Reactive Programming
- Frameworks
markdown_url: https://nerdleveltech.com/ar/learn-svelte-the-modern-guide-to-building-lightningfast-web-apps.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/ar/learn-svelte-the-modern-guide-to-building-lightningfast-web-apps'
terms: https://nerdleveltech.com/llms.txt
---
# تعلم Svelte: الدليل الحديث لبناء تطبيقات ويب فائقة السرعة
## ملخص
- **Svelte** يقوم بترجمة مكوناتك إلى JavaScript خام عالية الكفاءة — بدون أعباء إضافية لإطار العمل وقت التشغيل.
- إنه **تفاعلي بطبيعته**، مما يعني أن تغييرات الحالة تقوم بتحديث DOM تلقائيًا دون الحاجة لعملية diffing في الـ virtual DOM.
- ستتعلم كيفية **بناء واختبار ونشر** تطبيق Svelte من الصفر.
- سنستكشف **الأداء والأمان وقابلية التوسع**، و **رؤى من واقع الإنتاج الفعلي**.
- يتضمن **أمثلة قابلة للتشغيل**، و **الأخطاء الشائعة**، ونصائح **استكشاف الأخطاء وإصلاحها**.
---
## ما ستتعلمه
1. ما الذي يجعل Svelte مختلفًا عن React و Vue و Angular.
2. كيفية إعداد بيئة Svelte حديثة في أقل من 5 دقائق.
3. كيفية عمل التفاعلية (reactivity) والمخازن (stores) تحت الغطاء.
4. كيفية تحسين واختبار ومراقبة تطبيقات Svelte في بيئة الإنتاج.
5. متى تستخدم (ولا تستخدم) Svelte في المشاريع الحقيقية.
---
## المتطلبات الأساسية
ستحقق أقصى استفادة من هذه المقالة إذا كنت:
- تعرف أساسيات **HTML و CSS و JavaScript**.
- استخدمت إطار عمل للواجهة الأمامية مثل React أو Vue.
- لديك **Node.js v18+** مثبتًا[^1].
---
## مقدمة: لماذا يهم Svelte اليوم
Svelte ليس مجرد إطار عمل JavaScript آخر — إنه **مترجم (compiler)**. بدلاً من شحن وقت تشغيل (runtime) كبير مثل React أو Vue، يقوم Svelte بتحويل مكوناتك إلى JavaScript عالي التحسين في وقت البناء[^2]. النتيجة؟ حزم أصغر، وأوقات تشغيل أسرع، وتعقيد أقل.
تم إطلاق Svelte 5 في 19 أكتوبر 2024[^9] وقدم **runes** — وهو نموذج تفاعلية صريح مبني على `$state`، و `$derived`، و `$effect`، و `$props`. يستخدم هذا الدليل صيغة runes في جميع أجزائه لأنها الطريقة الحالية والموصى بها لكتابة Svelte. لا تزال صيغة Svelte 4 القديمة (`export let`، وتصريحات التفاعلية `$:`) تعمل، لكن مسار الهجرة واضح: الـ runes هي المستقبل، وهي بالفعل الوضع الافتراضي للمشاريع الجديدة.
تم إنشاء Svelte بواسطة **Rich Harris**، في الأصل للرسومات الإخبارية التفاعلية في صحيفة *The Guardian*، حيث كان الأداء ووقت التحميل أمرين حاسمين[^3]. ومنذ ذلك الحين، تطور إلى إطار عمل جاهز للإنتاج تستخدمه شركات كبرى مثل *Square Enix* و *Rakuten*[^4].
دعونا نستكشف ما الذي يجعل Svelte مقنعًا للغاية.
---
## كيف يختلف Svelte عن أطر العمل الأخرى
إليك مقارنة مفاهيمية سريعة:
| الميزة | React | Vue | Svelte |
| ------------------------------------ | ------------------- | ------------------- | -------------------------------- |
| الرندرة (Rendering) | Virtual DOM diffing | Virtual DOM diffing | يترجم إلى تحديثات JS خام |
| حجم وقت التشغيل (Hello World، مضغوط) | \~42–45 KB | \~30 KB | \~3–5 KB[^6] |
| منحنى التعلم | متوسط | متوسط | سهل |
| دعم TypeScript | ممتاز | ممتاز | مدمج (Svelte 5+) |
| إدارة الحالة | Hooks / Context | Pinia | Runes (`$state`) + مخازن تفاعلية |
| دعم SSR | Next.js | Nuxt | SvelteKit |
أكبر ابتكار في Svelte هو **الترجمة (compilation)**. بدلاً من تفسير تطبيقك في وقت التشغيل، يقوم Svelte بمعالجته مسبقًا، مما يولد عمليات DOM فعالة.
---
## البداية: تطبيقك الأول بـ Svelte
### الخطوة 1: إنشاء مشروع جديد
واجهة السطر البرمجي الرسمية لـ Svelte هي `sv`. وهي تحل محل حزمة `create-svelte` القديمة وتجمع أدوات التنسيق، والـ linting، والاختبار، وقواعد البيانات، والمصادقة كإضافات اختيارية[^10].
```bash
npx sv create my-svelte-app
cd my-svelte-app
npm install
npm run dev
```
اختر قالب **Svelte** (للمكونات فقط) أو **SvelteKit** (للتطبيقات الكاملة) عند سؤالك. افتح `http://localhost:5173` وسترى أول تطبيق Svelte لك يعمل.
### الخطوة 2: فهم هيكل الملفات
```
my-svelte-app/
├── src/
│ ├── App.svelte
│ ├── main.js
│ └── lib/
├── package.json
└── vite.config.js
```
- **App.svelte** – المكون الجذري الخاص بك.
- **main.js** – يقوم بتشغيل التطبيق.
- **lib/** – مكونات قابلة لإعادة الاستخدام.
### الخطوة 3: مكونك الأول
```svelte
Hello {name}!
```
الـ rune المسمى `$state` يميز `name` كمتغير تفاعلي. أي قراءة لـ `name` في القالب (أو في `$derived` / `$effect`) يتم إعادة تشغيلها عند تغييره — لا حاجة لـ `useState`، ولا `setState`، ولا كود متكرر. في Svelte 4 كان الـ `let` العادي تفاعليًا بشكل ضمني؛ أما Svelte 5 فقد جعل التفاعلية صريحة لتعمل بنفس الطريقة داخل ملفات `.svelte` و `.svelte.ts` و `.svelte.js`[^11].
---
## فهم التفاعلية في Svelte
في Svelte 5، تقوم بتمييز الحالة باستخدام rune الـ `$state`. بعد ذلك، تؤدي عمليات التعيين لهذه الحالة إلى إطلاق تحديثات دقيقة للـ DOM.
```svelte
```
للقيم المحسوبة (computed values)، استخدم `$derived`:
```svelte
{count} × 2 = {doubled}
```
للآثار الجانبية (side effects) مثل التسجيل في الكونسول، أو المزامنة مع localStorage، أو استدعاء واجهات البرمجة التطبيقية، استخدم `$effect`:
```svelte
```
قارن ذلك بـ React:
```JavaScript
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
```
نهج Svelte يلغي مفهوم الـ virtual DOM تمامًا[^2]. فهو يعرف *بالضبط* أي عقد DOM يجب تحديثها.
---
## إدارة الحالة: المخازن والسياق
للحالة المشتركة، يوفر Svelte **المخازن (stores)** — وهي كائنات تفاعلية يمكن استيرادها في أي مكان.
### مثال على مخزن قابل للكتابة (Writable Store)
```JavaScript
// src/lib/store.js
import { writable } from 'svelte/store';
export const user = writable({ name: 'Alice', loggedIn: false });
```
الاستخدام:
```JavaScript
```
البادئة `$` تقوم بالاشتراك وإلغاء الاشتراك تلقائيًا من المخزن — بشكل نظيف وتصريحي.
---
## SvelteKit: إطار العمل المتكامل (Full‑Stack)
بالنسبة للتوجيه (routing)، والرندرة من جانب الخادم (SSR)، ونقاط نهاية API، فإن SvelteKit هو الحل الرسمي[^5]. وهو مشابه في جوهره لـ Next.js.
### البداية السريعة مع SvelteKit
```bash
npx sv create my-app
cd my-app
npm install
npm run dev
```
عند سؤالك، اختر قالب **SvelteKit**[^10].
يدعم SvelteKit:
- **الرندرة من جانب الخادم (SSR)**
- **توليد المواقع الثابتة (SSG)**
- **مسارات API**
- **التوجيه القائم على الملفات**
### مسار مثال
`src/routes/+page.svelte`
```svelte
Welcome {data.name}
```
`src/routes/+page.js`
```JavaScript
export function load() {
return { name: 'Svelte Learner' };
}
```
في Svelte 4 كانت الصفحة ستستخدم `export let data`. يستبدل Svelte 5 الـ `export let` بـ rune الـ `$props`، وهو تفكيك (destructure) صريح وواحد لكل ما يستقبله المكون — بما في ذلك الـ props الخاصة بـ SvelteKit مثل `data` و `params`[^11].
---
## تعمق في الأداء
تصميم Svelte القائم على المترجم (compiler-first) يمنحه **أفضلية في الأداء** في عدة مجالات:
1. **لا يوجد diffing للـ virtual DOM** – تحديثات الـ DOM دقيقة جراحياً.
2. **حزم (bundles) أصغر** – عادة ما تكون أصغر بنسبة 30-50% من مكافئات React في التطبيقات الحقيقية[^6].
3. **hydration أسرع** – خاصة في إعدادات SSR.
### مثال لمقارنة الأداء (النطاق النموذجي، gzipped)
| الإطار (Framework) | حجم الحزمة (Hello World) | ملاحظات |
| ------------------ | ------------------------ | -------------------------------------- |
| React + ReactDOM | \~42–45 KB | الأساس قبل أي كود للتطبيق[^6] |
| Vue | \~30 KB | يشمل وقت التشغيل (runtime) |
| Svelte | \~3–5 KB | مخرجات مترجمة؛ لا يوجد وقت تشغيل مشترك |
*الفجوة في "Hello World" هي الأكبر التي ستراها على الإطلاق. بمجرد شحن التوجيه (routing)، والنماذج (forms)، والحالة (state)، تتقارب التطبيقات الواقعية — لكن Svelte لا يزال يميل إلى أن يكون أخف بنسبة 30-50%[^6]. في [krausest js-framework-benchmark](https://krausest.GitHub.io/js-framework-benchmark/)، يقع Svelte في الفئة العليا لعمليات create/swap-rows واستخدام الذاكرة.*
---
## متى تستخدم ومتى لا تستخدم Svelte
| استخدم Svelte عندما | تجنب Svelte عندما |
| ---------------------------------- | ------------------------------------------------ |
| تريد حزمة بحجم أدنى وتشغيل سريع | تعتمد بشكل كبير على مكتبات طرف ثالث لـ React/Vue |
| تفضل البساطة القائمة على المترجم | فريقك مستثمر بعمق في أدوات React |
| تبني تطبيقات ثابتة (static) أو SSR | تحتاج إلى React Native أو دعم متعدد المنصات |
| تقدر التفاعلية المباشرة والبسيطة | تتطلب تكاملات مع نظام بيئي ضخم |
يتألق Svelte في **التطبيقات الصغيرة إلى المتوسطة**، **لوحات التحكم (dashboards)**، و**واجهات المستخدم التفاعلية**. بالنسبة للأنظمة المؤسسية الضخمة ذات التبعيات القديمة الثقيلة، قد تظل React أو Angular خيارات أكثر أماناً.
---
## الأخطاء الشائعة والحلول
| الخطأ | السبب | الحل |
| ------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| الحالة لا تتحدث | استخدام `let` العادية بدلاً من `$state` (Svelte 5+) | غلف المتغيرات التفاعلية: `let count = $state(0)` |
| تعديل المصفوفة/الكائن لا يحدث الواجهة | التعديل المباشر (`arr.push(x)`) على قيمة `$state` | أعد التعيين أو استخدم أنماط الحالة العميقة؛ انظر "الأخطاء الشائعة" أدناه |
| الـ Store ليس تفاعلياً | عدم استخدام صيغة الاشتراك التلقائي `$store` | أضف بادئة `$` في القوالب: `{$user.name}` |
| عدم تطابق الـ Hydration في SSR | بيانات غير حتمية (مثل `Date.now()` على الخادم) | تأكد من أن الخادم والعميل يقدمان مخرجات متطابقة |
| TypeScript لا يعمل | مشروع قديم يفتقد للإعدادات | يحتوي Svelte 5+ على دعم مدمج لـ TypeScript؛ بالنسبة لمشاريع Svelte 4 القديمة، أضف `svelte-preprocess` في `svelte.config.js` |
---
## أنماط معالجة الأخطاء
يوفر SvelteKit ملف `+error.svelte` مدمجاً لحدود الأخطاء العالمية.
### مثال
`src/routes/+error.svelte`
```svelte
Something went wrong
{page.error?.message}
```
في SvelteKit الحديث، تأتي تفاصيل الخطأ من كائن الحالة `page` بدلاً من prop الـ `export let error`[^5].
بالنسبة للأخطاء على مستوى المكون، استخدم كتل try/catch أو حدود الأخطاء في دوال المنطق.
---
## اختبار تطبيقات Svelte
اختبار مكونات Svelte بسيط ومباشر باستخدام **Vitest** أو **Playwright**.
### مثال لاختبار الوحدة (Unit Test)
```bash
npm install -D vitest @testing-library/svelte
```
`App.test.js`
```JavaScript
import { render, screen } from '@testing-library/svelte';
import App from './App.svelte';
test('renders greeting', () => {
render(App);
expect(screen.getByText('Hello world!')).toBeTruthy();
});
```
تشغيل الاختبارات:
```bash
npm run test
```
---
## المراقبة والقابلية للملاحظة
في بيئة الإنتاج، يمكنك دمج تطبيقات Svelte مع أدوات المراقبة مثل **Sentry**، **Datadog**، أو **OpenTelemetry**.
### مثال: تكامل Sentry
```JavaScript
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
tracesSampleRate: 1.0,
});
```
يدعم SvelteKit الـ hooks لتسجيل (logging) وتتبع الطلبات.
---
## الاعتبارات الأمنية
يتبع Svelte مبادئ أمان الويب القياسية[^7]:
- **تجاوز HTML (Escaped HTML) افتراضياً** – يمنع هجمات XSS.
- **يتم تطهير الـ Props** ما لم يتم تعليمها صراحةً كآمنة.
- **استخدم `{@html}` بحذر** – فقط مع المحتوى الموثوق.
### مثال: HTML آمن مقابل غير آمن
```JavaScript
{userInput}
{@html userInput
```
اتبع توصيات OWASP لأمان جانب العميل[^8].
---
## رؤى حول القابلية للتوسع
يتوسع Svelte بشكل جيد للعديد من تطبيقات الإنتاج، ولكن ضع في اعتبارك:
- **تقسيم الكود (Code splitting)** عبر الاستيرادات الديناميكية.
- **تخزين SSR المؤقت (caching)** للصفحات ذات الزيارات العالية.
- **تجزئة الـ Store** للحالات المعقدة.
غالباً ما تستخدم الفرق واسعة النطاق **SvelteKit + Vercel أو Netlify** للنشر، مستفيدة من التخزين المؤقت عند الحافة (edge caching) والتقديم المسبق الثابت (static pre-rendering).
---
## دراسة حالة واقعية: لوحات التحكم التفاعلية
حالة استخدام شائعة لـ Svelte هي **لوحات تحكم تصور البيانات**. ولأن Svelte يترجم إلى حد أدنى من JS، فهو مثالي لتضمين الرسوم البيانية أو الأدوات في البيئات الحساسة للأداء.
على سبيل المثال، تستخدم العديد من فرق التحليلات Svelte مع **D3.js** للرسوم البيانية التفاعلية:
```svelte
```
يوضح هذا المثال كيف تندمج hooks دورة حياة Svelte بسلاسة مع مكتبات الطرف الثالث.
---
## الأخطاء الشائعة التي يقع فيها الجميع
1. **نسيان `$state`** – في Svelte 5، الـ `let count = 0` العادية *ليست* تفاعلية. غلفها: `let count = $state(0)`. تحديثها (`count += 1`) سيؤدي حينها إلى إطلاق تحديثات الـ DOM تلقائياً.
2. **تعديل المصفوفات/الكائنات دون إعادة التعيين (Svelte 4 فقط)** – مع تفاعلية Svelte 4 التي يكتشفها المترجم، فإن `arr.push(x)` لا يؤدي إلى تشغيل التحديثات—يجب إعادة التعيين باستخدام `arr = [...arr, newItem]`. أما مع `$state` في Svelte 5، فإن التعديلات العميقة على الـ proxy *تؤدي* إلى تشغيل التحديثات، لذا فإن `arr.push(x)` يعمل مع المصفوفات المعلن عنها باستخدام `$state`[^11].
3. **خلط التلاعب بـ DOM مع روابط Svelte** – اترك Svelte تتعامل مع تحديثات DOM.
4. **تجاهل إمكانية الوصول (a11y)** – استخدم HTML دلالي وسمات ARIA.
5. **تخطي إعداد TypeScript** – يعمل نظام النوع (type system) في Svelte 5 على تحسين قابلية الصيانة وهو مدمج للمشاريع الجديدة.
---
## تحدَّ نفسك
أنشئ **تطبيق مهام (todo app)** صغيرًا باستخدام Svelte:
1. أضف writable store للمهام.
2. أنشئ مكونات للإدخال وعرض القائمة.
3. احفظ البيانات في `localStorage`.
4. أضف فلترًا للمهام المكتملة.
إضافة: قم بنشره على **Vercel** أو **Netlify** باستخدام محول (adapter) SvelteKit.
---
## دليل استكشاف الأخطاء وإصلاحها
| الخطأ | السبب المرجح | الحل |
| -------------------------- | --------------------------------------------------- | -------------------------------------------------------- |
| `Unexpected token <` | مسار بناء خاطئ أو عدم تطابق SSR | تحقق من `vite.config.js` وتأكد من صحة المسار الأساسي |
| `window is not defined` | كود جانب الخادم يستخدم واجهات برمجة تطبيقات المتصفح | قم بحمايته باستخدام `if (browser)` من `$app/environment` |
| التنسيقات (CSS) لا تُطبق | فقدان التنسيقات المحدودة (Scoped styles) | تأكد من وجود `