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

باختصار

• Svelte تُحوّل مكوناتك إلى فانيلا JavaScript عالية الكفاءة — بدون عبء إطار العمل في وقت التشغيل.
• هي تفاعلية بتصميم، بمعنى أن تغييرات الحالة تُحدث الـ DOM تلقائيًا دون مقارنة الـ virtual DOM.
• ستتعلم كيفية بناء واختبار ونشر تطبيق Svelte من الصفر.
• سنستكشف الأداء، الأمان، القابلية للتوسع ورؤى إنتاجية واقعية.
• يحتوي على أمثلة قابلة للتشغيل والمزالق ونصائح استكشاف الأخطاء.

---

ما ستتعلمه

1. ما الذي يجعل Svelte مختلفًا عن React و Vue و Angular.
2. كيفية إعداد بيئة Svelte حديثة في أقل من 5 دقائق.
3. كيف تعمل التفاعلية والمخازن من الداخل.
4. كيفية تحسين واختبار ومراقبة تطبيقات Svelte في الإنتاج.
5. متى تستخدم (ولا تستخدم) Svelte في المشاريع الحقيقية.

---

متطلبات أساسية

ستستفيد أكثر من هذه المقالة إذا كنت:

• تعرف أساسيات HTML، CSS، و JavaScript.
• لقد استخدمت إطار عمل أمامي مثل React أو Vue.
• لديك Node.js v18+ مثبت¹.

---

مقدمة: لماذا تهم Svelte في عام 2025

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

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

دعونا نستعرض ما يجعل Svelte مثيرة للاهتمام.

---

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

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

الميزة	React	Vue	Svelte
العرض	مقارنة الـ virtual DOM	مقارنة الـ virtual DOM	يُحوّل إلى تحديثات فانيلا JS
حجم وقت التشغيل	~40–50 KB	~30 KB	~1.6 KB (output مُحوّل)
منحنى التعلم	متوسط	متوسط	سهل
TypeScript الدعم	ممتاز	ممتاز	ممتاز (عبر svelte-preprocess)
إدارة الحالة	Hooks / Context	Vuex / Pinia	مخازن تفاعلية مدمجة
دعم SSR	Next.js	Nuxt	SvelteKit

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

---

البدء: تطبيق Svelte الأول

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

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

افتح 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 = 'world';
</script>

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

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

تقوم Svelte بإعادة رسم الـ DOM تلقائيًا عند تغيير name — بدون useState، بدون setState، ولا حاجة لكتابات زائدة.

---

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

في Svelte، التعيينات تُحفز التفاعلية. هذا كل شيء.

let count = 0;

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

قارن ذلك مع React:

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

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

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

---

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

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

مثال مخزن قابل للكتابة

// 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: إطار عمل الواجهة الأمامية والخلفية

للتوجيه، SSR، و API نقاط النهاية، SvelteKit هو الحل الرسمي⁵. هو مشابه في الروح لـ Next.js.

بدء سريع مع SvelteKit

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

يدعم SvelteKit:

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

مثال مسار

src/routes/+page.svelte

<script>
  export let data;
</script>

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

src/routes/+page.js

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

---

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

تصميم Svelte المبني على المُترجم أولاً يمنحه ميزة أداء في عدة مجالات:

1. لا تفاضل الـ DOM الافتراضي – تحديثات DOM دقيقة جراحياً.
2. حزم أصغر – أصغر بنسبة 30–50% مقارنة بـ React المكافئة⁶.
3. تغذية أسرع – خاصة في إعدادات SSR.

مثال معيار (المدى النموذجي)

إطار العمل	حجم الحزمة (Hello World)	وقت التفاعل
React	~45 KB	~120 ms
Vue	~30 KB	~100 ms
Svelte	~1.6 KB	~35 ms

(تم القياس باستخدام Vite + البناء الافتراضي؛ النتائج تختلف حسب حجم التطبيق)

---

متى تستخدم Svelte مقابل متى لا تستخدمها

عند استخدام Svelte	عند عدم استخدام Svelte
تريد حجم حزمة صغير وبدء تشغيل سريع	تعتمد بشكل كبير على مكتبات React/Vue من طرف ثالث
تفضل البساطة المبنية على المُجمِّع	فريقك مُلتزم بشكل كبير بأدوات React
أنت تبني تطبيقات ثابتة أو SSR	تحتاج إلى دعم React Native أو متعدد المنصات
تقدر التفاعلية المباشرة والبسيطة	تحتاج إلى تكاملات واسعة في النظام البيئي

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

---

المزالق الشائعة والحلول

المزلق	السبب	الحل
المتغيرات لا تُحدَّث	نسيت استخدام التعيين للتفاعلية	أعد التعيين دائمًا (count += 1) لتنشيط التحديثات
المخزن غير تفاعلي	لم تستخدم صيغة $store	استخدم $store للاشتراك التلقائي
عدم تطابق الترطيب في SSR	بيانات غير حتمية	تأكد من تطابق بيانات الخادم والعميل
أخطاء بناء مع TypeScript	إعدادات المعالجة المسبقة مفقودة	أضف svelte-preprocess في svelte.config.js

---

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

SvelteKit يوفر ملف +error.svelte مدمجًا لحدود الأخطاء العالمية.

مثال

src/routes/+error.svelte

<script>
  export let error;
</script>

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

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

---

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

اختبار مكونات Svelte سهل مع Vitest أو Playwright.

مثال اختبار وحدة

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
Svelte تتبع مبادئ أمان الويب القياسية:

HTML مُهَرَّب افتراضيًا – يمنع XSS.
الخصائص مُنقَّاة ما لم تُصنَّف كآمنة صراحةً.
استخدم {@html} بحذر – فقط مع محتوى موثوق.

مثال: HTML آمن مقابل غير آمن
<!-- Safe -->
<p>{userInput}</p>

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

اتبع توصيات OWASP لأمان الطرف العميل.

رؤى حول القابلية للتوسع
Svelte تتوسع جيدًا للعديد من تطبيقات الإنتاج، لكن ضع في الاعتبار:

تقسيم الكود عبر الاستيرادات الديناميكية.
تخزين مؤقت لـ SSR للصفحات عالية الحركة.
تجزئة المتجر للحالات المعقدة.

الفِرق الكبيرة غالبًا ما تستخدم SvelteKit + Vercel أو Netlify للنشر، مستفيدة من التخزين المؤقت على الحافة والتصنيع المسبق الثابت.

دراسة حالة واقعية: لوحات تحكم تفاعلية
حالات الاستخدام الشائعة لـ Svelte هي لوحات تحكم تصور البيانات. لأن Svelte تُحوَّل إلى JS مُصغَّر، فهي مثالية لدمج الرسوم البيانية أو الويدجيت في بيئات حساسة للأداء.
على سبيل المثال، تستخدم العديد من فرق التحليلات Svelte مع D3.js للرسوم البيانية التفاعلية:
<script>
  import { onMount } from 'svelte';
  import * as d3 from 'd3';

  let data = [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>

يوضح هذا المثال كيفية تكامل واجهات دورة حياة Svelte بسلاسة مع المكتبات الخارجية.

الأخطاء الشائعة التي يرتكبها الجميع

نسيان قواعد التفاعلية – count++ يعمل، لكن تعديل المصفوفات مباشرة (arr.push()) لن يُحفّز التحديثات. استخدم إعادة التعيين بدلاً من ذلك: arr = [...arr, newItem].
خلط بين تعديل DOM وربطات Svelte – دع Svelte تتعامل مع تحديثات DOM.
تجاهل إمكانية الوصول (a11y) – استخدم HTML دلالي وخصائص ARIA.
تخطي إعداد TypeScript – نظام الأنواع في Svelte يُحسّن قابلية الصيانة.


تحدي جربه بنفسك
أنشئ تطبيق مهام صغير باستخدام Svelte:

أضف مخزنًا قابلًا للكتابة للمهام.
أنشئ مكونات لإدخال البيانات وعرض القائمة.
احفظ البيانات في localStorage.
أضف مرشحًا للمهام المكتملة.

مكافأة: انشره على Vercel أو Netlify باستخدام محول SvelteKit.

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



الخطأ
السبب المحتمل
الحل




Unexpected token <
مسار بناء خاطئ أو عدم تطابق SSR
تحقق من vite.config.js وتأكد من مسار القاعدة الصحيح


window is not defined
كود من جانب الخادم يستخدم واجهات المتصفح
استخدم الحماية باستخدام if (browser) من $app/environment


CSS لا يتم تطبيقه
أنماط محددة مفقودة
تأكد من وجود <style> في نفس المكون


المخزن لا يتم الحفظ
عدم حفظ البيانات في التخزين الدائم
استخدم 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 Stores]


النقاط الرئيسية

Svelte مُحول وليس إطار عمل. هذا الاختلاف الوحيد يؤدي إلى تطبيقات أسرع، حزم أصغر، وكود أبسط.
هي مثالية للمطورين الذين يقدرون الوضوح والأداء والقابلية للصيانة — دون التضحية بميزات حديثة مثل SSR، التوجيه، وTypeScript.


الأسئلة الشائعة
1. هل Svelte جاهزة للإنتاج؟

نعم. تُستخدم Svelte وSvelteKit في الإنتاج من قبل العديد من الشركات.
2. كيف تعامل Svelte التطبيقات الكبيرة؟

من خلال المخازن الموديولية، تقسيم الكود، وتخزين SSR المؤقت.
3. هل يمكنني استخدام Svelte مع TypeScript؟

بالتأكيد. الدعم الرسمي مدمج عبر svelte-preprocess.
4. هل تدعم Svelte مكونات الخادم؟

SvelteKit يقدم العرض من جانب الخادم ووظائف التحميل، مشابهة لمكونات الخادم.
5. كيف تقارن Svelte مع React من حيث الأداء؟

تطبيقات Svelte عادةً ما تكون حزمها أصغر وبدء تشغيلها أسرع بسبب الترجمة6.

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

الهوامش


وثائق Node.js – https://nodejs.org/en/docs/ ↩


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


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


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


وثائق SvelteKit – https://kit.svelte.dev/docs ↩


اختبارات أداء Web.dev – https://web.dev/measure/ ↩ ↩2


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


OWASP أعلى 10 مخاطر أمنية – https://owasp.org/www-project-top-ten/ ↩