تعلم 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+ مثبتًا¹.

---

مقدمة: لماذا يهم Svelte اليوم

Svelte ليس مجرد إطار عمل JavaScript آخر — إنه مترجم (compiler). بدلاً من شحن وقت تشغيل (runtime) كبير مثل React أو Vue، يقوم Svelte بتحويل مكوناتك إلى JavaScript عالي التحسين في وقت البناء². النتيجة؟ حزم أصغر، وأوقات تشغيل أسرع، وتعقيد أقل.

تم إطلاق Svelte 5 في 19 أكتوبر 2024³ وقدم runes — وهو نموذج تفاعلية صريح مبني على $state، و $derived، و $effect، و $props. يستخدم هذا الدليل صيغة runes في جميع أجزائه لأنها الطريقة الحالية والموصى بها لكتابة Svelte. لا تزال صيغة Svelte 4 القديمة (export let، وتصريحات التفاعلية $:) تعمل، لكن مسار الهجرة واضح: الـ runes هي المستقبل، وهي بالفعل الوضع الافتراضي للمشاريع الجديدة.

تم إنشاء Svelte بواسطة Rich Harris، في الأصل للرسومات الإخبارية التفاعلية في صحيفة The Guardian، حيث كان الأداء ووقت التحميل أمرين حاسمين⁴. ومنذ ذلك الحين، تطور إلى إطار عمل جاهز للإنتاج تستخدمه شركات كبرى مثل Square Enix و Rakuten⁵.

دعونا نستكشف ما الذي يجعل Svelte مقنعًا للغاية.

---

كيف يختلف Svelte عن أطر العمل الأخرى

إليك مقارنة مفاهيمية سريعة:

الميزة	React	Vue	Svelte
الرندرة (Rendering)	Virtual DOM diffing	Virtual DOM diffing	يترجم إلى تحديثات JS خام
حجم وقت التشغيل (Hello World، مضغوط)	~42–45 KB	~30 KB	~3–5 KB6
منحنى التعلم	متوسط	متوسط	سهل
دعم TypeScript	ممتاز	ممتاز	مدمج (Svelte 5+)
إدارة الحالة	Hooks / Context	Pinia	Runes ($state) + مخازن تفاعلية
دعم SSR	Next.js	Nuxt	SvelteKit

أكبر ابتكار في Svelte هو الترجمة (compilation). بدلاً من تفسير تطبيقك في وقت التشغيل، يقوم Svelte بمعالجته مسبقًا، مما يولد عمليات DOM فعالة.

---

البداية: تطبيقك الأول بـ Svelte

الخطوة 1: إنشاء مشروع جديد

واجهة السطر البرمجي الرسمية لـ Svelte هي sv. وهي تحل محل حزمة create-svelte القديمة وتجمع أدوات التنسيق، والـ linting، والاختبار، وقواعد البيانات، والمصادقة كإضافات اختيارية⁷.

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: مكونك الأول

<script>
  let name = $state('world');
</script>

<h1>Hello {name}!</h1>

<input bind:value={name} placeholder="Enter your name" />

الـ rune المسمى $state يميز name كمتغير تفاعلي. أي قراءة لـ name في القالب (أو في $derived / $effect) يتم إعادة تشغيلها عند تغييره — لا حاجة لـ useState، ولا setState، ولا كود متكرر. في Svelte 4 كان الـ let العادي تفاعليًا بشكل ضمني؛ أما Svelte 5 فقد جعل التفاعلية صريحة لتعمل بنفس الطريقة داخل ملفات .svelte و .svelte.ts و .svelte.js⁸.

---

فهم التفاعلية في Svelte

في Svelte 5، تقوم بتمييز الحالة باستخدام rune الـ $state. بعد ذلك، تؤدي عمليات التعيين لهذه الحالة إلى إطلاق تحديثات دقيقة للـ DOM.

<script>
  let count = $state(0);

  function increment() {
    count += 1; // triggers DOM update automatically
  }
</script>

<button onclick={increment}>Count: {count}</button>

للقيم المحسوبة (computed values)، استخدم $derived:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>{count} × 2 = {doubled}</p>

للآثار الجانبية (side effects) مثل التسجيل في الكونسول، أو المزامنة مع localStorage، أو استدعاء واجهات البرمجة التطبيقية، استخدم $effect:

<script>
  let count = $state(0);

  $effect(() => {
    console.log('count is now', count);
  });
</script>

قارن ذلك بـ React:

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

نهج Svelte يلغي مفهوم الـ virtual DOM تمامًا². فهو يعرف بالضبط أي عقد DOM يجب تحديثها.

---

إدارة الحالة: المخازن والسياق

للحالة المشتركة، يوفر Svelte المخازن (stores) — وهي كائنات تفاعلية يمكن استيرادها في أي مكان.

مثال على مخزن قابل للكتابة (Writable Store)

// src/lib/store.js
import { writable } from 'svelte/store';

export const user = writable({ name: 'Alice', loggedIn: false });

الاستخدام:

<script>
  import { user } from './lib/store.js';
</script>

<p>{$user.name} is { $user.loggedIn ? 'logged in' : 'logged out' }</p>

البادئة $ تقوم بالاشتراك وإلغاء الاشتراك تلقائيًا من المخزن — بشكل نظيف وتصريحي.

---

SvelteKit: إطار العمل المتكامل (Full‑Stack)

بالنسبة للتوجيه (routing)، والرندرة من جانب الخادم (SSR)، ونقاط نهاية API، فإن SvelteKit هو الحل الرسمي⁹. وهو مشابه في جوهره لـ Next.js.

البداية السريعة مع SvelteKit

npx sv create my-app
cd my-app
npm install
npm run dev

عند سؤالك، اختر قالب SvelteKit⁷.

يدعم SvelteKit:

• الرندرة من جانب الخادم (SSR)
• توليد المواقع الثابتة (SSG)
• مسارات API
• التوجيه القائم على الملفات

مسار مثال

src/routes/+page.svelte

<script>
  let { data } = $props();
</script>

<h1>Welcome {data.name}</h1>

src/routes/+page.js

export function load() {
  return { name: 'Svelte Learner' };
}

في Svelte 4 كانت الصفحة ستستخدم export let data. يستبدل Svelte 5 الـ export let بـ rune الـ $props، وهو تفكيك (destructure) صريح وواحد لكل ما يستقبله المكون — بما في ذلك الـ props الخاصة بـ SvelteKit مثل data و params⁸.

---

تعمق في الأداء

تصميم Svelte القائم على المترجم (compiler-first) يمنحه أفضلية في الأداء في عدة مجالات:

1. لا يوجد diffing للـ virtual DOM – تحديثات الـ DOM دقيقة جراحياً.
2. حزم (bundles) أصغر – عادة ما تكون أصغر بنسبة 30-50% من مكافئات React في التطبيقات الحقيقية⁶.
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%⁶. في krausest 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

<script>
  import { page } from '$app/state';
</script>

<h1>Something went wrong</h1>
<pre>{page.error?.message}</pre>

في SvelteKit الحديث، تأتي تفاصيل الخطأ من كائن الحالة page بدلاً من prop الـ export let error⁹.

بالنسبة للأخطاء على مستوى المكون، استخدم كتل try/catch أو حدود الأخطاء في دوال المنطق.

---

اختبار تطبيقات Svelte

اختبار مكونات Svelte بسيط ومباشر باستخدام Vitest أو Playwright.

مثال لاختبار الوحدة (Unit Test)

npm install -D vitest @testing-library/svelte

App.test.js

import { render, screen } from '@testing-library/svelte';
import App from './App.svelte';

test('renders greeting', () => {
  render(App);
  expect(screen.getByText('Hello world!')).toBeTruthy();
});

تشغيل الاختبارات:

npm run test

---

المراقبة والقابلية للملاحظة

في بيئة الإنتاج، يمكنك دمج تطبيقات Svelte مع أدوات المراقبة مثل Sentry، Datadog، أو OpenTelemetry.

مثال: تكامل Sentry

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tracesSampleRate: 1.0,
});

يدعم SvelteKit الـ hooks لتسجيل (logging) وتتبع الطلبات.

---

الاعتبارات الأمنية

يتبع Svelte مبادئ أمان الويب القياسية¹⁰:

• تجاوز HTML (Escaped HTML) افتراضياً – يمنع هجمات XSS.
• يتم تطهير الـ Props ما لم يتم تعليمها صراحةً كآمنة.
• استخدم {@html} بحذر – فقط مع المحتوى الموثوق.

مثال: HTML آمن مقابل غير آمن

<!-- Safe -->
<p>{userInput}</p>

<!-- Unsafe -->
{@html userInput<!-- only use for sanitized content -->

اتبع توصيات OWASP لأمان جانب العميل¹¹.

---

رؤى حول القابلية للتوسع

يتوسع Svelte بشكل جيد للعديد من تطبيقات الإنتاج، ولكن ضع في اعتبارك:

• تقسيم الكود (Code splitting) عبر الاستيرادات الديناميكية.
• تخزين SSR المؤقت (caching) للصفحات ذات الزيارات العالية.
• تجزئة الـ Store للحالات المعقدة.

غالباً ما تستخدم الفرق واسعة النطاق SvelteKit + Vercel أو Netlify للنشر، مستفيدة من التخزين المؤقت عند الحافة (edge caching) والتقديم المسبق الثابت (static pre-rendering).

---

دراسة حالة واقعية: لوحات التحكم التفاعلية

حالة استخدام شائعة لـ Svelte هي لوحات تحكم تصور البيانات. ولأن Svelte يترجم إلى حد أدنى من JS، فهو مثالي لتضمين الرسوم البيانية أو الأدوات في البيئات الحساسة للأداء.

على سبيل المثال، تستخدم العديد من فرق التحليلات Svelte مع D3.js للرسوم البيانية التفاعلية:

<script>
  import { onMount } from 'svelte';
  import * as d3 from 'd3';

  let data = $state([10, 20, 30, 40]);

  onMount(() => {
    const svg = d3.select('#chart').append('svg').attr('width', 200).attr('height', 100);
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 50)
      .attr('y', d => 100 - d)
      .attr('width', 40)
      .attr('height', d => d)
      .attr('fill', 'teal');
  });
</script>

<div id="chart"></div>

يوضح هذا المثال كيف تندمج 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⁸.
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)	تأكد من وجود <style> في نفس المكون
الـ Store لا يحفظ البيانات	عدم الحفظ في وحدة تخزين دائمة	استخدم localStorage أو IndexedDB

---

نظرة عامة على البنية

إليك تدفق مبسط لتطبيق SvelteKit:

flowchart TD
  A[User Request] --> B[Server Load Function]
  B --> C[SSR Rendered HTML]
  C --> D[Hydration on Client]
  D --> E[Reactive Updates via Runes / Stores]

---

أهم النقاط المستفادة

Svelte هو مترجم (compiler)، وليس إطار عمل (framework). هذا الاختلاف الوحيد يؤدي إلى تطبيقات أسرع، وحزم (bundles) أصغر، وكود أبسط.

إنه مثالي للمطورين الذين يقدرون الوضوح والأداء وقابلية الصيانة—دون التضحية بالميزات الحديثة مثل SSR والتوجيه (routing) و TypeScript.

---

الخطوات التالية

• اقرأ برنامج Svelte التعليمي الرسمي – فهو يأتي الآن مع بناء جملة runes الخاص بـ Svelte 5.
• ألقِ نظرة سريعة على دليل ترحيل Svelte 5 إذا كنت تقوم بنقل كود Svelte 4.
• احفظ توثيق SvelteKit للتعرف على التوجيه ووظائف الخادم ومحولات النشر.

---

الحواشي

1. توثيق Node.js – https://nodejs.org/en/docs/ ↩

2. توثيق Svelte الرسمي – https://svelte.dev/docs ↩ ↩²

3. تم إطلاق Svelte 5 في Svelte Summit في 19 أكتوبر 2024 – https://svelte.dev/blog/svelte-5-is-alive ↩ ↩²

4. ريتش هاريس، منشئ Svelte – https://svelte.dev/blog ↩

5. معرض Svelte (الشركات التي تستخدم Svelte) – https://svelte.dev/showcase ↩ ↩²

6. تعكس مقارنات حجم الحزمة (Bundle-size) مخرجات gzipped النموذجية من vite build لتطبيق عداد (counter app)، وانخفاضات بنسبة 30-50% تم الإبلاغ عنها في عمليات الانتقال الواقعية من React إلى Svelte. يعد js-framework-benchmark الخاص بـ Krausest هو المرجع المحايد المعتمد لأداء وقت التشغيل (runtime performance). ↩ ↩² ↩³ ↩⁴ ↩⁵

7. واجهة السطر البرمجي sv – https://svelte.dev/docs/cli/sv-create – تحل محل حزمة create-svelte المهجورة وتتضمن إضافات للتنسيق (formatting)، والتدقيق (linting)، والاختبار، وقواعد البيانات، والمصادقة (auth). ↩ ↩²

8. دليل الانتقال إلى Svelte 5 ومرجع الـ runes – https://svelte.dev/docs/svelte/v5-migration-guide ↩ ↩² ↩³ ↩⁴

9. توثيق SvelteKit – https://svelte.dev/docs/kit ↩ ↩²

10. ملاحظات الأمان في Svelte – https://svelte.dev/docs#security ↩

11. أهم 10 مخاطر أمنية وفقاً لـ OWASP – https://owasp.org/www-project-top-ten/ ↩