שיעור 1טיפול בטפסים ואימות (מבוקר מול לא מבוקר, ספריות: Formik, React Hook Form, VeeValidate)יישמו טיפול חזק בטפסים ואימות. השוו קלטים מבוקרים ולא מבוקרים, השתמשו בספריות כמו Formik, React Hook Form ו-VeeValidate, ועצבו אימות, הודעות שגיאה וזרימות הגשה לטפסים מורכבים.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityשיעור 2ספריות רכיבי UI ומנהגי נגישות (Tailwind, Material, Chakra, תפקידי ARIA, ניווט מקלדת)למדו להשתמש בספריות UI מודרניות תוך שמירה על נגישות חזקה. בדקו Tailwind, Material UI ו-Chakra, החילו תפקידי ARIA, ניהול מיקוד וניווט מקלדת לבניית ממשקים מכילים ומוכנים לייצור.
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionשיעור 3בחירת מסגרת Frontend והצדקה (React, Vue, Svelte) ומשא ומתן אקוסיסטםהעריכו והצדיקו בחירת מסגרת Frontend. השוו ארכיטקטורות React, Vue ו-Svelte, בשלות האקוסיסטם, ביצועים ועקומות למידה כדי לבחור ולגונן על האפשרות הטובה ביותר לכל הקשר פרויקט.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsשיעור 4בנייה, אריזה ואופטימיזציה: Webpack/Vite/Rollup, פיצול קוד, tree-shaking, טיפול בנכסיםשלטו בכלי בנייה מודרניים ל-Frontend בעלי ביצועים גבוהים. השוו Webpack, Vite ו-Rollup, הגדירו פיצול קוד ו-tree-shaking, וייעלו טיפול בנכסים, מטמון ומפות מקור לחבילות ייצור מהירות וניתנות לתחזוקה.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesשיעור 5בדיקות צד לקוח: בדיקות יחידה לרכיבים, בדיקות שילוב, בחירת ספריית בדיקות ודוגמאותפתחו אסטרטגיית בדיקות צד לקוח חזקה. למדו בדיקות יחידה לרכיבים, בדיקות שילוב על פני ניתובים ו-API, ובחירה בין Jest, Vitest, Cypress ו-Testing Library ליצירת חליפות בדיקות אמינות וניתנות לתחזוקה.
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsשיעור 6פיתוח מקומי והגדרת סביבה: משתני סביבה, קבצי .env, דגלי תכונה ל-Frontendהגדירו סביבות Frontend אמינות לפיתוח מקומי וענן. למדו לנהל משתני סביבה, קבצי .env, הזרקה בזמן בנייה ודגלי תכונה כדי להפעיל בבטחה פונקציונליות על פני פיתוח, staging וייצור.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsשיעור 7מבנה פרויקט ואמנות תיקיות ליישומי דף יחיד (רכיבים, דפים, שירותים, hooks)תכננו מבני פרויקטים מדרגיים ליישומי דף יחיד. למדו אמנות תיקיות לרכיבים, דפים, שירותים ו-hooks, וארגון כלים משותפים, בדיקות וסגנונות לשמירה על בסיסי קוד גדולים נגישים וניתנים לתחזוקה.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesשיעור 8דפוסי שילוב API: לקוחות REST מול GraphQL, טיפול בשגיאות, ניסיונות חוזרים, זמני הפסקהיישמו דפוסי שילוב API חזקים בצד הלקוח. השוו לקוחות REST ו-GraphQL, הגדירו Axios או Fetch, טפלו בשגיאות וניסיונות חוזרים, ועצבו זמני הפסקה, ביטול ותקנורמליזציה לשכבות גישה לנתונים עמידות.
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingשיעור 9אימות ב-Frontend: אחסון אסימונים, זרימות רענון, גישות קובציות מאובטחותהבינו דפוסי אימות Frontend מאובטחים. השוו localStorage, sessionStorage וקובציות, עצבו זרימות רענון אסימון, ויישמו קובציות HttpOnly, הגנות CSRF ואסטרטגיות התנתקות שמגנות על משתמשים ביישומים אמיתיים.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackשיעור 10אפשרויות ודפוסי ניהול מצב (מצב רכיב מקומי, Context, Redux/Pinia/MobX, React Query)השוו אפשרויות ניהול מצב ל-Frontend מורכבים. בדקו מצב מקומי, Context, Redux, Pinia, MobX ו-React Query, ולמדו דפוסים למטמון, תקנורמליזציה והימנעות משריטות מיותרות ביישומים גדולים.
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsשיעור 11ניתוב ונitinובים מוגנים: ניתוב צד לקוח, שומרי ניתוב, טעינה עצלהבנו ניתוב צד לקוח אמין עם ניתובים מוגנים. למדו הגדרת ניתוב, ניתובים מקוננים, טעינה עצלה ושומרי ניתוב שאוכפים אימות והרשאה תוך שמירה על ניווט מהיר ונגיש.
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes
