تعلم Svelte: الدليل الحديث لبناء تطبيقات ويب فائقة السرعة

ما ستتعلمه

1. ما الذي يجعل Svelte مختلفًا عن React و Vue و Angular.
2. كيفية إعداد بيئة Svelte حديثة في أقل من ٥ دقائق.
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 في ١٩ أكتوبر ٢٠٢٤^٣ وقدم runes — وهو نموذج تفاعلية صريح مبني على $state، و $derived، و $effect، و $props. يستخدم هذا الدليل صيغة runes في جميع أجزائه لأنها الطريقة الحالية والموصى بها لكتابة Svelte. لا تزال صيغة Svelte 4 القديمة (export let، وتصريحات التفاعلية $:) تعمل، لكن مسار الهجرة واضح: الـ runes هي المستقبل، وهي بالفعل الوضع الافتراضي للمشاريع الجديدة.

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

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

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

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

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

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

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

واجهة السطر البرمجي الرسمية لـ 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 لك يعمل.

الخطوة ٢: فهم هيكل الملفات

my-svelte-app/
├── src/
│   ├── App.svelte
│   ├── main.js
│   └── lib/
├── package.json
└── vite.config.js

• App.svelte – المكون الجذري الخاص بك.
• main.js – يقوم بتشغيل التطبيق.
• lib/ – مكونات قابلة لإعادة الاستخدام.

الخطوة ٣: مكونك الأول

<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) أصغر – عادة ما تكون أصغر بنسبة ٣٠-٥٠٪ من مكافئات React في التطبيقات الحقيقية^٦.
3. hydration أسرع – خاصة في إعدادات SSR.

مثال لمقارنة الأداء (النطاق النموذجي، gzipped)

الفجوة في "Hello World" هي الأكبر التي ستراها على الإطلاق. بمجرد شحن التوجيه (routing)، والنماذج (forms)، والحالة (state)، تتقارب التطبيقات الواقعية — لكن Svelte لا يزال يميل إلى أن يكون أخف بنسبة ٣٠-٥٠٪^٦. في krausest js-framework-benchmark، يقع Svelte في الفئة العليا لعمليات create/swap-rows واستخدام الذاكرة.

متى تستخدم ومتى لا تستخدم Svelte

يتألق Svelte في التطبيقات الصغيرة إلى المتوسطة، لوحات التحكم (dashboards)، وواجهات المستخدم التفاعلية. بالنسبة للأنظمة المؤسسية الضخمة ذات التبعيات القديمة الثقيلة، قد تظل React أو Angular خيارات أكثر أماناً.

الأخطاء الشائعة والحلول

أنماط معالجة الأخطاء

يوفر 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.

دليل استكشاف الأخطاء وإصلاحها

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

إليك تدفق مبسط لتطبيق 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 للتعرف على التوجيه ووظائف الخادم ومحولات النشر.