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

TL;DR

• 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 كيلوبايت	~30 كيلوبايت	~1.6 كيلوبايت (إخراج مُترجم)
منحنى التعلم	متوسط	متوسط	سهل
دعم 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 هو الحل الرسمي⁵. 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({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tracesSampleRate: 1.0,
});

يدعم SvelteKit hooks للتسجيل وتتبع الطلبات.

---

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

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 بسلاسة مع مكتبات الطرف الثالث.

---

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

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

---

تحدي جرّبه بنفسك

أنشئ تطبيق todo صغير باستخدام Svelte:

1. أضف متجرًا قابلًا للكتابة لـ todos.
2. أنشئ مكونات للإدخال وعرض القائمة.
3. احفظ البيانات في localStorage.
4. أضف مرشحًا للمهام المكتملة.

مكافأة: انشره على 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 على حزم أصغر وبدء تشغيل أسرع بسبب التجميع⁶.

---

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

---

الهوامش

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

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

3. ريتش هاريس، مبتكر Svelte – https://svelte.dev/blog ↩

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

5. وثائق SvelteKit الرسمية – https://kit.svelte.dev/docs ↩

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

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

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