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

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

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

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

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 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

Svelte: آینده فریم‌ورک‌های فرانت‌اند در دستان شماست! (Impact, Innovation, and Evolution)

آیا از پیچیدگی فریم‌ورک‌های فرانت‌اند خسته شده‌اید؟ آیا به دنبال راهی سریع‌تر، کارآمدتر و با کمترین حجم کد برای توسعه وب هستید؟ دوره آموزشی Svelte: The Future of Frontend Frameworks دقیقاً برای شما طراحی شده است!

Svelte یک فریم‌ورک انقلابی است که نحوه توسعه وب را تغییر داده است. برخلاف فریم‌ورک‌های سنتی که حجم زیادی از کد را به مرورگر منتقل می‌کنند، Svelte در زمان کامپایل، کدها را به جاوااسکریپت vanilla بهینه‌سازی شده تبدیل می‌کند. این به معنای عملکرد فوق‌العاده سریع، حجم فایل کمتر و تجربه کاربری بهتر است. با شرکت در این دوره، شما نه تنها Svelte را یاد می‌گیرید، بلکه یک قدم از رقبای خود جلوتر خواهید بود.

درباره دوره

این دوره جامع، از صفر تا صد Svelte را به شما آموزش می‌دهد. از مفاهیم پایه مانند syntax و کامپوننت‌ها گرفته تا مباحث پیشرفته مانند state management و server-side rendering، همه چیز در این دوره پوشش داده شده است. شما با انجام پروژه‌های عملی و تمرین‌های متنوع، به یک متخصص Svelte تبدیل خواهید شد.

موضوعات کلیدی

• مقدمه‌ای بر Svelte و فلسفه آن
• نصب و راه‌اندازی Svelte
• کامپوننت‌ها: ساختار، props و events
• Reactivity و State Management در Svelte
• Handling User Input و Form Bindings
• ساخت لیست‌ها و Iteration
• Conditional Rendering
• Transitions و Animations
• Stores: Global State Management
• Server-Side Rendering (SSR) با SvelteKit
• Routing با SvelteKit
• Deployment و بهینه‌سازی Svelte Apps
• تست و اشکال‌زدایی Svelte Applications
• ادغام Svelte با API های خارجی
• بهترین شیوه‌ها در توسعه Svelte

مخاطبان دوره

این دوره برای افراد زیر مناسب است:

• توسعه‌دهندگان فرانت‌اند که به دنبال یادگیری یک فریم‌ورک مدرن و کارآمد هستند.
• توسعه‌دهندگانی که با فریم‌ورک‌های دیگری مانند React، Vue یا Angular کار کرده‌اند و می‌خواهند Svelte را امتحان کنند.
• دانشجویان و فارغ‌التحصیلان رشته‌های کامپیوتر و IT که به توسعه وب علاقه‌مند هستند.
• طراحان وب که می‌خواهند دانش فنی خود را افزایش دهند و به توسعه فرانت‌اند مسلط شوند.
• هر کسی که به دنبال ساخت وب‌سایت‌ها و اپلیکیشن‌های وب سریع و کارآمد است.

چرا این دوره را بگذرانیم؟

گذراندن این دوره مزایای بسیاری دارد، از جمله:

• یادگیری یک فریم‌ورک آینده‌دار: Svelte به سرعت در حال محبوب شدن است و تقاضا برای توسعه‌دهندگان Svelte در حال افزایش است.
• بهبود عملکرد وب‌سایت‌ها و اپلیکیشن‌ها: Svelte با تولید کدهای بهینه، عملکرد فوق‌العاده‌ای را ارائه می‌دهد.
• کاهش حجم کد: Svelte نسبت به فریم‌ورک‌های دیگر، کد کمتری تولید می‌کند که باعث افزایش سرعت بارگذاری و بهبود SEO می‌شود.
• افزایش بهره‌وری: Svelte با syntax ساده و API های آسان، فرآیند توسعه را سریع‌تر و لذت‌بخش‌تر می‌کند.
• افزایش فرصت‌های شغلی: یادگیری Svelte می‌تواند درهای جدیدی را برای شما در بازار کار باز کند.
• یادگیری SvelteKit: با یادگیری SvelteKit می توانید به سادگی سایت های فول استک مبتنی بر Svelte بسازید.
• حمایت از جامعه فعال: Svelte دارای یک جامعه فعال و پشتیبانی‌کننده است که همواره در حال بهبود و توسعه آن هستند.

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

این دوره شامل 100 سرفصل جامع است که تمامی جنبه‌های Svelte را پوشش می‌دهد. در اینجا فقط به برخی از آن‌ها اشاره می‌کنیم:

• آشنایی با اکوسیستم JavaScript و فریم‌ورک‌ها
• مقایسه Svelte با React، Vue و Angular
• نصب و راه‌اندازی Node.js و npm
• ایجاد اولین پروژه Svelte
• آشنایی با syntax Svelte (HTML, CSS, JavaScript)
• کامپوننت‌ها: تعریف، استفاده و import/export
• Props و Events: انتقال داده بین کامپوننت‌ها
• Reactivity: واکنش خودکار به تغییرات داده
• Two-way Binding: اتصال متغیرها به input ها
• Conditional Rendering: نمایش محتوا بر اساس شرط
• Looping: ایجاد لیست‌ها و تکرارها
• Using CSS in Svelte: روش‌های مختلف استایل‌دهی
• Transitions: ایجاد انیمیشن‌های ساده
• Animations: ایجاد انیمیشن‌های پیچیده‌تر
• Actions: افزودن رفتار به عناصر DOM
• Stores: مدیریت state در کل اپلیکیشن
• Writable Stores, Readable Stores, Derived Stores
• Context API: اشتراک‌گذاری داده بین کامپوننت‌ها
• Lifecycles: متدهای اجرای کد در زمان‌های مختلف کامپوننت
• Slots: تعریف مکان‌هایی برای محتوای خارجی در کامپوننت
• Using Third-Party Libraries: استفاده از کتابخانه‌های جاوااسکریپت
• Working with APIs: دریافت و ارسال داده به سرور
• Form Handling: مدیریت فرم‌ها و اعتبارسنجی داده
• Error Handling: مدیریت خطاها در اپلیکیشن
• Testing: نوشتن تست برای کامپوننت‌ها
• Debugging: اشکال‌زدایی کد Svelte
• Deploying: انتشار اپلیکیشن Svelte
• SvelteKit: معرفی و نصب
• SvelteKit Routing: مسیردهی در SvelteKit
• SvelteKit Data Loading: بارگذاری داده در SvelteKit
• SvelteKit Endpoints: ساخت API با SvelteKit
• SvelteKit Layouts: استفاده از Layout ها در SvelteKit
• SvelteKit Hooks: استفاده از Hook ها در SvelteKit
• SvelteKit SSR: رندرینگ سمت سرور با SvelteKit
• SvelteKit Adapters: Deployment با استفاده از Adapterها
• آشنایی باTailwind CSS و استفاده از آن در Svelte
• ایجاد یک وبلاگ ساده با SvelteKit
• ایجاد یک اپلیکیشن TODO با Svelte
• بهینه‌سازی عملکرد Svelte Apps
• بهترین شیوه‌ها در توسعه Svelte
• و بسیاری سرفصل‌های دیگر...

همین حالا در دوره Svelte: The Future of Frontend Frameworks ثبت‌نام کنید و به جمع توسعه‌دهندگان پیشرو بپیوندید! آینده توسعه وب در دستان شماست.