11.8 גישה לפרויקט פרונטאנד הרצאה

גישה לפרויקט פרונטאנד - Frontend Project Approach¶

לדעת לכתוב קוד זה רק חלק מהתמונה. בשיעור זה נלמד כיצד לגשת לפרויקט פרונטאנד מאפס - מתכנון ודרישות, דרך בחירת טכנולוגיות וארכיטקטורה, ועד הגדרת סביבת עבודה מקצועית.

תכנון פרויקט מאפס¶

שלב 1 - הבנת הדרישות¶

לפני שכותבים שורת קוד - חובה להבין מה בונים:

מה המוצר? - תיאור כללי של האפליקציה
מי קהל היעד? - משתמשים טכניים? קשישים? ילדים?
מה הפיצ'רים המרכזיים? - רשימה מתועדפת
מה ה-MVP? - הגרסה המינימלית שכדאי לשחרר ראשונה
מה האילוצים? - זמן, תקציב, ביצועים, נגישות

שלב 2 - איסוף דרישות¶

דרישות פונקציונליות (מה המערכת עושה):
- רישום והתחברות משתמשים
- חיפוש מוצרים עם סינון
- עגלת קניות ותשלום
- פאנל ניהול

דרישות לא-פונקציונליות (איך המערכת מתנהגת):
- זמן טעינה מתחת ל-3 שניות
- תמיכה ב-1000 משתמשים מקבילים
- נגישות ברמת WCAG AA
- תמיכה בעברית ואנגלית
- רספונסיביות מלאה

Wireframing - שרטוט מסגרת¶

כלים מומלצים¶

Figma - הכלי הנפוץ ביותר, חינמי לפרויקטים קטנים
Excalidraw - שרטוט מהיר וחופשי
נייר ועט - לשלב הראשוני, הכי מהיר

מה כולל wireframe?¶

מבנה דפים (layout) - header, sidebar, main, footer
ניווט - תפריט, breadcrumbs, טאבים
תוכן - היכן יופיעו טקסטים, תמונות, טפסים
אינטראקציות - מה קורה בלחיצה, גלילה, hover
מצבי קצה - טעינה, שגיאה, רשימה ריקה

תזרים משתמש - User Flow¶

דף הבית -> חיפוש -> תוצאות -> דף מוצר -> הוספה לעגלה -> עגלה -> תשלום -> אישור
                                     |
                                     v
                                  ביקורות

בחירת חבילת טכנולוגיות - Tech Stack¶

שאלות שצריך לשאול¶

האם צריך SSR/SSG? (SEO חשוב?)
מה גודל הצוות ורמת הניסיון?
האם צריך תמיכה אופליין?
מה דרישות הביצועים?
האם יש מערכת backend קיימת?

חבילה מומלצת לפרויקט מודרני¶

פריימוורק: Next.js (App Router)
שפה: TypeScript
סגנון: Mantine UI / Tailwind CSS
ניהול סטייט: Zustand (client) + React Query (server)
טפסים: React Hook Form + Zod
אימות: Auth.js (NextAuth)
מסד נתונים: Prisma + PostgreSQL
פריסה: Vercel
בדיקות: Vitest + Playwright

חלופות לפי סוג פרויקט¶

Landing Page / אתר תוכן:
  Next.js + Tailwind + MDX

אפליקציית SPA:
  Vite + React + React Router + Zustand

אפליקציית Enterprise:
  Next.js + TypeScript + Mantine + React Query + Prisma

דשבורד:
  Next.js + Mantine + TanStack Table + Recharts

מבנה פרויקט וארכיטקטורה¶

מבנה תיקיות מומלץ¶

src/
  app/                    # Next.js App Router
    (auth)/               # קבוצת נתיבי אימות
      login/
      register/
    (dashboard)/          # קבוצת נתיבי דשבורד
      dashboard/
      settings/
    api/                  # API Routes
    layout.tsx
    page.tsx
  components/
    ui/                   # קומפוננטות UI בסיסיות
      Button.tsx
      Input.tsx
      Modal.tsx
    features/             # קומפוננטות לפי פיצ'ר
      auth/
        LoginForm.tsx
        RegisterForm.tsx
      products/
        ProductCard.tsx
        ProductList.tsx
    layout/               # קומפוננטות Layout
      Header.tsx
      Sidebar.tsx
      Footer.tsx
  hooks/                  # Custom Hooks
    useAuth.ts
    useDebounce.ts
  lib/                    # ספריות ושירותים
    api.ts                # הגדרת API client
    auth.ts               # הגדרת Auth.js
    prisma.ts             # הגדרת Prisma
    utils.ts              # פונקציות עזר
  stores/                 # Zustand stores
    useCartStore.ts
    useThemeStore.ts
  types/                  # טיפוסי TypeScript
    api.ts
    models.ts
  styles/                 # סגנונות גלובליים
    globals.css
  constants/              # קבועים
    routes.ts
    config.ts

עקרונות ארכיטקטוניים¶

הפרדת אחריות - כל קובץ עושה דבר אחד
קולוקציה - קבצים קשורים יושבים ביחד
DRY - אל תחזור על עצמך, הוצא לפונקציה/קומפוננטה
KISS - שמור את זה פשוט
יבוא/ייצוא - השתמש ב-index files לייצוא נקי

הגדרת סביבת עבודה - Tooling Setup¶

ESLint - בדיקת קוד¶

npm install -D eslint @eslint/js typescript-eslint eslint-plugin-react-hooks eslint-plugin-jsx-a11y

// eslint.config.mjs
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactHooks from 'eslint-plugin-react-hooks';
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: {
      'react-hooks': reactHooks,
      'jsx-a11y': jsxA11y,
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  }
);

Prettier - עיצוב קוד¶

npm install -D prettier eslint-config-prettier

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

// .prettierignore
node_modules
.next
dist
coverage

Husky - Git Hooks¶

npm install -D husky lint-staged
npx husky init

# .husky/pre-commit
npx lint-staged

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,css,md}": ["prettier --write"]
  }
}

commitlint - הודעות קומיט¶

npm install -D @commitlint/cli @commitlint/config-conventional

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'ci'],
    ],
    'subject-max-length': [2, 'always', 72],
  },
};

# .husky/commit-msg
npx --no -- commitlint --edit $1

תהליך פיתוח - Development Workflow¶

אסטרטגיית Branching¶

main (production)
  |
  +-- develop (staging)
        |
        +-- feature/add-cart
        +-- feature/user-profile
        +-- fix/login-bug
        +-- chore/update-deps

main - קוד פרודקשן, תמיד יציב
develop - ענף פיתוח, מתמזג ל-main בשחרור
feature/ - פיצ'ר חדש, מתמזג ל-develop
fix/ - תיקון באג
chore/ - משימות תחזוקה

תהליך PR¶

פתיחת branch מ-develop
פיתוח ובדיקות מקומיות
Push ופתיחת Pull Request
CI רץ אוטומטית (lint, test, build)
Code Review על ידי חבר צוות
תיקון הערות
Merge ל-develop
Preview deployment נוצר אוטומטית

קומיטים טובים¶

# מבנה מומלץ (Conventional Commits)
feat: add shopping cart component
fix: resolve login redirect issue
docs: update README with setup instructions
style: format code with prettier
refactor: extract validation logic to hook
test: add unit tests for CartService
chore: update dependencies
ci: add e2e tests to pipeline

תיעוד ו-README¶

מבנה README מומלץ¶

# שם הפרויקט

תיאור קצר של הפרויקט.

## דרישות מקדימות

- Node.js 20+
- PostgreSQL 15+

## התקנה

git clone ...
npm install
cp .env.example .env
npm run dev

## סקריפטים

- npm run dev - הפעלת שרת פיתוח
- npm run build - בניית פרויקט
- npm run test - הרצת בדיקות
- npm run lint - בדיקת קוד

## מבנה הפרויקט

תיאור של מבנה התיקיות.

## טכנולוגיות

רשימת הטכנולוגיות בשימוש.

תיעוד קומפוננטות¶

/**
 * כפתור פעולה ראשי
 *
 * @example
 * <Button variant="primary" size="lg" onClick={handleClick}>
 *   שלח טופס
 * </Button>
 */
interface ButtonProps {
  /** סוג הכפתור - קובע את הצבע */
  variant: 'primary' | 'secondary' | 'danger';
  /** גודל הכפתור */
  size?: 'sm' | 'md' | 'lg';
  /** האם הכפתור מושבת */
  disabled?: boolean;
  /** פונקציית callback בלחיצה */
  onClick?: () => void;
  children: React.ReactNode;
}

הערכת זמנים ופירוק משימות¶

טכניקת פירוק¶

פירוק לפיצ'רים ראשיים
פירוק כל פיצ'ר לקומפוננטות
הערכת זמן לכל קומפוננטה
הוספת buffer (x1.5 - x2)

דוגמה¶

פרויקט: אתר מסחר אלקטרוני

1. תשתית ראשונית (3 ימים)
   - הגדרת Next.js + TypeScript + Mantine
   - הגדרת Prisma + DB
   - הגדרת ESLint + Prettier + Husky
   - CI/CD בסיסי

2. אימות משתמשים (3 ימים)
   - דף הרשמה + אימות
   - דף התחברות
   - שכחתי סיסמה
   - הגנת נתיבים

3. קטלוג מוצרים (5 ימים)
   - דף ראשי עם מוצרים
   - דף מוצר בודד
   - חיפוש וסינון
   - קטגוריות

4. עגלת קניות (3 ימים)
   - הוספה/הסרה מעגלה
   - עדכון כמויות
   - סיכום הזמנה

5. תשלום (3 ימים)
   - טופס פרטי משלוח
   - אינטגרציה עם שירות תשלום
   - אישור הזמנה

6. פאנל ניהול (4 ימים)
   - ניהול מוצרים (CRUD)
   - ניהול הזמנות
   - דשבורד סטטיסטיקות

7. שיפורים ותיקונים (3 ימים)
   - בדיקות
   - ביצועים
   - נגישות
   - SEO

סך הכל: ~24 ימי עבודה
עם buffer (x1.5): ~36 ימי עבודה = ~7 שבועות

סיכום¶

בשיעור זה למדנו על:

תכנון - הבנת דרישות, wireframing, user flows
בחירת טכנולוגיות - שאלות מנחות וחבילות מומלצות
מבנה פרויקט - ארכיטקטורת תיקיות ועקרונות
כלי פיתוח - ESLint, Prettier, Husky, commitlint
תהליך עבודה - branching, PRs, code review
תיעוד - README, תיעוד קומפוננטות
הערכת זמנים - פירוק משימות ותכנון

תכנון טוב חוסך זמן רב בפיתוח. השקיעו בתכנון לפני שמתחילים לכתוב קוד.