فلش‌کارت‌های آموزشی Svelte: The Future of Frontend Frameworks: Impact, Innovation, and Evolution

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

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

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

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

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

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

• 1. مقدمه‌ای بر Svelte: چرا یک فریم‌ورک متفاوت؟
• 2. فلسفه Svelte: کامپایلر به عنوان فریم‌ورک
• 3. مقایسه Svelte با React، Vue و Angular
• 4. راه‌اندازی محیط توسعه: Node.js و ابزارهای خط فرمان
• 5. ایجاد اولین پروژه Svelte با SvelteKit
• 6. آشنایی با ساختار یک پروژه SvelteKit
• 7. ساختار یک کامپوننت Svelte: بلوک‌های script، style و template
• 8. اولین کامپوننت: Hello World در Svelte
• 9. درک عبارات (Expressions) و نمایش داده در Template
• 10. استفاده از جاوااسکریپت در بلوک `<script>`
• 11. استایل‌دهی در Svelte: استایل‌های محلی (Scoped CSS) به صورت پیش‌فرض
• 12. آشنایی با سرور توسعه (Dev Server) و Hot Module Replacement
• 13. ساخت نسخه نهایی برنامه (Production Build)
• 14. فلسفه واکنش‌گرایی (Reactivity) در Svelte: جادوی علامت `=`
• 15. اعلان‌های واکنشی (Reactive Declarations) با `:$`
• 16. دستورات واکنشی (Reactive Statements)
• 17. ارسال داده به کامپوننت‌ها با Props
• 18. تعریف Props با `export let`
• 19. مقداردهی اولیه برای Props
• 20. رویدادهای کامپوننت (Component Events) با `createEventDispatcher`
• 21. ارسال رویداد از کامپوننت فرزند
• 22. گوش دادن به رویدادهای کامپوننت با `on:`
• 23. فوروارد کردن رویدادها (Event Forwarding)
• 24. اتصال داده دوطرفه (Two-way Data Binding) با `bind:value`
• 25. اتصال به انواع مختلف ورودی‌ها (Checkbox, Radio, Select)
• 26. اتصال به مقادیر گروهی (Checkbox Group, Select Multiple)
• 27. اتصال به ابعاد المنت با `bind:clientWidth` و `bind:clientHeight`
• 28. اتصال به خود کامپوننت با `bind:this`
• 29. رندر شرطی با بلوک‌های `{#if...}{:else...}`
• 30. استفاده از `{:else if...}` برای شرط‌های چندگانه
• 31. حلقه‌ها و تکرار با بلوک `{#each...}`
• 32. اهمیت و کاربرد کلید (key) در حلقه‌های `each`
• 33. حلقه‌ها روی آبجکت‌ها و آرایه‌ها
• 34. عملیات ناهمگام (Asynchronous) با بلوک `{#await...}`
• 35. مدیریت Promiseها در Template
• 36. رندر کردن HTML خام با `{@html}` و ملاحظات امنیتی
• 37. دیباگ کردن در Template با `{@debug}`
• 38. مبانی ساختار کامپوننت‌ها (Component Composition)
• 39. کامپوننت‌های تو در تو (Nested Components)
• 40. معرفی Slots برای ارسال محتوا به کامپوننت
• 41. اسلات‌های نام‌گذاری شده (Named Slots)
• 42. ارسال داده از کامپوننت به اسلات (Slot Props)
• 43. بررسی شرایط رندر شدن یک اسلات
• 44. Context API: اشتراک‌گذاری داده بدون Prop Drilling
• 45. استفاده از `setContext` و `getContext`
• 46. چه زمانی از Context و چه زمانی از Props استفاده کنیم؟
• 47. استایل‌دهی سراسری (Global Styles) با `:global()`
• 48. استفاده از پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 49. یکپارچه‌سازی Svelte با فریم‌ورک‌های CSS مانند Tailwind CSS
• 50. استفاده از متغیرهای CSS در سطح کامپوننت
• 51. چرخه حیات کامپوننت (Component Lifecycle)
• 52. تابع `onMount`: کد پس از رندر شدن کامپوننت
• 53. تابع `onDestroy`: پاکسازی قبل از حذف کامپوننت
• 54. توابع `beforeUpdate` و `afterUpdate`
• 55. کاربرد تابع `tick` برای انتظار آپدیت DOM
• 56. معرفی Svelte Stores برای مدیریت وضعیت سراسری
• 57. فروشگاه‌های قابل نوشتن (Writable Stores)
• 58. اشتراک و لغو اشتراک دستی در فروشگاه‌ها
• 59. اشتراک خودکار در فروشگاه‌ها با پیشوند `$`
• 60. فروشگاه‌های فقط خواندنی (Readable Stores)
• 61. فروشگاه‌های مشتق شده (Derived Stores)
• 62. ساخت فروشگاه‌های سفارشی (Custom Stores)
• 63. افکت‌های بصری: مقدمه‌ای بر Transitionها
• 64. استفاده از دستور `transition:`
• 65. انواع Transitionهای داخلی: `fade`, `fly`, `slide`
• 66. تنظیم پارامترهای Transitionها
• 67. ساخت Transitionهای سفارشی با CSS
• 68. ساخت Transitionهای سفارشی با جاوااسکریپت
• 69. دستورهای `in:` و `out:` برای کنترل جداگانه
• 70. انیمیشن‌ها در Svelte با دستور `animate:`
• 71. افزودن و حذف آیتم‌ها در لیست با انیمیشن
• 72. اکشن‌ها (Actions): افزودن رفتار به المنت‌ها با دستور `use:`
• 73. ساخت یک اکشن سفارشی
• 74. المنت‌های ویژه Svelte: `svelte:head`
• 75. کار با رویدادهای پنجره و بدنه با `svelte:window` و `svelte:body`
• 76. کامپوننت‌های بازگشتی با `svelte:self`
• 77. کامپوننت‌های داینامیک با `svelte:component`
• 78. معرفی SvelteKit: فریم‌ورک فول‌استک مبتنی بر Svelte
• 79. مسیریابی مبتنی بر فایل (File-based Routing)
• 80. مسیرهای داینامیک با پارامترها (e.g., `[slug]`)
• 81. طرح‌بندی‌ها (Layouts) و طرح‌بندی‌های تودرتو
• 82. بارگذاری داده در صفحات با تابع `load`
• 83. فایل‌های `+page.js` و `+page.server.js`
• 84. رندر سمت سرور (SSR) در SvelteKit
• 85. رندر سمت کلاینت (CSR) و تفاوت‌های آن
• 86. تولید سایت استاتیک (SSG) با Adapters
• 87. فرم‌ها در SvelteKit و Progressive Enhancement
• 88. اکشن‌های فرم (Form Actions)
• 89. استفاده از `enhance` برای تجربه کاربری بهتر در فرم‌ها
• 90. مسیرهای API (Endpoints) با فایل‌های `+server.js`
• 91. مدیریت متدهای HTTP در Endpoints
• 92. محیط‌های متغیر (Environment Variables)
• 93. هوک‌ها (Hooks) در SvelteKit
• 94. مدیریت کوکی‌ها و Session
• 95. الگوهای پیشرفته مدیریت وضعیت در برنامه‌های بزرگ
• 96. تست کامپوننت‌های Svelte با Vitest
• 97. تست End-to-End با Playwright
• 98. استفاده از TypeScript در Svelte و SvelteKit
• 99. یکپارچه‌سازی با کتابخانه‌های جاوااسکریپت خارجی
• 100. پیش‌پردازش (Preprocessing) در Svelte