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

פיתוח פרונטאנד מנותק (Decoupled) עבור 1C-Bitrix

אנו מפתחים פרונטאנד מנותק עבור 1C-Bitrix: אנו מפרידים פיזית את הממשק מה-CMS תוך שמירה על ניהוליות ומאפשרים הגירה הדרגתית. אנו פותרים את הבעיה שבה תבנית Bitrix סטנדרטית מגיעה לתקרת ביצועים, אך עיצוב מחדש מלא הוא מסוכן ויקר מדי. הגישה המנותקת מעניקה לכם UX מודרני (React/Vue, SPA, SSR) מבלי לעצור את העסק שלכם — אנו מחליפים רק עמודים קריטיים, ומשאירים את פאנל הניהול ועמודי SEO על ה-CMS.

למה מנותק (Decoupled), ולא Headless?

Headless פירושו שהאתר כולו מסתמך על API וה-CMS הוא רק צד אחורי. זה דורש שיפוץ ארכיטקטוני מלא. Decoupled הוא דרך הביניים המוזהבת: אתם בוחרים אילו עמודים לשרת דרך SPA ואילו להשאיר על תבניות Bitrix. לדוגמה, קטלוג המוצרים יכול להיות אפליקציית React, בעוד שעמודי תוכן עדיין נוצרים על ידי ה-CMS. השוואה:

פרונטאנד מנותק מהיר ב-30% ליישום בהשוואה ל-Headless, אך מספק 90% משיפור ביצועי הממשק. בנוסף, אתם שומרים על מודולי Bitrix הקיימים והלוגיקה העסקית — אין צורך לשכתב אינפובלוקים, סוכנים או אירועים.

איך לסנכרן את סל הקניות בין Bitrix ל-React?

נקודת הכאב הנפוצה ביותר ב-Decoupled היא סל הקניות. אייקון הכותרת (תבנית Bitrix) חייב להציג את מספר הפריטים בפועל שנוספו דרך קטלוג ה-React. הפתרון הוא Event Bus הנגיש בשני העולמות:

// shared/eventBus.js — доступен и в Битрикс-части, и в React
window.BitrixEventBus = {
  listeners: {},
  emit(event, data) {
    (this.listeners[event] || []).forEach(cb => cb(data));
  },
  on(event, callback) {
    (this.listeners[event] ||= []).push(callback);
  }
};

// В React-компоненте при добавлении в корзину:
window.BitrixEventBus.emit('cart:updated', { count: newCount });

// В Битрикс-шаблоне (шапка):
window.BitrixEventBus.on('cart:updated', ({ count }) => {
  document.querySelector('.cart-counter').textContent = count;
});

אותו דפוס חל על סנכרון מועדפים, התראות וכל מצב גלובלי אחר. למידע נוסף על REST API של Bitrix24, ראו את התיעוד הרשמי.

תבנית "האי" (Island) — אינטגרציית פרונטאנד חלקית

במקום להפריד לחלוטין את הפרונטאנד, אתם מטמיעים רכיבי React בתבנית Bitrix קיימת דרך נקודות עיגון (mount points):

// В шаблоне компонента каталога Битрикс
$catalogData = json_encode($arResult['ITEMS']);
?>
<div id="react-catalog" data-items="<?= htmlspecialchars($catalogData) ?>" data-currency="RUB">
</div>
<script src="/local/js/dist/catalog.bundle.js"></script>
<script>
    window.BitrixCatalog && window.BitrixCatalog.mount(
        document.getElementById('react-catalog'),
        <?= $catalogData ?>
    );
</script>

// catalog.bundle.js — собирается Webpack/Vite независимо
import { createRoot } from 'react-dom/client';
import { CatalogApp } from './CatalogApp';

window.BitrixCatalog = {
  mount(container, initialData) {
    const root = createRoot(container);
    root.render(<CatalogApp initialData={initialData} />);
  }
};

גישה זו מאפשרת לפתח פרונטאנד React עם ערכת כלים מלאה (TypeScript, טעינה חמה, בדיקות) מבלי לגעת בשאר אתר Bitrix.

דוגמה: קטלוג מוצרים על React

נניח שעליכם להחליף את רכיב הקטלוג הסטנדרטי של Bitrix ב-SPA המציע סינון מיידי. אנו יוצרים נקודת קצה API המחזירה מוצרים בפורמט JSON. אפליקציית React מביאה את הנתונים ומציגה אותם בצד הלקוח. צד השרת נשאר על Bitrix — אינפובלוקים, מחירים, מלאי. זה מפחית את זמן טעינת העמוד ב-40–60% ומעלה את שיעור ההמרה ב-15–25%.

תצורת בנייה (Vite)

// vite.config.js для decoupled-компонентов Битрикс
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: '../public/local/js/dist',
    lib: {
      entry: './src/index.tsx',
      name: 'BitrixComponents',
      formats: ['iife'],
      fileName: 'components',
    },
    rollupOptions: {
      external: [],
    },
  },
  server: {
    cors: true,
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://site.local',
        changeOrigin: true,
      }
    }
  },
});

במצב פיתוח, שרת הפיתוח של Vite רץ על // shared/eventBus.js — доступен и в Битрикс-части, и в React window.BitrixEventBus = { listeners: {}, emit(event, data) { (this.listeners[event] || []).forEach(cb => cb(data)); }, on(event, callback) { (this.listeners[event] ||= []).push(callback); } }; // В React-компоненте при добавлении в корзину: window.BitrixEventBus.emit('cart:updated', { count: newCount }); // В Битрикс-шаблоне (шапка): window.BitrixEventBus.on('cart:updated', ({ count }) => { document.querySelector('.cart-counter').textContent = count; }); ואתר Bitrix על // В шаблоне компонента каталога Битрикс $catalogData = json_encode($arResult['ITEMS']); ?> <div id="react-catalog" data-items="<?= htmlspecialchars($catalogData) ?>" data-currency="RUB"> </div> <script src="/local/js/dist/catalog.bundle.js"></script> <script> window.BitrixCatalog && window.BitrixCatalog.mount( document.getElementById('react-catalog'), <?= $catalogData ?> ); </script> . בקשות API משרת הפיתוח מנותבות דרך פרוקסי של Vite. לאחר הבנייה, ה-bundle מסונכרן אוטומטית עם השרת.

השוואת לוחות זמנים ליישום רכיבים

מה כלול בעבודה

• ביקורת על ארכיטקטורת אתר Bitrix הקיים וזיהוי מועמדים לניתוק
• פיתוח שכבת API (REST/GraphQL) בין Bitrix לפרונטאנד החדש
• יישום של 2–3 רכיבים באמצעות תבנית "האי" (קטלוג, סל קניות, חשבון משתמש)
• הגדרת CI/CD לבנייה ופריסה אוטומטית של הפרונטאנד
• אינטגרציה של Event Bus לסנכרון מצב
• תיעוד נקודות עיגון ו-API
• בדיקות ביצועים (מדידות לפני/אחרי)

תהליך העבודה

1. ניתוח — אנו לומדים את האתר הקיים, העומס ונקודות התורפה. קובעים אילו עמודים להחליף קודם.
2. עיצוב — בוחרים את המחסנית (React/Vue), מתכננים את ה-API ומעצבים את הרכיבים.
3. יישום — כותבים קוד במקביל לצוות שלכם. הדגמות שבועיות.
4. בדיקות — בדיקות עומס, רגרסיה על פונקציונליות Bitrix.
5. פריסה — פריסה הדרגתית, ניטור שגיאות. יכולת חזרה לאחור תוך 24 שעות.

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

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

טעויות נפוצות ב-Decoupled

• העתקה מלאה של העיצוב ל-React — מאבדים ביצועים עקב עיבודים מחדש מיותרים.
• חוסר בגרסאות ל-bundle — הדפדפן שומר במטמון סקריפטים ישנים. השתמשו ב-hashes: // catalog.bundle.js — собирается Webpack/Vite независимо import { createRoot } from 'react-dom/client'; import { CatalogApp } from './CatalogApp'; window.BitrixCatalog = { mount(container, initialData) { const root = createRoot(container); root.render(<CatalogApp initialData={initialData} />); } }; .
• סנכרון מצב דרך HTTP במקום Event Bus — עיכובים מיותרים.
• שכחת SEO: אם ה-SPA לא מגיש HTML, מנועי החיפוש לא יראו את העמודים. השתמשו ב-SSR או בעיבוד מוקדם (prerendering).
• אי הגדרת פרוקסי לפיתוח — הפרונטאנד לא יכול לגשת ל-API של Bitrix.

יש לנו ניסיון של 10+ שנים עם Bitrix, הסמכות 1C-Bitrix, ויותר מ-50 פרויקטים מוצלחים. אנו מספקים אחריות חוזית על כל העבודות. הזמינו ביקורת על הפרויקט שלכם — נבחר את הארכיטקטורה המנותקת האופטימלית. קבלו ייעוץ ליישום עוד היום.