ما هو Svelte ولماذا يترجم الشيفرة
تعرّف على نهج Svelte الذي يضع المترجم أولًا، وكيف يختلف عن React وVue
ما هو Svelte ولماذا يترجم الشيفرة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
مرحبًا بكم في Svelte
يُعد Svelte إطار عمل لواجهات المستخدم يعتمد على المترجم أولًا. وعلى خلاف React وVue، ينفّذ Svelte معظم عمله في وقت البناء، وليس في وقت التشغيل.
من دون DOM افتراضي
يقارن React بين عناصر DOM افتراضية في وقت التشغيل. أما Svelte، فيحوّل مكوّناتك إلى JavaScript عادي عالي التحسين، يُحدّث DOM مباشرةً.
إرسال شيفرة أقل
بما أن Svelte يرسل ناتجًا مُجمّعًا، فإنك ترسل عادةً JavaScript أقل إلى المتصفح. وتكون أحجام الحزم صغيرة جدًا.
تنسيق ملف المكوّن
يعيش مكوّن Svelte في ملف .svelte يحتوي على ثلاثة أقسام اختيارية: script وmarkup وstyle.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>التفاعلية عبر الإسناد
في Svelte، يؤدي إسناد قيمة جديدة إلى متغيّر ببساطة إلى تشغيل تحديث لواجهة المستخدم. ولا تحتاج إلى استدعاء setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>المكوّنات أحادية الملف
توجد البنية والمنطق والأنماط ذات النطاق المحدد معًا في ملف واحد. ويسهّل هذا التجميع فهم المكوّنات وإعادة هيكلتها.
أنماط ذات نطاق محدد افتراضيًا
أي <style> تكتبه يكون مقيّدًا بنطاق المكوّن وحده. ولن تعود هناك تعارضات CSS بين الصفحات.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>مكاسب الأداء
بما أنه لا توجد أعباء إضافية لإطار العمل في وقت التشغيل، تميل تطبيقات Svelte إلى أن تكون أسرع من تطبيقات React أو Vue المكافئة على الأجهزة منخفضة الإمكانات.
SvelteKit، إطار العمل الفوقي
يبني SvelteKit على Svelte ويضيف التوجيه وSSR وتحميل البيانات. وتستخدم معظم تطبيقات Svelte الإنتاجية SvelteKit.
متى يتألّق Svelte
يُعد Svelte مناسبًا للمواقع التسويقية ولوحات المعلومات والتطبيقات الملائمة للهواتف المحمولة، ولأي مكان يكون فيه حجم الحزمة وتجربة التطوير مهمَّين.
خلاصة المقارنة
ترسل React وVue وAngular جميعًا إطارًا للعمل في وقت التشغيل، بينما يزيل Svelte هذا الإطار أثناء التجميع. والنتيجة: حزم أصغر ونماذج ذهنية أبسط.
تحقّق سريع
اختبر مدى فهمك.
خلاصة
أصبحت تعرف الآن أن Svelte يجمّع المكوّنات، ويرسل JavaScript أقل، ويستخدم أنماطًا ذات نطاق محدد، ويدعم SvelteKit لبناء تطبيقات كاملة. والخطوة التالية: إنشاء مشروعك الأول.
الأسئلة الشائعة
هل درس «ما هو Svelte ولماذا يترجم الشيفرة» مجاني؟
نعم — نص درس «ما هو Svelte ولماذا يترجم الشيفرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «ما هو Svelte ولماذا يترجم الشيفرة»؟
تعرّف على نهج Svelte الذي يضع المترجم أولًا، وكيف يختلف عن React وVue تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «ما هو Svelte ولماذا يترجم الشيفرة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هو Svelte ولماذا يترجم الشيفرة
- إنشاء مشروع باستخدام npm create svelte
- بنية المشروع: src وroutes وstatic
- خادم التطوير واستبدال الوحدات الفوري