פיתוח פרונטאנד ב-TypeScript עבור 1C-Bitrix

פרויקט Bitrix עם קטלוג של 50,000 פריטים הוא מאבק מתמיד נגד אי-התאמות טיפוסים. כאשר מעבירים נתונים מ-PHP ל-JavaScript, לעיתים קרובות צצים באגים: /local/templates/my_site/ ├── src/ │ ├── components/ │ │ ├── catalog/ │ │ │ ├── CatalogFilter.ts │ │ │ ├── ProductCard.ts │ │ │ └── CartButton.ts │ │ ├── cart/ │ │ │ ├── CartDrawer.ts │ │ │ └── CartCounter.ts │ │ └── common/ │ │ ├── Modal.ts │ │ └── Tooltip.ts │ ├── api/ │ │ ├── catalog.ts │ │ ├── cart.ts │ │ └── user.ts │ ├── types/ │ │ ├── bitrix.d.ts │ │ └── api.ts │ ├── utils/ │ │ ├── http.ts │ │ └── format.ts │ └── main.ts ├── dist/ ├── package.json ├── tsconfig.json └── vite.config.ts , סוגי מחירים שגויים, פילטרים שבורים. נתקלנו בכך באופן קבוע בפרויקטים בכל רמת מורכבות. TypeScript פותר זאת: טיפוסים סטטיים תופסים שגיאות בזמן קומפילציה, לא בדפדפן של המשתמש. הניסיון של הצוות שלנו — 8 שנים ב-Bitrix ומעל 50 פרויקטים עם ארכיטקטורת TypeScript. תוצאה: הפחתת עלויות תיקון באגים ב-30–50% וקיצור משמעותי של זמן ניפוי האינטגרציה. בפרויקט אחד, החיסכון בתיקון באגים הסתכם בסכום משמעותי בשנה הראשונה לאחר המעבר.

למה TypeScript במקום JavaScript וניל עבור Bitrix?

לפי TypeScript Handbook (בויקיפדיה), טיפוסים סטטיים מונעים עד 15% מהשגיאות בזמן קומפילציה. בהקשר של Bitrix זה קריטי: סוג מחיר שגוי או מזהה מוצר שגוי יכולים לשבור את סל הקניות. בפרויקט עם קטלוג של 100,000 פריטים חיסלנו לחלוטין באגי פילטרים לאחר המעבר לטיפוסים קפדניים. פרונטאנד TypeScript אמין פי 2–3 מפתרון דומה ב-JS פשוט: שגיאות טיפוסים, העברת נתונים שגויה בין PHP ל-JS, בעיות מטמון — הכל נתפס לפני הייצור.

איך משתלב TypeScript עם רכיבי PHP?

אנו משתמשים בגישה שלבית כדי למזער זמן השבתה:

• ביקורת קוד JS קיים: זיהוי אי-התאמות טיפוסים, משתנים גלובליים, נקודות חולשה.
• עיצוב טיפוסים לכל נקודות האינטגרציה עם PHP (בלוקי מידע, REST, רכיבים).
• הגדרת כלי בנייה (Vite או Webpack) עם תמיכה ב-TypeScript.
• פיתוח רכיבים עם טיפוסים מלאים — קטלוג, סל, פילטר.
• בדיקות ופריסה עם אחריות ליציבות.

ארכיטקטורת TypeScript בתבנית Bitrix

שתי גישות עיקריות שאנו מיישמים:

רוב הפרויקטים שלנו משתמשים בגישה הראשונה עם אלמנטים מהשנייה בחלקים האינטראקטיביים ביותר (קטלוג, סל, חשבון אישי).

/local/templates/my_site/
├── src/
│   ├── components/
│   │   ├── catalog/
│   │   │   ├── CatalogFilter.ts
│   │   │   ├── ProductCard.ts
│   │   │   └── CartButton.ts
│   │   ├── cart/
│   │   │   ├── CartDrawer.ts
│   │   │   └── CartCounter.ts
│   │   └── common/
│   │       ├── Modal.ts
│   │       └── Tooltip.ts
│   ├── api/
│   │   ├── catalog.ts
│   │   ├── cart.ts
│   │   └── user.ts
│   ├── types/
│   │   ├── bitrix.d.ts
│   │   └── api.ts
│   ├── utils/
│   │   ├── http.ts
│   │   └── format.ts
│   └── main.ts
├── dist/
├── package.json
├── tsconfig.json
└── vite.config.ts

רכיב סל קניות ב-TypeScript

דוגמה לרכיב הוספה לסל עם טיפוסים:

// api/cart.ts
interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
  img: string | null;
}

interface CartState {
  items: CartItem[];
  totalPrice: number;
  totalCount: number;
  currency: string;
}

interface AddToCartPayload {
  productId: number;
  quantity: number;
  properties?: Record<string, string>;
}

export async function addToCart(payload: AddToCartPayload): Promise<CartState> {
  const formData = new FormData();
  formData.append('sessid', BX.bitrix_sessid());
  formData.append('action', 'addItem');
  formData.append('product_id', String(payload.productId));
  formData.append('quantity', String(payload.quantity));
  if (payload.properties) {
    Object.entries(payload.properties).forEach(([k, v]) => {
      formData.append(`props[${k}]`, v);
    });
  }
  const res = await fetch('/local/ajax/cart.php', {
    method: 'POST',
    body: formData,
  });
  if (!res.ok) throw new Error(`Cart error: ${res.status}`);
  const json = await res.json();
  if (json.status !== 'success') throw new Error(json.error ?? 'Cart error');
  return json.cart as CartState;
}

אינטגרציה עם רכיבי PHP באמצעות data-attributes

העברת נתונים מתבנית ל-TypeScript ללא משתנים גלובליים:

// template.php компонента каталога
<div id="catalog-app"
     data-section-id="<?= (int)$arResult['SECTION']['ID'] ?>"
     data-iblock-id="<?= (int)$arParams['IBLOCK_ID'] ?>"
     data-initial-filter='<?= htmlspecialchars( json_encode($arResult['FILTER_PARAMS']), ENT_QUOTES ) ?>'
>
    <?php // SSR-вёрстка для первой загрузки ?>
</div>

// TypeScript читает данные типизированно
const appEl = document.getElementById('catalog-app');
if (!appEl) throw new Error('#catalog-app not found');
const sectionId = Number(appEl.dataset['sectionId']);
const iblockId = Number(appEl.dataset['iblockId']);
const rawFilter = appEl.dataset['initialFilter'] ?? '{}';
const initFilter = JSON.parse(rawFilter) as FilterState;

איך Vite מאיץ בניית פרונטאנד TypeScript?

עבור פרויקטים רב-מודוליים אנו משתמשים ב-Vite — הוא מספק בניות מהירות וחלוקת קוד.

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: 'src/main.ts',
        catalog: 'src/pages/catalog.ts',
        cart: 'src/pages/cart.ts',
      },
    },
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

נקודות כניסה נפרדות לכל סעיף — רק ה-JavaScript הדרוש נטען בדף, מה שמשפר את מהירות הטעינה.

מקרה אמיתי: קטלוג עם 100,000 מוצרים

הלקוח שלנו — חנות מסחר אלקטרוני עם קטלוג של 100,000 פריטים. מאפיינים: פילטרים דינמיים, סל עם אפשרויות רבות, אינטגרציה עם 1C באמצעות CommerceML. קוד ה-vanilla JS המקורי סבל משגיאות טיפוסים במהלך החלפת 1C. ביצענו ביקורת, עיצבנו טיפוסים לכל הישויות והעברנו את הפרונטאנד ל-TypeScript בשלושה שבועות. תוצאה: שגיאות הסל ירדו ב-60%, זמן טעינת הפילטר ב-30%. הלקוח קיבל אחריות ליציבות לשנתיים הבאות, והחיסכון בתיקון באגים הסתכם בסכום משמעותי בשנה הראשונה.

מה כלול בעבודת פיתוח הפרונטאנד שלנו ב-TypeScript

• ביקורת ארכיטקטורה קיימת: זיהוי בעיות JavaScript, הערכת היקף המעבר.
• הגדרת TypeScript + כלי בנייה (Vite/Webpack) תוך התחשבות בסביבת Bitrix.
• יצירת טיפוסים לכל נקודות האינטגרציה עם PHP (בלוקי מידע, REST, רכיבים).
• פיתוח רכיבים חדשים (קטלוג, סל, פילטר, אזור אישי) עם טיפוסים מלאים.
• העברת קוד קיים מ-vanilla JS ל-TypeScript תוך שמירה על פונקציונליות.
• תיעוד ארכיטקטורה ותיאור טיפוסים.
• בדיקות וניפוי באגים בייצור עם אחריות ליציבות.

לוח זמנים משוער

לוח הזמנים והעלות המדויקים מחושבים באופן אישי לאחר היכרות עם הפרויקט שלך. הזמינו ביקורת על הפרויקט שלכם — ננתח את הקוד שלכם ונציע את הפתרון הטוב ביותר. קבלו ייעוץ כדי להבין כיצד TypeScript יפחית את עלויות התחזוקה של הפרונטאנד שלכם.