دوره Svelte: The Future of Frontend Frameworks and Their Impact همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره Svelte: The Future of Frontend Frameworks and Their Impact

موضوع کلی: برنامه نویسی

موضوع میانی: سوِلت (Svelte)

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر دوره: آینده فریم‌ورک‌های فرانت‌اند
• 2. چالش‌های فریم‌ورک‌های مدرن وب: Virtual DOM و پیچیدگی‌ها
• 3. معرفی Svelte: رویکرد کامپایلری به جای کتابخانه‌ای
• 4. مقایسه Svelte با React: تفاوت‌های بنیادین
• 5. مقایسه Svelte با Vue و Angular: جایگاه Svelte در اکوسیستم
• 6. راه‌اندازی محیط توسعه: Node.js، npm و VS Code
• 7. ایجاد اولین پروژه Svelte با SvelteKit
• 8. بررسی ساختار پوشه‌ها و فایل‌های یک پروژه SvelteKit
• 9. اولین کامپوننت شما: آشنایی با فایل‌های `+page.svelte`
• 10. اجرای سرور توسعه و مشاهده پروژه در مرورگر
• 11. معرفی Svelte REPL: یک زمین بازی آنلاین برای یادگیری
• 12. ساختار یک کامپوننت Svelte: تگ‌های `<script>`, `<style>` و Markup
• 13. رندر کردن دینامیک داده‌ها در قالب HTML
• 14. استفاده از متغیرهای جاوااسکریپت در Attribute های HTML
• 15. مفهوم واکنش‌گرایی (Reactivity): قدرت عملگر تخصیص (=)
• 16. اعلان‌های واکنشی (Reactive Declarations): جادوی `:$$`
• 17. دستورات شرطی با بلوک‌های `{#if...else...}`
• 18. رندر کردن لیست‌ها و آرایه‌ها با بلوک `{#each}`
• 19. مدیریت رویدادهای کاربر (User Events) با دستور `on:click`
• 20. Event Modifiers: کنترل رفتار پیش‌فرض رویدادها
• 21. پراپ‌ها (Props): ارسال داده از والد به فرزند
• 22. تعیین مقادیر پیش‌فرض برای پراپ‌ها
• 23. ارسال گروهی پراپ‌ها با Spread Props `...$$`
• 24. اتصال دو طرفه داده (Two-Way Data Binding) با `bind:value`
• 25. کار با انواع دیگر Binding ها: `bind:this`, `bind:clientWidth`
• 26. رندر کردن HTML خام با `{@html}` و نکات امنیتی آن
• 27. دیباگ کردن در قالب با `{@debug}`
• 28. استایل‌دهی محلی (Scoped Styling): ایزوله‌سازی CSS در کامپوننت‌ها
• 29. اعمال استایل‌های سراسری (Global) با `:global()`
• 30. وارد کردن (Import) و استفاده از کامپوننت‌ها درون یکدیگر
• 31. چرخه حیات کامپوننت (Lifecycle): تابع `onMount`
• 32. چرخه حیات کامپوننت: تابع `onDestroy`
• 33. چرخه حیات کامپوننت: توابع `beforeUpdate` و `afterUpdate`
• 34. درک Event Loop و استفاده از تابع `tick`
• 35. ایجاد رویدادهای سفارشی با `createEventDispatcher`
• 36. فوروارد کردن رویدادها از کامپوننت فرزند
• 37. اسلات‌ها (Slots): روشی برای ترکیب کامپوننت‌ها
• 38. استفاده از اسلات پیش‌فرض (Default Slot)
• 39. استفاده از اسلات‌های نام‌گذاری شده (Named Slots)
• 40. بررسی وجود محتوا در یک اسلات
• 41. اسلات‌های محدوده‌بندی شده (Scoped Slots): ارسال داده به والد
• 42. Context API: اشتراک‌گذاری داده بدون Prop Drilling
• 43. استفاده از `setContext` و `getContext`
• 44. چه زمانی از Context، Props یا Stores استفاده کنیم؟
• 45. المنت‌های ویژه Svelte: کامپوننت‌های بازگشتی با `<svelte:self>`
• 46. المنت‌های ویژه Svelte: رندر کامپوننت دینامیک با `<svelte:component>`
• 47. المنت‌های ویژه Svelte: تعامل با رویدادهای پنجره با `<svelte:window>`
• 48. المنت‌های ویژه Svelte: تعامل با رویدادهای بدنه با `<svelte:body>`
• 49. المنت‌های ویژه Svelte: مدیریت تگ `<head>` با `<svelte:head>`
• 50. اسکریپت ماژول: `<script context="module">`
• 51. دستور `class:` برای مدیریت دینامیک کلاس‌های CSS
• 52. مدیریت وضعیت (State Management): چرا به Stores نیاز داریم؟
• 53. فروشگاه‌های قابل نوشتن (Writable Stores)
• 54. خواندن و به‌روزرسانی مقادیر در Writable Stores
• 55. اشتراک خودکار (Auto-Subscription) در کامپوننت‌ها با پیشوند `$`
• 56. فروشگاه‌های فقط خواندنی (Readable Stores)
• 57. فروشگاه‌های مشتق شده (Derived Stores)
• 58. ساخت یک فروشگاه سفارشی (Custom Store)
• 59. مقدمه‌ای بر انیمیشن و حرکت (Motion) در Svelte
• 60. ترنزیشن‌ها (Transitions) با ماژول `svelte/transition`
• 61. استفاده از ترنزیشن `fade` برای محو شدن و ظاهر شدن
• 62. استفاده از ترنزیشن‌های `fly` و `slide`
• 63. سفارشی‌سازی پارامترهای ترنزیشن‌ها
• 64. انیمیشن لیست‌ها با `animate:flip` از ماژول `svelte/animate`
• 65. توابع نرم‌کننده حرکت (Easings) با ماژول `svelte/easing`
• 66. اکشن‌ها (Actions): افزودن رفتار سفارشی به المنت‌ها با `use:`
• 67. مقدمه‌ای بر SvelteKit: فریم‌ورک فول‌استک مبتنی بر Svelte
• 68. سیستم مسیریابی مبتنی بر فایل (File-based Routing)
• 69. ایجاد مسیرهای دینامیک با `[slug]`
• 70. لی‌اوت‌ها (Layouts): ساختار مشترک صفحات با `+layout.svelte`
• 71. لی‌اوت‌های تودرتو (Nested Layouts)
• 72. بارگذاری داده در سمت سرور با `+page.server.js`
• 73. بارگذاری داده سراسری (Universal) با `+page.js`
• 74. تفاوت و کاربرد `load` در سرور و کلاینت
• 75. مدیریت ارسال فرم‌ها با Form Actions
• 76. بهبود تدریجی (Progressive Enhancement) در SvelteKit
• 77. ساخت API Routes با فایل‌های `+server.js`
• 78. مدیریت متدهای HTTP مختلف (GET, POST, PUT, DELETE)
• 79. صفحات خطا و مدیریت خطاها با `+error.svelte`
• 80. ریدایرکت‌ها و ناوبری برنامه‌نویسی شده
• 81. استفاده از متغیرهای محیطی (Environment Variables)
• 82. رندر سمت سرور (SSR) چیست و چگونه کار می‌کند؟
• 83. تولید سایت استاتیک (SSG) با Adapters
• 84. دیپلوی کردن اپلیکیشن SvelteKit روی Vercel
• 85. هوک‌های سرور (Server Hooks) با `hooks.server.js`
• 86. یکپارچه‌سازی Svelte با TypeScript
• 87. استفاده از Preprocessors مانند `svelte-preprocess`
• 88. تست واحد (Unit Testing) کامپوننت‌ها با Vitest
• 89. تست سرتاسری (End-to-End Testing) با Playwright
• 90. ارتباط با یک CMS بدون سر (Headless CMS)
• 91. یکپارچه‌سازی با کتابخانه‌های شخص ثالث مانند D3.js
• 92. ساخت کامپوننت‌های دسترس‌پذیر (Accessible)
• 93. استراتژی‌های بهینه‌سازی عملکرد (Performance Optimization)
• 94. استفاده از Streaming Promises در SvelteKit
• 95. مستندسازی و نمایش کامپوننت‌ها با Storybook
• 96. معرفی Svelte 5 و Runes: آینده واکنش‌گرایی
• 97. مفهوم `$state` و `$effect` در Runes
• 98. تأثیر Runes بر نحوه نوشتن کد در Svelte
• 99. Svelte در مقابل متافریم‌ورک‌های دیگر (Next.js, Nuxt)
• 100. فلسفه Svelte: "فریم‌ورکی که ناپدید می‌شود"