دوره کاملاً جداسازی logique از markup در JavaScript: از مباحث پایه تا پروژه‌های پیشرفته همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره کاملاً جداسازی logique از markup در JavaScript: از مباحث پایه تا پروژه‌های پیشرفته

موضوع کلی: دستهٔ جامع

موضوع میانی: توسعه frontend با JavaScript

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

• 1. مقدمه بر جداسازی logique از markup
• 2. تاريخچه evolutions of UI rendering in JavaScript
• 3. مفاهیم DOM و چرا می‌تواند مشکل‌ساز باشد
• 4. تفکیک responsabilites: logique vs presentation
• 5. الگوی Model-View-Controller (MVC) در JavaScript خالص
• 6. الگوی Model-View-ViewModel (MVVM) و Knockout.js
• 7. الگوی View-ViewModel (VVM) و Rivets.js
• 8. استفاده از تمپلیت‌های رشته‌ای (string-based) مانند Mustache
• 9. Handlebars.js: پیش‌فروش و helpers
• 10. Lodash.template و micro‑templating
• 11. معرفی JSX و ادغام آن با React
• 12. JSX vs HTML: تفاوت‌ها و مزایای آن
• 13. ساخت کامپوننت‌های функціонаل در React
• 14. کامپوننت‌های کلاس و مدیریت state در React
• 15. دور زندگی کامپوننت در React
• 16. مدیریت state محلی با useState
• 17. اثرات جانبی و useEffect
• 18. Context React به عنوان راه‌حل برای به اشتراک‌گذاری state
• 19. Redux: اصول و store
• 20. اکشن‌ها و ریودسرها در Redux
• 21. میِدِل‌ور در Redux (thunk, saga)
• 22. اتصال React به Redux از طریق react-redux
• 23. Vue.js: واکنش‌پذیری و تمپلیت‌های مبتنی بر HTML
• 24. دایرکتィو‌های Vue (v-if, v-for, v-bind, v-on)
• 25. ویژگی‌های محاسبه‌شده و نظارت‌کنندگان در Vue
• 26. کامپوننت‌های فایل تک‌قسمتی (.vue) در Vue
• 27. Vuex: مدیریت state در Vue
• 28. ماژول‌ها و namespacing در Vuex
• 29. Svelte: کامپایل به JavaScript خالص
• 30. سینتکس Svelte و انتساب واکنش‌پذیر
• 31. کامپوننت‌های Svelte و ویژگی‌ها
• 32. منطق و marcaپ در Svelte: dónde está la frontera
• 33. LitElement و ساخت web components بومی
• 34. قالب‌های lit‑html و direttives
• 35. ویژگی‌ها و ویژگی‌ها در web components
• 36. ظل DOM و encapsulation
• 37. ارتباط بین کامپوننت‌ها از طریق رویدادها
• 38. مدیریت فوکس و دسترسی‌پذیری در کامپوننت
• 39. تست واحد منطق با Jest
• 40. تست کامپوننت‌های React با React Testing Library
• 41. تست کامپوننت‌های Vue با Vue Test Utils
• 42. تست کامپوننت‌های Svelte
• 43. تست web components با @web/test-runner
• 44. ساخت برنامه با Vite
• 45. تنظیم Rollup برای کتابخانه‌های UI
• 46. بهینه‌سازی بسته با code‑splitting
• 47. بارگذاری تاخیری کامپوننت‌ها با React.lazy
• 48. واردات پویا در Vue 3
• 49. prefetch و preload در SvelteKit
• 50. مدیریت state جهانی با Zustand
• 51. Recoil: اتوم‌ها و سلکتورها در React
• 52. Jotai: مدیریت state مینیمالستیک
• 53. استفاده از MobX با React
• 54. observables و واکنش‌پذیری در MobX
• 55. میکرو‑فرانت‌اندها
• 56. ادغام چندین فریم‌ورک در یک برنامه
• 57. استراتژی‌های تقسیم کد بین میکرو‑فرانت‌اندها
• 58. استفاده از iframe vs web components در میکرو‑فرانت‌اندها
• 59. عملکرد render: requestAnimationFrame
• 60. virtual DOM vs incremental DOM
• 61. اثرات جانبی و پاک‌سازی در useEffect
• 62. مدیریت خطا در کامپوننت‌ها (Error Boundaries)
• 63. مدیریت خطا در Vue (errorCaptured)
• 64. مدیریت خطا در Svelte (on:error)
• 65. بین‌المللی‌سازی (i18n) در برنامه‌های JS
• 66. فرمت‌سازی تاریخ و اعداد با Intl
• 67. دسترسی‌پذیری (a11y) در کامپوننت: ARIA و فوکس
• 68. SEO برای برنامه‌های تک صفحه‌ای: prerendering
• 69. rendering سمت سرور با Next.js (React)
• 70. Nuxt.js (Vue) و SvelteKit (SSR)
• 71. تولید استاتیک سايت (SSG) vs SSR
• 72. هادراسیون و چالش‌های آن
• 73. استفاده از GraphQL برای دریافت داده‌ها بدون marcaپ
• 74. Apollo Client و ادغام با React
• 75. Vue Apollo و استفاده از composition API
• 76. Svelte و GraphQL با urql
• 77. WebSockets و داده‌های بلادِرگ در لایه منطق
• 78. همگام‌سازی state از طریق WebSocket
• 79. به‌روزرسانی‌های به‌علاوه‌ی UI
• 80. مدیریت حالت آفلاین با Service Workers
• 81. استراتژی‌های کش (Cache‑First، Network‑First)
• 82. کار با IndexedDB در لایه منطق
• 83. سریال‌سازی و دی‌سریال‌سازی state برنامه
• 84. نسخه‌بندی state و بازگشت اقدامات (undo/redo)
• 85. تست end‑to‑end با Cypress
• 86. تست end‑to‑end با Playwright
• 87. CI/CD برای frondendها با GitHub Actions
• 88. انتشار کامپوننت‌ها به عنوان بسته‌های npm
• 89. نسخه‌بندی semur و لاگ خودکار
• 90. توضیح کامپوننت‌ها با Storybook
• 91. ایجاد افزونه‌ها در Storybook
• 92. تست بصری با Chromatic
• 93. lint کردن کد JS و JSX با ESLint
• 94. فرمت کردن کد با Prettier
• 95. تنظیم قوانین دسترسی‌پذیری با eslint-plugin-jsx-a11y
• 96. تحلیل عملکرد با Lighthouse
• 97. پروفایل render با Chrome DevTokens
• 98. دیبگ state با Redux DevTools
• 99. دیبگ واکنش‌پذیری با Vue Devtools
• 100. تهیهٔ برنامه برای تولید: minify و hash