بناء واجهات حقيقية باستخدام Svelte و SvelteKit
يتخذ Svelte نهجًا مختلفًا جذريًا عن React و Vue — بدلاً من شحن runtime إلى المتصفح، يقوم بتجميع مكوناتك إلى JavaScript vanilla عالي الكفاءة في وقت البناء. والنتيجة هي حزم أصغر وأوقات تحميل أسرع وكود أقل. SvelteKit، إطار العمل الرسمي، يضيف routing قائم على الملفات وserver-side rendering وform actions وadapters للنشر حتى تتمكن من شحن تطبيقات على مستوى الإنتاج على أي منصة. هذه المسار يغطي كليهما، من المكون الأول إلى عمارة full-stack.
ما ستتعلمه
ستبدأ بنموذج مكونات Svelte — props وtemplate syntax والشروط والحلقات والربط ثنائي الاتجاه — ثم تنتقل إلى نظام الreactivity وdlifecycle functions وprimitives المتجر: writable و readable و derived والمتاجر المخصصة. من جانب الواجهة ستعمل مع slots و Context API و CSS transitions و animations و Svelte Motion. تغطي فصول SvelteKit routing وdata loading و SSR وprerendering وform actions و API routes و hooks ومعالجة الأخطاء والتخطيطات المتقدمة وأنماط المصادقة وadapters النشر. يغطي المسار أيضًا نظام rune في Svelte 5 والاختبار باستخدام unit tests و Playwright E2E وintegration مكتبات الجهات الخارجية وممارسات أمان SvelteKit.
مسار التعلم
يتقدم احدى وأربعون دورة من A1 من خلال C1. تؤسس الدورات السبع الأولى الأساس: components و props و events و template syntax. يقدم B1 stores و slots و transitions وأول صفحات SvelteKit لديك وأنماط data-loading. B2 — الكتلة الأكبر — يعمل من خلال form actions و API routes و hooks و advanced reactivity و Svelte Actions و custom animations وأنماط المصادقة والadapters و runes Svelte 5 والاختبار والأمان. يغلق المسار في C1 مع advanced runes وأنماط المكونات المتقدمة و SvelteKit streaming وتحسين الأداء وإدارة الحالة على نطاق واسع وتطبيق SvelteKit full-stack capstone.
كيفية عمله
تنقسم كل دورة إلى دروس قصيرة ومركزة تكملها في محرر الأكواد المدمج مع تعليقات فورية. معلم AI متاح كلما تعثرت، وكل مفهوم يتم تعزيزه بتمارين عملية قبل الانتقال إلى الموضوع التالي.